import { useVoiceStore } from '../stores/voice.ts';
import { useAuthStore } from '../stores/auth.ts';
import { VoiceControls } from './VoiceControls.tsx';
import { VideoGrid } from './VideoGrid.tsx';

export function VoicePanel() {
  const isConnected = useVoiceStore((state) => state.isConnected);
  const currentRoom = useVoiceStore((state) => state.currentRoom);
  const currentRoomName = useVoiceStore((state) => state.currentRoomName);
  const participants = useVoiceStore((state) => state.participants);
  const error = useVoiceStore((state) => state.error);
  const whispers = useVoiceStore((state) => state.whispers);
  const whisperTo = useVoiceStore((state) => state.whisperTo);
  const dismissWhisper = useVoiceStore((state) => state.dismissWhisper);
  const currentUserId = useAuthStore((state) => state.user?.id);

  if (!currentRoom) return null;

  return (
    <div className="bg-gb-bg-s border border-gb-bg-t rounded-sm font-mono text-sm mb-2">
      {/* Box-drawn header */}
      <div className="px-3 py-1.5 border-b border-gb-bg-t flex items-center gap-2">
        <span className="text-gb-fg-f">
          ┌─┤
          <span className="text-gb-orange font-bold">VOICE</span>
          ├─{'─'.repeat(Math.max(0, 20 - (currentRoomName?.length ?? 0)))}┐
        </span>
        <span className="text-gb-fg-s truncate flex-1">
          {currentRoomName || currentRoom}
        </span>
        <span
          className={`text-xxs ${
            isConnected ? 'text-gb-green' : 'text-gb-fg-f'
          }`}
        >
          {isConnected ? '● LIVE' : '◐ connecting...'}
        </span>
      </div>

      {/* Error display */}
      {error && (
        <div className="px-3 py-1 text-gb-red text-xxs border-b border-gb-bg-t">
          ! {error}
        </div>
      )}

      {/* Incoming whispers */}
      {whispers.length > 0 && (
        <div className="px-3 py-1.5 border-b border-gb-bg-t">
          <div className="text-xxs text-gb-fg-f mb-1">
            ── whispers ──
          </div>
          {whispers.map((w) => (
            <div
              key={w.timestamp}
              className="flex items-center gap-2 py-0.5 text-xs text-gb-orange"
            >
              <span>🔊</span>
              <span className="font-bold">{w.fromUsername}</span>
              <span className="text-gb-fg-s truncate">{w.message || 'whispered'}</span>
              <button
                className="ml-auto text-xxs text-gb-fg-f hover:text-gb-fg-s"
                onClick={() => dismissWhisper(w.timestamp)}
              >
                [x]
              </button>
            </div>
          ))}
        </div>
      )}

      {/* Participants */}
      <div className="px-3 py-1.5 border-b border-gb-bg-t">
        <div className="text-xxs text-gb-fg-f mb-1">
          ── participants ──
        </div>
        {participants.length === 0 && (
          <div className="text-xxs text-gb-fg-f">[empty channel]</div>
        )}
        {participants.map((p) => {
          const isMe = p.identity === currentUserId;
          return (
            <div
              key={p.identity}
              className="flex items-center gap-2 py-0.5 text-xs"
            >
              <span
                className={
                  p.isSpeaking
                    ? 'text-gb-green'
                    : p.isMuted
                      ? 'text-gb-red'
                      : 'text-gb-fg-s'
                }
              >
                {p.isMuted ? '○' : '●'}
              </span>
              <span
                className={p.isSpeaking ? 'text-gb-green' : 'text-gb-fg-s'}
              >
                {p.username}
              </span>
              {p.isMuted && (
                <span className="text-xxs text-gb-red">[muted]</span>
              )}
              {p.isSpeaking && (
                <span className="text-xxs text-gb-green">[speaking]</span>
              )}
              {!isMe && (
                <button
                  className="ml-auto text-xxs text-gb-fg-f hover:text-gb-orange"
                  onClick={() => whisperTo(p.identity, p.username)}
                  title={`Whisper to ${p.username}`}
                >
                  [whisper]
                </button>
              )}
            </div>
          );
        })}
      </div>

      {/* Video grid */}
      <VideoGrid />

      {/* Controls */}
      <div className="px-3 py-1.5">
        <VoiceControls />
      </div>

      {/* Box-drawn footer */}
      <div className="px-3 pb-1 text-xxs text-gb-fg-f">
        └{'─'.repeat(40)}┘
      </div>
    </div>
  );
}
