'use client'

import { useState, useRef, useEffect } from 'react'
import { Button } from '@/components/ui/button'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Textarea } from '@/components/ui/textarea'
import { Label } from '@/components/ui/label'
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select'
import { useToast } from '@/hooks/use-toast'
import { Volume2, Play, Square, Download, Settings, Loader2 } from 'lucide-react'

interface TtsState {
  isPlaying: boolean
  isProcessing: boolean
  audioBlob: Blob | null
  audioUrl: string | null
}

interface VoiceOption {
  id: string
  name: string
  language: string
}

const VOICE_OPTIONS: VoiceOption[] = [
  { id: 'en-US', name: 'English (US)', language: 'en-US' },
  { id: 'en-GB', name: 'English (UK)', language: 'en-GB' },
  { id: 'es-ES', name: 'Spanish', language: 'es-ES' },
  { id: 'fr-FR', name: 'French', language: 'fr-FR' },
  { id: 'de-DE', name: 'German', language: 'de-DE' },
]

const TTS_ENDPOINT = 'https://tts41-nhdtuisbdhcvdth.siliconpin.com/tts'

export function TextToSpeechClient() {
  const { toast } = useToast()
  const [ttsState, setTtsState] = useState<TtsState>({
    isPlaying: false,
    isProcessing: false,
    audioBlob: null,
    audioUrl: null,
  })
  const [text, setText] = useState('')
  const [selectedVoice, setSelectedVoice] = useState('en-US')
  const [speechRate, setSpeechRate] = useState(1.0)
  const [pitch, setPitch] = useState(1.0)

  const audioRef = useRef<HTMLAudioElement | null>(null)

  // Clean up on unmount
  useEffect(() => {
    return () => {
      if (ttsState.audioUrl) {
        URL.revokeObjectURL(ttsState.audioUrl)
      }
    }
  }, [ttsState.audioUrl])

  const convertTextToSpeech = async () => {
    if (!text.trim()) {
      toast({
        title: 'No Text',
        description: 'Please enter some text to convert to speech',
        variant: 'destructive',
      })
      return
    }

    setTtsState((prev) => ({ ...prev, isProcessing: true }))

    try {
      const response = await fetch(TTS_ENDPOINT, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          text: text.trim(),
          voice: selectedVoice,
          rate: speechRate,
          pitch: pitch,
        }),
      })

      if (!response.ok) {
        const errorText = await response.text()
        throw new Error(`TTS API Error (${response.status}): ${errorText}`)
      }

      const audioBlob = await response.blob()
      const audioUrl = URL.createObjectURL(audioBlob)

      setTtsState({
        isPlaying: false,
        isProcessing: false,
        audioBlob,
        audioUrl,
      })

      toast({
        title: 'Success',
        description: 'Text converted to speech successfully!',
      })
    } catch (error) {
      const message = error instanceof Error ? error.message : 'TTS conversion failed'
      toast({
        title: 'Conversion Failed',
        description: message,
        variant: 'destructive',
      })
      setTtsState((prev) => ({ ...prev, isProcessing: false }))
    }
  }

  const playAudio = () => {
    if (ttsState.audioUrl) {
      if (audioRef.current) {
        audioRef.current.pause()
      }

      const audio = new Audio(ttsState.audioUrl)
      audioRef.current = audio

      audio.play()
      setTtsState((prev) => ({ ...prev, isPlaying: true }))

      audio.onended = () => {
        setTtsState((prev) => ({ ...prev, isPlaying: false }))
      }

      audio.onerror = () => {
        toast({
          title: 'Playback Error',
          description: 'Failed to play audio',
          variant: 'destructive',
        })
        setTtsState((prev) => ({ ...prev, isPlaying: false }))
      }
    }
  }

  const stopAudio = () => {
    if (audioRef.current) {
      audioRef.current.pause()
      audioRef.current = null
    }
    setTtsState((prev) => ({ ...prev, isPlaying: false }))
  }

  const downloadAudio = () => {
    if (ttsState.audioBlob) {
      const url = URL.createObjectURL(ttsState.audioBlob)
      const a = document.createElement('a')
      a.href = url
      a.download = `speech-${Date.now()}.wav`
      a.click()
      URL.revokeObjectURL(url)
    }
  }

  const hasAudio = ttsState.audioBlob !== null
  const canConvert = text.trim().length > 0 && !ttsState.isProcessing

  return (
    <>
      <div className="mb-6">
        <h1 className="text-3xl font-bold mb-2">Text to Speech Converter</h1>
        <p className="text-muted-foreground">Convert text to natural sounding speech</p>
      </div>

      {/* Text Input Section */}
      <Card className="mb-6">
        <CardHeader>
          <CardTitle>Enter Text</CardTitle>
        </CardHeader>
        <CardContent>
          <Textarea
            value={text}
            onChange={(e) => setText(e.target.value)}
            placeholder="Enter text to convert to speech..."
            className="min-h-32 resize-none"
          />
          <div className="flex justify-between items-center mt-4">
            <span className="text-sm text-muted-foreground">{text.length} characters</span>
            <Button onClick={convertTextToSpeech} disabled={!canConvert}>
              {ttsState.isProcessing ? (
                <Loader2 className="w-4 h-4 mr-2 animate-spin" />
              ) : (
                <Volume2 className="w-4 h-4 mr-2" />
              )}
              {ttsState.isProcessing ? 'Processing...' : 'Convert to Speech'}
            </Button>
          </div>
        </CardContent>
      </Card>

      {/* Voice Settings */}
      <Card className="mb-6">
        <CardHeader>
          <CardTitle className="flex items-center">
            <Settings className="w-5 h-5 mr-2" />
            Voice Settings
          </CardTitle>
        </CardHeader>
        <CardContent className="space-y-6">
          <div className="space-y-2">
            <Label htmlFor="voice">Voice</Label>
            <Select value={selectedVoice} onValueChange={setSelectedVoice}>
              <SelectTrigger>
                <SelectValue placeholder="Select a voice" />
              </SelectTrigger>
              <SelectContent>
                {VOICE_OPTIONS.map((voice) => (
                  <SelectItem key={voice.id} value={voice.id}>
                    {voice.name}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>

          <div className="space-y-2">
            <Label htmlFor="rate">Speech Rate: {speechRate.toFixed(1)}x</Label>
            <div className="flex items-center gap-3">
              <span className="text-sm text-muted-foreground">0.5x</span>
              <input
                id="rate"
                type="range"
                min="0.5"
                max="2.0"
                step="0.1"
                value={speechRate}
                onChange={(e) => setSpeechRate(parseFloat(e.target.value))}
                className="flex-1 h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
              />
              <span className="text-sm text-muted-foreground">2.0x</span>
            </div>
          </div>

          <div className="space-y-2">
            <Label htmlFor="pitch">Pitch: {pitch.toFixed(1)}</Label>
            <div className="flex items-center gap-3">
              <span className="text-sm text-muted-foreground">0.5</span>
              <input
                id="pitch"
                type="range"
                min="0.5"
                max="2.0"
                step="0.1"
                value={pitch}
                onChange={(e) => setPitch(parseFloat(e.target.value))}
                className="flex-1 h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
              />
              <span className="text-sm text-muted-foreground">2.0</span>
            </div>
          </div>
        </CardContent>
      </Card>

      {/* Audio Output */}
      {hasAudio && (
        <Card className="mb-6">
          <CardHeader>
            <CardTitle>Generated Speech</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="flex gap-3">
              <Button
                onClick={ttsState.isPlaying ? stopAudio : playAudio}
                variant={ttsState.isPlaying ? 'secondary' : 'default'}
                size="lg"
              >
                {ttsState.isPlaying ? (
                  <>
                    <Square className="w-5 h-5 mr-2" />
                    Stop Playing
                  </>
                ) : (
                  <>
                    <Play className="w-5 h-5 mr-2" />
                    Play Audio
                  </>
                )}
              </Button>

              <Button onClick={downloadAudio} variant="outline" size="lg">
                <Download className="w-5 h-5 mr-2" />
                Download
              </Button>
            </div>
          </CardContent>
        </Card>
      )}
    </>
  )
}