import { Play, Download, RotateCcw, Mic, MicOff } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Label } from '@/components/ui/label';
import { Progress } from '@/components/ui/progress';
import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
import type { OscilloscopeMode } from '@/hooks/useOscilloscopeRenderer';

export type VisualizationMode = 'waveform' | 'spectrum' | 'both';

export interface LiveDisplaySettings {
  lineThickness: number;
  showGrid: boolean;
  glowIntensity: number;
  displayMode: OscilloscopeMode;
  visualizationMode: VisualizationMode;
}

interface ControlPanelProps {
  mode: OscilloscopeMode;
  onModeChange: (mode: OscilloscopeMode) => void;
  canGenerate: boolean;
  isGenerating: boolean;
  progress: number;
  exportedUrl: string | null;
  onGenerate: () => void;
  onReset: () => void;
  isPlaying: boolean;
  onPreview: () => void;
  canPreview: boolean;
  playbackSpeed: number;
  onPlaybackSpeedChange: (speed: number) => void;
  isLooping: boolean;
  onLoopingChange: (looping: boolean) => void;
  exportResolution: string;
  onExportResolutionChange: (resolution: string) => void;
  exportFps: number;
  onExportFpsChange: (fps: number) => void;
  exportQuality: string;
  onExportQualityChange: (quality: string) => void;
  liveSettings: LiveDisplaySettings;
  onLiveSettingsChange: (settings: LiveDisplaySettings) => void;
  isMicActive: boolean;
  onToggleMic: () => void;
}

export function OscilloscopeControls({
  mode,
  onModeChange,
  canGenerate,
  isGenerating,
  progress,
  exportedUrl,
  onGenerate,
  onReset,
  isPlaying,
  onPreview,
  canPreview,
  playbackSpeed,
  onPlaybackSpeedChange,
  isLooping,
  onLoopingChange,
  exportResolution,
  onExportResolutionChange,
  exportFps,
  onExportFpsChange,
  exportQuality,
  onExportQualityChange,
  liveSettings,
  onLiveSettingsChange,
  isMicActive,
  onToggleMic,
}: ControlPanelProps) {
  return (
    <div className="flex flex-col gap-6 p-6 bg-card border border-border rounded-lg">
      {/* Live Display Options */}
      <div className="space-y-3">
        <Label className="font-crt text-lg text-primary text-glow">LIVE DISPLAY</Label>
        
        {/* Visualization Mode */}
        <div className="flex items-center justify-between">
          <span className="font-mono-crt text-sm text-foreground/90">Visualization</span>
          <div className="flex gap-1">
            {(['waveform', 'spectrum', 'both'] as VisualizationMode[]).map((vizMode) => (
              <button
                key={vizMode}
                onClick={() => onLiveSettingsChange({ ...liveSettings, visualizationMode: vizMode })}
                className={`px-2 py-1 text-xs font-mono-crt border transition-all duration-300 capitalize ${
                  liveSettings.visualizationMode === vizMode
                    ? 'border-primary text-primary bg-primary/10'
                    : 'border-primary/50 text-primary/70 hover:border-primary hover:text-primary'
                }`}
              >
                {vizMode}
              </button>
            ))}
          </div>
        </div>
        
        {/* Display Mode */}
        <RadioGroup
          value={liveSettings.displayMode}
          onValueChange={(value) => onLiveSettingsChange({ ...liveSettings, displayMode: value as OscilloscopeMode })}
          className="space-y-2"
        >
          <div className="flex items-center space-x-3">
            <RadioGroupItem value="combined" id="live-combined" className="border-primary" />
            <Label htmlFor="live-combined" className="font-mono-crt text-sm cursor-pointer">
              Combined (L+R waveform)
            </Label>
          </div>
          <div className="flex items-center space-x-3">
            <RadioGroupItem value="all" id="live-xy" className="border-primary" />
            <Label htmlFor="live-xy" className="font-mono-crt text-sm cursor-pointer">
              XY Mode (Lissajous)
            </Label>
          </div>
        </RadioGroup>

        {/* Line Thickness */}
        <div className="flex items-center justify-between">
          <span className="font-mono-crt text-sm text-foreground/90">Line Thickness</span>
          <div className="flex gap-1">
            {[1, 2, 3, 4].map((thickness) => (
              <button
                key={thickness}
                onClick={() => onLiveSettingsChange({ ...liveSettings, lineThickness: thickness })}
                className={`px-2 py-1 text-xs font-mono-crt border transition-all duration-300 ${
                  liveSettings.lineThickness === thickness
                    ? 'border-primary text-primary bg-primary/10'
                    : 'border-primary/50 text-primary/70 hover:border-primary hover:text-primary'
                }`}
              >
                {thickness}px
              </button>
            ))}
          </div>
        </div>

        {/* Show Grid */}
        <div className="flex items-center justify-between">
          <span className="font-mono-crt text-sm text-foreground/90">Show Grid</span>
          <button
            onClick={() => onLiveSettingsChange({ ...liveSettings, showGrid: !liveSettings.showGrid })}
            className={`w-12 h-6 rounded-full border border-primary transition-all duration-300 ${
              liveSettings.showGrid ? 'bg-primary' : 'bg-transparent'
            }`}
          >
            <div
              className={`w-4 h-4 rounded-full bg-background border border-primary transition-transform duration-300 ${
                liveSettings.showGrid ? 'translate-x-6' : 'translate-x-1'
              }`}
            />
          </button>
        </div>

        {/* Glow Intensity */}
        <div className="flex items-center justify-between">
          <span className="font-mono-crt text-sm text-foreground/90">Glow</span>
          <div className="flex gap-1">
            {[0, 1, 2, 3].map((glow) => (
              <button
                key={glow}
                onClick={() => onLiveSettingsChange({ ...liveSettings, glowIntensity: glow })}
                className={`px-2 py-1 text-xs font-mono-crt border transition-all duration-300 ${
                  liveSettings.glowIntensity === glow
                    ? 'border-primary text-primary bg-primary/10'
                    : 'border-primary/50 text-primary/70 hover:border-primary hover:text-primary'
                }`}
              >
                {glow === 0 ? 'Off' : glow}
              </button>
            ))}
          </div>
        </div>
      </div>

      {/* Audio Input */}
      <div className="space-y-3">
        <Label className="font-crt text-lg text-primary text-glow">AUDIO INPUT</Label>
        
        {/* Microphone Toggle */}
        <Button
          onClick={onToggleMic}
          variant={isMicActive ? "default" : "outline"}
          className={`w-full flex items-center justify-center gap-2 font-crt ${
            isMicActive
              ? 'bg-primary text-primary-foreground'
              : 'border-primary/50 hover:bg-primary/10'
          }`}
        >
          {isMicActive ? <MicOff size={16} /> : <Mic size={16} />}
          {isMicActive ? 'STOP MICROPHONE' : 'USE MICROPHONE'}
        </Button>
        
        {isMicActive && (
          <p className="text-xs text-muted-foreground font-mono-crt text-center">
            Real-time input active
          </p>
        )}
      </div>

      {/* Playback Controls */}
      <div className="space-y-3">
        <Label className="font-crt text-lg text-primary text-glow">PLAYBACK CONTROLS</Label>

        {/* Playback Speed */}
        <div className="flex items-center justify-between">
          <span className="font-mono-crt text-sm text-foreground/90">Speed: {playbackSpeed}x</span>
          <div className="flex gap-1">
            {[0.5, 1, 1.5, 2].map((speed) => (
              <button
                key={speed}
                onClick={() => onPlaybackSpeedChange(speed)}
                className={`px-2 py-1 text-xs font-mono-crt border transition-all duration-300 ${
                  playbackSpeed === speed
                    ? 'border-primary text-primary bg-primary/10'
                    : 'border-primary/50 text-primary/70 hover:border-primary hover:text-primary'
                }`}
              >
                {speed}x
              </button>
            ))}
          </div>
        </div>

        {/* Looping Toggle */}
        <div className="flex items-center justify-between">
          <span className="font-mono-crt text-sm text-foreground/90">Looping</span>
          <button
            onClick={() => onLoopingChange(!isLooping)}
            className={`w-12 h-6 rounded-full border border-primary transition-all duration-300 ${
              isLooping ? 'bg-primary' : 'bg-transparent'
            }`}
          >
            <div
              className={`w-4 h-4 rounded-full bg-background border border-primary transition-transform duration-300 ${
                isLooping ? 'translate-x-6' : 'translate-x-1'
              }`}
            />
          </button>
        </div>
      </div>

      {/* Preview Button */}
      <Button
        onClick={onPreview}
        disabled={!canPreview || isGenerating}
        variant="outline"
        className="w-full font-crt text-lg h-12 border-primary/50 hover:bg-primary/10 hover:border-primary"
      >
        <Play className="mr-2 h-5 w-5" />
        {isPlaying ? 'PLAYING...' : 'PREVIEW'}
      </Button>

      {/* Export Options */}
      <div className="space-y-3 pt-4 border-t border-border">
        <Label className="font-crt text-lg text-primary text-glow">EXPORT OPTIONS</Label>
        <p className="font-mono-crt text-xs text-muted-foreground">Settings for video export only</p>

        {/* Export Display Mode */}
        <div className="flex items-center justify-between">
          <span className="font-mono-crt text-sm text-foreground/90">Mode</span>
          <select
            value={mode}
            onChange={(e) => onModeChange(e.target.value as OscilloscopeMode)}
            className="bg-background border border-primary/50 text-primary font-mono-crt text-sm px-2 py-1"
          >
            <option value="combined">Combined</option>
            <option value="separate">Separate</option>
            <option value="all">All</option>
          </select>
        </div>

        {/* Resolution */}
        <div className="flex items-center justify-between">
          <span className="font-mono-crt text-sm text-foreground/90">Resolution</span>
          <select
            value={exportResolution}
            onChange={(e) => onExportResolutionChange(e.target.value)}
            className="bg-background border border-primary/50 text-primary font-mono-crt text-sm px-2 py-1"
          >
            <option value="640x480">640×480</option>
            <option value="1280x720">1280×720</option>
            <option value="1920x1080">1920×1080</option>
          </select>
        </div>

        {/* Frame Rate */}
        <div className="flex items-center justify-between">
          <span className="font-mono-crt text-sm text-foreground/90">Frame Rate</span>
          <select
            value={exportFps}
            onChange={(e) => onExportFpsChange(Number(e.target.value))}
            className="bg-background border border-primary/50 text-primary font-mono-crt text-sm px-2 py-1"
          >
            <option value={24}>24 FPS</option>
            <option value={30}>30 FPS</option>
            <option value={60}>60 FPS</option>
          </select>
        </div>

        {/* Quality */}
        <div className="flex items-center justify-between">
          <span className="font-mono-crt text-sm text-foreground/90">Quality</span>
          <select
            value={exportQuality}
            onChange={(e) => onExportQualityChange(e.target.value)}
            className="bg-background border border-primary/50 text-primary font-mono-crt text-sm px-2 py-1"
          >
            <option value="low">Low</option>
            <option value="medium">Medium</option>
            <option value="high">High</option>
          </select>
        </div>
      </div>

      {/* Generate Button */}
      <Button
        onClick={onGenerate}
        disabled={!canGenerate || isGenerating}
        className="w-full font-crt text-lg h-14 bg-primary hover:bg-primary/80 text-primary-foreground"
      >
        {isGenerating ? (
          <>
            <div className="w-5 h-5 border-2 border-primary-foreground border-t-transparent rounded-full animate-spin mr-2" />
            GENERATING...
          </>
        ) : (
          'GENERATE VIDEO'
        )}
      </Button>

      {/* Progress Bar */}
      {isGenerating && (
        <div className="space-y-2">
          <Progress value={progress} className="h-3 bg-secondary" />
          <p className="text-center font-mono-crt text-sm text-muted-foreground">
            {progress}% complete
          </p>
          <p className="text-center font-mono-crt text-xs text-muted-foreground/70">
            Keep this tab in foreground
          </p>
        </div>
      )}

      {/* Download Button */}
      {exportedUrl && (
        <div className="space-y-3">
          <a
            href={exportedUrl}
            download="oscilloscope-video.webm"
            className="block"
          >
            <Button
              variant="outline"
              className="w-full font-crt text-lg h-12 border-accent hover:bg-accent/10 text-accent"
            >
              <Download className="mr-2 h-5 w-5" />
              DOWNLOAD VIDEO
            </Button>
          </a>
          
          <Button
            onClick={onReset}
            variant="ghost"
            className="w-full font-mono-crt text-muted-foreground hover:text-primary"
          >
            <RotateCcw className="mr-2 h-4 w-4" />
            Reset
          </Button>
        </div>
      )}

      {/* Info */}
      <div className="text-xs text-muted-foreground font-mono-crt space-y-1 pt-4 border-t border-border">
        <p>Output: WebM (VP9)</p>
        <p>Quality affects video bitrate</p>
        <p>Supports files up to 6+ hours</p>
      </div>
    </div>
  );
}
