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

import { useState, useEffect } from 'react'

interface Props {
  isOpen: boolean
  onClose: () => void
  onSelect: (suggestion: string) => void
  userInput: string
}

export default function SuggestionsModal({ isOpen, onClose, onSelect, userInput }: Props) {
  const [suggestions, setSuggestions] = useState<string[]>([])
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState('')

  const fetchSuggestions = async () => {
    if (!userInput.trim()) return
    setLoading(true)
    setError('')
    try {
      const res = await fetch('/api/text-gen/suggest', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ input: userInput }),
      })
      if (!res.ok) {
        const err = await res.json()
        throw new Error(err.detail || 'Failed to get suggestions')
      }
      const data = await res.json()
      setSuggestions(data.suggestions || [])
    } catch (e) {
      setError(e instanceof Error ? e.message : 'Failed to get suggestions')
    } finally {
      setLoading(false)
    }
  }

  // Auto-fetch when opened
  useEffect(() => {
    if (isOpen && suggestions.length === 0 && !loading && !error) {
      fetchSuggestions()
    }
  }, [isOpen])

  if (!isOpen) return null

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center">
      <div
        className="absolute inset-0 bg-black/80 backdrop-blur-md"
        onClick={onClose}
      />

      <div className="relative bg-lyria-surface border border-white/10 rounded-xl shadow-2xl w-full max-w-lg mx-4 overflow-hidden max-h-[80vh] flex flex-col">
        {/* Header */}
        <div className="flex items-center justify-between px-6 py-4 border-b border-white/10 shrink-0">
          <div>
            <h2 className="text-lg font-semibold text-white">Prompt Suggestions</h2>
            <p className="text-xs text-lyria-muted mt-0.5 truncate max-w-[280px]">{userInput}</p>
          </div>
          <button
            onClick={onClose}
            className="text-lyria-muted hover:text-white transition-colors"
          >
            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
            </svg>
          </button>
        </div>

        {/* Content */}
        <div className="px-6 py-5 overflow-y-auto">
          {loading && (
            <div className="flex items-center justify-center py-8">
              <svg className="animate-spin w-6 h-6 text-lyria-accent" fill="none" viewBox="0 0 24 24">
                <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
                <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
              </svg>
            </div>
          )}

          {error && (
            <div className="bg-red-500/10 border border-red-500/20 rounded-lg p-4">
              <p className="text-sm text-red-400">{error}</p>
              <button
                onClick={fetchSuggestions}
                className="mt-2 text-xs text-lyria-accent hover:text-lyria-accent/80"
              >
                Try again
              </button>
            </div>
          )}

          {!loading && !error && suggestions.length === 0 && (
            <div className="text-center py-8">
              <p className="text-sm text-lyria-muted">No suggestions yet. Click below to generate.</p>
              <button
                onClick={fetchSuggestions}
                className="mt-3 px-4 py-2 text-sm bg-lyria-accent text-black rounded-md hover:bg-lyria-accent/90"
              >
                Get Suggestions
              </button>
            </div>
          )}

          <div className="space-y-3">
            {suggestions.map((suggestion, i) => (
              <button
                key={i}
                onClick={() => {
                  onSelect(suggestion)
                  onClose()
                }}
                className="w-full text-left p-4 bg-white/5 hover:bg-white/10 border border-white/5 hover:border-lyria-accent/30 rounded-lg transition-all group"
              >
                <div className="flex items-start gap-3">
                  <span className="text-lyria-accent font-mono text-sm shrink-0">{i + 1}.</span>
                  <p className="text-sm text-white/90 leading-relaxed">{suggestion}</p>
                </div>
                <div className="mt-2 text-xs text-lyria-accent opacity-0 group-hover:opacity-100 transition-opacity">
                  Click to use this prompt →
                </div>
              </button>
            ))}
          </div>
        </div>
      </div>
    </div>
  )
}