kithara-studio/frontend/src/components/Generator.tsx

import { useState, useEffect } from 'react'

interface ModelInfo {
  name: string
  max_duration: number
  default_duration: number
  description: string
}

interface Props {
  onGenerate: () => void
}

export default function Generator({ onGenerate }: Props) {
  const [prompt, setPrompt] = useState('')
  const [model, setModel] = useState('lyria-3-clip-preview')
  const [duration, setDuration] = useState(30)
  const [isLoading, setIsLoading] = useState(false)
  const [error, setError] = useState('')
  const [models, setModels] = useState<Record<string, ModelInfo>>({})

  useEffect(() => {
    fetch('/api/models')
      .then(res => res.json())
      .then(data => {
        setModels(data.models || {})
        setModel(data.default || 'lyria-3-clip-preview')
        const defaultInfo = data.models?.[data.default]
        setDuration(defaultInfo?.default_duration || 30)
      })
      .catch(() => {})  // Use hardcoded defaults on failure
  }, [])

  const handleModelChange = (newModel: string) => {
    setModel(newModel)
    const info = models[newModel]
    if (info) {
      setDuration(info.default_duration)
    }
  }

  const currentModelInfo = models[model]
  const maxDuration = currentModelInfo?.max_duration || 30
  const minDuration = 5

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    if (!prompt.trim()) return

    setIsLoading(true)
    setError('')

    try {
      const res = await fetch('/api/generate', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          prompt: prompt.trim(),
          model,
          duration
        })
      })

      if (!res.ok) {
        try {
          const errorData = await res.json()
          throw new Error(errorData.error || errorData.detail || 'Generation failed')
        } catch (parseErr) {
          if (parseErr instanceof Error && parseErr.message !== 'Generation failed') throw parseErr
          throw new Error('Generation failed')
        }
      }

      const data = await res.json()

      if (data.error) {
        throw new Error(data.error)
      }

      setPrompt('')
      onGenerate()
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Something went wrong')
    } finally {
      setIsLoading(false)
    }
  }

  return (
    <div className="bg-lyria-panel rounded-lg p-5 border border-white/5">
      <h2 className="text-sm font-semibold text-white mb-4 uppercase tracking-wider">
        Generate
      </h2>

      <form onSubmit={handleSubmit} className="space-y-4">
        <div>
          <label className="block text-xs text-lyria-muted mb-1.5">
            Prompt
          </label>
          <textarea
            value={prompt}
            onChange={(e) => setPrompt(e.target.value)}
            placeholder="Dark distorted kickdrum with atmospheric synth pads, 180 BPM..."
            className="w-full h-24 bg-lyria-dark border border-white/10 rounded-md px-3 py-2 text-sm text-white placeholder:text-lyria-muted/50 focus:outline-none focus:border-lyria-accent resize-none"
          />
        </div>

        <div className="flex gap-4">
          <div className="flex-1">
            <label className="block text-xs text-lyria-muted mb-1.5">
              Model
            </label>
            <select
              value={model}
              onChange={(e) => handleModelChange(e.target.value)}
              className="w-full bg-lyria-dark border border-white/10 rounded-md px-3 py-2 text-sm text-white focus:outline-none focus:border-lyria-accent"
            >
              {Object.entries(models).map(([key, info]) => (
                <option key={key} value={key}>
                  {info.name} — {info.description}
                </option>
              ))}
            </select>
          </div>

          <div className="w-28">
            <label className="block text-xs text-lyria-muted mb-1.5">
              Duration ({duration}s)
            </label>
            <input
              type="range"
              min={minDuration}
              max={maxDuration}
              value={duration}
              onChange={(e) => setDuration(Number(e.target.value))}
              className="w-full mt-2 accent-lyria-accent"
            />
          </div>
        </div>

        <div className="flex items-center justify-between text-xs text-lyria-muted">
          <span>{currentModelInfo?.name || 'Clip Preview'}</span>
          <span>{duration}s / {maxDuration}s max</span>
        </div>

        {error && (
          <p className="text-xs text-red-400 break-words">{error}</p>
        )}

        <button
          type="submit"
          disabled={isLoading || !prompt.trim()}
          className="w-full py-2.5 bg-lyria-accent text-white text-sm font-medium rounded-md hover:bg-lyria-accent/90 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
        >
          {isLoading ? 'Generating...' : 'Generate'}
        </button>
      </form>
    </div>
  )
}