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

import { useState, useEffect } from 'react'
import StructuredPromptEditor, { PromptStructure } from './StructuredPromptEditor'
import MaestroButton from './MaestroButton'

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

interface Props {
  onGenerate: () => void
}

type PromptMode = 'basic' | 'advanced'

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>>({})
  const [promptMode, setPromptMode] = useState<PromptMode>('basic')
  const [structuredPrompt, setStructuredPrompt] = useState<PromptStructure>({})


  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)
    }
    // Reset to basic mode when switching to Clip Preview
    if (newModel === 'lyria-3-clip-preview') {
      setPromptMode('basic')
    }
  }

  const currentModelInfo = models[model]
  const maxDuration = currentModelInfo?.max_duration || 30
  const minDuration = 5
  const isPro = model === 'lyria-3-pro-preview'

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    if (promptMode === 'basic' && !prompt.trim()) return
    if (promptMode === 'advanced' && Object.values(structuredPrompt).every(v => !v?.trim())) return

    setIsLoading(true)
    setError('')

    try {
      const body: Record<string, unknown> = {
        prompt: prompt.trim(),
        model,
        duration,
      }

      if (promptMode === 'advanced' && isPro) {
        body.prompt_structure = structuredPrompt
      }

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

      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('')
      setStructuredPrompt({})
      onGenerate()
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Something went wrong')
    } finally {
      setIsLoading(false)
    }
  }

  return (
    <div className="bg-kithara-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">
        {/* Model & Duration */}
        <div className="flex gap-4">
          <div className="flex-1">
            <label className="block text-xs text-kithara-muted mb-1.5">
              Model
            </label>
            <select
              value={model}
              onChange={(e) => handleModelChange(e.target.value)}
              className="w-full bg-kithara-dark border border-white/10 rounded-md px-3 py-2 text-sm text-white focus:outline-none focus:border-kithara-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-kithara-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-kithara-accent"
            />
          </div>
        </div>

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

        {/* Prompt Mode Toggle (Pro only) */}
        {isPro && (
          <div className="flex items-center gap-2 bg-white/5 rounded-lg p-1">
            <button
              type="button"
              onClick={() => setPromptMode('basic')}
              className={`flex-1 py-1.5 text-xs font-medium rounded-md transition-colors ${
                promptMode === 'basic'
                  ? 'bg-kithara-accent text-black'
                  : 'text-kithara-muted hover:text-white'
              }`}
            >
              Basic
            </button>
            <button
              type="button"
              onClick={() => setPromptMode('advanced')}
              className={`flex-1 py-1.5 text-xs font-medium rounded-md transition-colors ${
                promptMode === 'advanced'
                  ? 'bg-kithara-accent text-black'
                  : 'text-kithara-muted hover:text-white'
              }`}
            >
              Advanced
            </button>
          </div>
        )}

        {/* Basic Prompt */}
        {(promptMode === 'basic' || !isPro) && (
          <div>
            <div className="flex items-center justify-between mb-1.5">
              <label className="text-xs text-kithara-muted">Prompt</label>
              <MaestroButton
                prompt={prompt || Object.values(structuredPrompt).filter(Boolean).join(' ')}
                onResult={(_result, _mode) => {
                  setPrompt(_result)
                  setError('')
                }}
                onError={(msg) => setError(msg)}
              />
            </div>
            <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-kithara-dark border border-white/10 rounded-md px-3 py-2 text-sm text-white placeholder:text-kithara-muted/50 focus:outline-none focus:border-kithara-accent resize-none"
            />
          </div>
        )}

        {/* Advanced Prompt */}
        {promptMode === 'advanced' && isPro && (
          <div>
            <div className="flex items-center justify-between mb-1.5">
              <label className="text-xs text-kithara-muted">Structured Prompt</label>
              <MaestroButton
                prompt={Object.values(structuredPrompt).filter(Boolean).join(' ')}
                structured={isPro}
                onResult={(_result, _mode) => {
                  setPrompt(_result)
                  setError('')
                }}
                onStructuredResult={(fields, mode) => {
                  setStructuredPrompt(prev => ({
                    ...prev,
                    ...Object.fromEntries(
                      Object.entries(fields).filter(([_, v]) => v?.trim())
                    ),
                  }))
                  if (mode === 'generate') setError('')
                }}
                onError={(msg) => setError(msg)}
              />
            </div>
            <StructuredPromptEditor
              value={structuredPrompt}
              onChange={setStructuredPrompt}
            />
          </div>
        )}

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

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


    </div>
  )
}