import React, { useState } from 'react';

const servers = [
  { id: 'home', name: 'Direct Messages', initial: '🏠', type: 'home', notifications: 4 },
  { divider: true },
  { id: 'foundation', name: 'AeThex Foundation', initial: 'F', type: 'foundation', notifications: 0 },
  { id: 'corporation', name: 'AeThex Corporation', initial: 'C', type: 'corporation', notifications: 12 },
  { id: 'labs', name: 'AeThex Labs', initial: 'L', type: 'labs', notifications: 0, hasUpdate: true },
  { divider: true },
  { id: 'gaming', name: 'AeThex Gaming', initial: 'AG', type: 'community', notifications: 0 },
  { id: 'dev', name: 'Dev Community', initial: 'DC', type: 'community', notifications: 3 },
  { id: 'music', name: 'Music Lounge', initial: '🎵', type: 'community', notifications: 0 },
  { divider: true },
  { id: 'add', name: 'Add a Server', initial: '+', type: 'add' },
  { id: 'explore', name: 'Explore Servers', initial: '🧭', type: 'explore' },
];

export default function ServerList({ activeServer, setActiveServer, onOpenDMs, onDMsClick, selectedDMs, onOpenSettings }) {
  const [hoveredServer, setHoveredServer] = useState(null);

  return (
    <div className="server-list">
      {servers.map((server, idx) => {
        if (server.divider) {
          return <div key={`divider-${idx}`} className="server-divider" />;
        }
        
        const isActive = activeServer === server.id || (server.id === 'home' && selectedDMs);
        const isHovered = hoveredServer === server.id;
        let className = 'server-icon';
        if (server.type !== 'home' && server.type !== 'add' && server.type !== 'explore') {
          className += ` ${server.type}`;
        }
        if (isActive) className += ' active';
        
        return (
          <div
            key={server.id}
            className={className}
            onClick={() => {
              if (server.id === 'home') {
                onOpenDMs?.();
                onDMsClick?.();
              }
              setActiveServer?.(server.id);
            }}
            onMouseEnter={() => setHoveredServer(server.id)}
            onMouseLeave={() => setHoveredServer(null)}
            title={server.name}
            style={server.type === 'home' ? { background: isActive ? '#5865f2' : '#36393f' } : 
                   server.type === 'add' ? { background: '#36393f', color: '#3ba55d' } :
                   server.type === 'explore' ? { background: '#36393f', color: '#3ba55d' } : undefined}
          >
            {server.initial}
            
            {/* Notification Badge */}
            {server.notifications > 0 && (
              <div className="notification-badge">
                {server.notifications > 99 ? '99+' : server.notifications}
              </div>
            )}
            
            {/* Update dot */}
            {server.hasUpdate && !server.notifications && (
              <div className="update-dot"></div>
            )}
            
            {/* Tooltip */}
            {isHovered && (
              <div className="server-tooltip">
                {server.name}
              </div>
            )}
          </div>
        );
      })}
    </div>
  );
}
