import { useVoiceStore } from '../stores/voice.ts';

interface VoiceChannelProps {
  channelId: string;
  channelName: string;
}

export function VoiceChannel({ channelId, channelName }: VoiceChannelProps) {
  const currentRoom = useVoiceStore((state) => state.currentRoom);
  const isConnected = useVoiceStore((state) => state.isConnected);
  const joinVoice = useVoiceStore((state) => state.joinVoice);
  const participants = useVoiceStore((state) => state.participants);

  const isActive = currentRoom === channelId;

  const handleClick = () => {
    if (!isActive) {
      console.log("[VoiceChannel] joining voice:", channelId, channelName);
      joinVoice(channelId, channelName).catch((err) => {
        console.error("[VoiceChannel] joinVoice failed:", err);
      });
    }
  };

  const error = useVoiceStore((state) => state.error);

  return (
    <div className="mb-0.5">
      {error && (
        <div className="px-2 py-0.5 text-gb-red text-xxs">! {error}</div>
      )}
      <button
        onClick={handleClick}
        className={`w-full text-left px-2 py-1 rounded-sm flex items-center gap-2 ${
          isActive ? 'terminal-active' : 'hover:bg-gb-bg-t text-gb-fg-s'
        }`}
      >
        <span className={isActive ? 'text-gb-orange' : 'text-gb-fg-f'}>
          {isActive && isConnected ? '●' : isActive ? '◐' : '○'}
        </span>
        <span className={isActive ? 'text-gb-orange' : 'text-gb-fg-f'}>
          🔊
        </span>
        <span className="truncate">{channelName}</span>
        {isActive && participants.length > 0 && (
          <span className="ml-auto text-xxs text-gb-fg-f">
            [{participants.length}]
          </span>
        )}
      </button>
      {isActive && (
        <div className="pl-7 py-0.5">
          {participants.map((p) => (
            <div
              key={p.identity}
              className="text-xxs text-gb-fg-f flex items-center gap-1"
            >
              <span className={p.isSpeaking ? 'text-gb-green' : 'text-gb-fg-f'}>
                {p.isMuted ? '○' : '●'}
              </span>
              <span className={p.isSpeaking ? 'text-gb-green' : ''}>
                {p.username}
              </span>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}