/**
 * VoiceInput component
 *
 * Provides a microphone button with visual feedback for voice input.
 * Click to start/stop recording with real-time transcription display.
 *
 * Design principles:
 * - PDA-friendly: calm, non-aggressive colors
 * - Gentle pulsing animation for recording state (blue/green)
 * - Mobile-friendly touch interaction
 * - Accessible with proper aria labels
 */

import { useVoiceInput } from "@/hooks/useVoiceInput";
import type { UseVoiceInputOptions } from "@/hooks/useVoiceInput";
import { AudioVisualizer } from "./AudioVisualizer";
import { Mic, MicOff } from "lucide-react";

export interface VoiceInputProps {
  /** Callback fired when final transcription is received */
  onTranscript?: (text: string) => void;
  /** Whether to use WebSocket streaming (default: true) */
  useWebSocket?: boolean;
  /** Whether the input is disabled */
  disabled?: boolean;
  /** Additional CSS classes for the container */
  className?: string;
}

/**
 * Voice input component with microphone capture and real-time transcription.
 * Shows a mic button that toggles recording, with visual feedback
 * and transcription text display.
 */
export function VoiceInput({
  onTranscript,
  useWebSocket: useWs,
  disabled = false,
  className = "",
}: VoiceInputProps): React.JSX.Element {
  const hookOptions: UseVoiceInputOptions = {};
  if (onTranscript !== undefined) {
    hookOptions.onTranscript = onTranscript;
  }
  if (useWs !== undefined) {
    hookOptions.useWebSocket = useWs;
  }

  const {
    isRecording,
    startRecording,
    stopRecording,
    transcript,
    partialTranscript,
    error,
    audioLevel,
  } = useVoiceInput(hookOptions);

  const handleClick = (): void => {
    if (isRecording) {
      stopRecording();
    } else {
      void startRecording();
    }
  };

  const displayText = isRecording ? partialTranscript : transcript;

  return (
    <div className={`flex flex-col items-center gap-3 ${className}`}>
      {/* Mic button with recording indicator */}
      <div className="relative flex items-center gap-2">
        {/* Pulsing ring animation when recording */}
        {isRecording && (
          <div
            className="absolute inset-0 -m-1 rounded-full bg-sky-400/20 animate-pulse"
            aria-hidden="true"
          />
        )}

        <button
          type="button"
          onClick={handleClick}
          disabled={disabled}
          aria-label={isRecording ? "Stop voice input" : "Start voice input"}
          className={`
            relative z-10 flex items-center justify-center
            w-10 h-10 rounded-full transition-all duration-200
            focus:outline-none focus:ring-2 focus:ring-sky-400 focus:ring-offset-2
            disabled:opacity-50 disabled:cursor-not-allowed
            ${
              isRecording
                ? "bg-sky-500 text-white hover:bg-sky-600 shadow-md"
                : "bg-slate-100 text-slate-600 hover:bg-slate-200 dark:bg-slate-700 dark:text-slate-300 dark:hover:bg-slate-600"
            }
          `}
        >
          {isRecording ? (
            <MicOff className="w-5 h-5" aria-hidden="true" />
          ) : (
            <Mic className="w-5 h-5" aria-hidden="true" />
          )}
        </button>

        {/* Audio level visualizer - shown during recording */}
        {isRecording && (
          <AudioVisualizer audioLevel={audioLevel} isActive={isRecording} barCount={5} />
        )}
      </div>

      {/* Recording status indicator */}
      {isRecording && (
        <div className="flex items-center gap-1.5 text-xs text-sky-600 dark:text-sky-400">
          <span className="w-2 h-2 rounded-full bg-sky-500 animate-pulse" aria-hidden="true" />
          <span>Listening...</span>
        </div>
      )}

      {/* Transcription text display */}
      {displayText && (
        <p
          className={`
            text-sm max-w-md text-center px-3 py-1.5 rounded-lg
            ${
              isRecording
                ? "text-slate-500 dark:text-slate-400 bg-slate-50 dark:bg-slate-800/50 italic"
                : "text-slate-700 dark:text-slate-200 bg-slate-100 dark:bg-slate-800"
            }
          `}
        >
          {displayText}
        </p>
      )}

      {/* Error display - calm, non-aggressive */}
      {error && (
        <p
          className="text-sm text-amber-700 dark:text-amber-400 bg-amber-50 dark:bg-amber-900/20 px-3 py-1.5 rounded-lg max-w-md text-center"
          role="alert"
        >
          {error}
        </p>
      )}
    </div>
  );
}
