import { useState } from 'react';
import { useVoiceStore } from '../stores/voice.ts';
import { DeviceSettingsModal } from './DeviceSettingsModal.tsx';

export function VoiceControls() {
  const [showDeviceSettings, setShowDeviceSettings] = useState(false);
  const isMuted = useVoiceStore((state) => state.isMuted);
  const isDeafened = useVoiceStore((state) => state.isDeafened);
  const isVideoOn = useVoiceStore((state) => state.isVideoOn);
  const isScreenSharing = useVoiceStore((state) => state.isScreenSharing);
  const noiseSuppression = useVoiceStore((state) => state.noiseSuppression);
  const toggleMute = useVoiceStore((state) => state.toggleMute);
  const toggleDeafen = useVoiceStore((state) => state.toggleDeafen);
  const toggleVideo = useVoiceStore((state) => state.toggleVideo);
  const toggleScreenShare = useVoiceStore((state) => state.toggleScreenShare);
  const toggleNoiseSuppression = useVoiceStore((state) => state.toggleNoiseSuppression);
  const leaveVoice = useVoiceStore((state) => state.leaveVoice);

  return (
    <div className="flex items-center gap-2 font-mono text-sm">
      <button
        onClick={toggleMute}
        className={`px-1.5 py-0.5 rounded-sm transition-colors ${
          isMuted
            ? 'text-gb-red bg-gb-bg-s border border-gb-red'
            : 'text-gb-fg-s hover:text-gb-orange hover:bg-gb-bg-t border border-transparent'
        }`}
        title={isMuted ? 'Unmute microphone' : 'Mute microphone'}
      >
        [{isMuted ? 'm✗' : 'm'}]
      </button>
      <button
        onClick={toggleDeafen}
        className={`px-1.5 py-0.5 rounded-sm transition-colors ${
          isDeafened
            ? 'text-gb-red bg-gb-bg-s border border-gb-red'
            : 'text-gb-fg-s hover:text-gb-orange hover:bg-gb-bg-t border border-transparent'
        }`}
        title={isDeafened ? 'Undeafen' : 'Deafen'}
      >
        [{isDeafened ? 'd✗' : 'd'}]
      </button>
      <button
        onClick={toggleVideo}
        className={`px-1.5 py-0.5 rounded-sm transition-colors ${
          isVideoOn
            ? 'text-gb-orange bg-gb-bg-s border border-gb-orange'
            : 'text-gb-fg-s hover:text-gb-orange hover:bg-gb-bg-t border border-transparent'
        }`}
        title={isVideoOn ? 'Turn off camera' : 'Turn on camera'}
      >
        [cam]
      </button>
      <button
        onClick={toggleScreenShare}
        className={`px-1.5 py-0.5 rounded-sm transition-colors ${
          isScreenSharing
            ? 'text-gb-aqua bg-gb-bg-s border border-gb-aqua'
            : 'text-gb-fg-s hover:text-gb-aqua hover:bg-gb-bg-t border border-transparent'
        }`}
        title={isScreenSharing ? 'Stop sharing' : 'Share screen'}
      >
        [share]
      </button>
      <button
        onClick={toggleNoiseSuppression}
        className={`px-1.5 py-0.5 rounded-sm transition-colors ${
          noiseSuppression
            ? 'text-gb-green bg-gb-bg-s border border-gb-green'
            : 'text-gb-fg-s hover:text-gb-green hover:bg-gb-bg-t border border-transparent'
        }`}
        title={noiseSuppression ? 'Noise suppression on' : 'Noise suppression off'}
      >
        [ns{noiseSuppression ? '●' : '○'}]
      </button>
      <div className="flex-1" />
      <button
        onClick={() => setShowDeviceSettings(true)}
        className="px-1.5 py-0.5 rounded-sm transition-colors text-gb-fg-s hover:text-gb-fg-f hover:bg-gb-bg-t border border-transparent mr-2"
        title="Device Settings"
      >
        [⚙]
      </button>
      <button
        onClick={leaveVoice}
        className="px-1.5 py-0.5 rounded-sm text-gb-red hover:bg-gb-red hover:text-gb-bg transition-colors border border-transparent hover:border-gb-red"
        title="Disconnect"
      >
        [x]
      </button>

      {showDeviceSettings && (
        <DeviceSettingsModal onClose={() => setShowDeviceSettings(false)} />
      )}
    </div>
  );
}