vynl/frontend/src/pages/Analyze.tsx

import { useState, useEffect } from 'react'
import { Lightbulb, Loader2, Sparkles } from 'lucide-react'
import { analyzeSong, type AnalyzeResponse } from '../lib/api'
import RecommendationCard from '../components/RecommendationCard'
import { toggleSaveRecommendation, dislikeRecommendation } from '../lib/api'

export default function Analyze() {
  const [artist, setArtist] = useState('')
  const [title, setTitle] = useState('')
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState('')
  const [result, setResult] = useState<AnalyzeResponse | null>(() => {
    try {
      const saved = sessionStorage.getItem('vynl_analyze_results')
      return saved ? JSON.parse(saved) : null
    } catch { return null }
  })
  const [savingIds, setSavingIds] = useState<Set<string>>(new Set())
  const [dislikingIds, setDislikingIds] = useState<Set<string>>(new Set())

  useEffect(() => {
    if (result) {
      sessionStorage.setItem('vynl_analyze_results', JSON.stringify(result))
    }
  }, [result])

  const handleAnalyze = async () => {
    if (!artist.trim() || !title.trim()) return
    setLoading(true)
    setError('')
    setResult(null)

    try {
      const data = await analyzeSong(artist.trim(), title.trim())
      setResult(data)
    } catch (err: any) {
      const msg = err.response?.data?.detail || err.message || 'Unknown error'
      setError(`Error: ${msg}`)
    } finally {
      setLoading(false)
    }
  }

  const handleToggleSave = async (id: string) => {
    const sid = String(id)
    setSavingIds((prev) => new Set(prev).add(sid))
    try {
      const { saved } = await toggleSaveRecommendation(sid)
      setResult((prev) =>
        prev
          ? {
              ...prev,
              recommendations: prev.recommendations.map((r) =>
                String(r.id) === sid ? { ...r, saved } : r
              ),
            }
          : prev
      )
    } catch {
      // silent
    } finally {
      setSavingIds((prev) => {
        const next = new Set(prev)
        next.delete(sid)
        return next
      })
    }
  }

  const handleDislike = async (id: string) => {
    const sid = String(id)
    setDislikingIds((prev) => new Set(prev).add(sid))
    try {
      const { disliked } = await dislikeRecommendation(sid)
      setResult((prev) =>
        prev
          ? {
              ...prev,
              recommendations: prev.recommendations.map((r) =>
                String(r.id) === sid ? { ...r, disliked } : r
              ),
            }
          : prev
      )
    } catch {
      // silent
    } finally {
      setDislikingIds((prev) => {
        const next = new Set(prev)
        next.delete(sid)
        return next
      })
    }
  }

  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-2xl sm:text-3xl font-bold text-charcoal flex items-center gap-3">
          <Lightbulb className="w-8 h-8 text-purple" />
          Why Do I Like This?
        </h1>
        <p className="text-charcoal-muted mt-1">
          Paste a song and discover what draws you to it, plus find similar music
        </p>
      </div>

      {/* Input Form */}
      <div className="bg-white rounded-2xl border border-purple-100 p-4 sm:p-6 space-y-4">
        <div>
          <label className="block text-sm font-medium text-charcoal mb-2">
            Artist
          </label>
          <input
            type="text"
            value={artist}
            onChange={(e) => setArtist(e.target.value)}
            placeholder="e.g., Radiohead"
            className="w-full px-4 py-3 bg-cream/50 border border-purple-100 rounded-xl text-charcoal placeholder:text-charcoal-muted/40 focus:outline-none focus:ring-2 focus:ring-purple/30 focus:border-purple transition-colors text-sm"
          />
        </div>

        <div>
          <label className="block text-sm font-medium text-charcoal mb-2">
            Song Title
          </label>
          <input
            type="text"
            value={title}
            onChange={(e) => setTitle(e.target.value)}
            placeholder="e.g., Everything In Its Right Place"
            className="w-full px-4 py-3 bg-cream/50 border border-purple-100 rounded-xl text-charcoal placeholder:text-charcoal-muted/40 focus:outline-none focus:ring-2 focus:ring-purple/30 focus:border-purple transition-colors text-sm"
          />
        </div>

        {error && (
          <div className="p-3 bg-red-50 border border-red-200 rounded-lg text-sm text-red-600">
            {error}
          </div>
        )}

        <button
          onClick={handleAnalyze}
          disabled={loading || !artist.trim() || !title.trim()}
          className="w-full py-3.5 bg-gradient-to-r from-purple to-purple-dark text-white font-semibold rounded-xl hover:shadow-lg hover:shadow-purple/25 transition-all disabled:opacity-50 cursor-pointer border-none text-sm flex items-center justify-center gap-2"
        >
          {loading ? (
            <>
              <Loader2 className="w-5 h-5 animate-spin" />
              Analyzing...
            </>
          ) : (
            <>
              <Sparkles className="w-5 h-5" />
              Analyze
            </>
          )}
        </button>
      </div>

      {/* Results */}
      {result && (
        <div className="space-y-6">
          {/* Analysis Card */}
          <div className="bg-gradient-to-br from-purple-50 to-cream rounded-2xl border border-purple-200 p-5 sm:p-6">
            <h2 className="text-lg font-semibold text-charcoal mb-3 flex items-center gap-2">
              <Lightbulb className="w-5 h-5 text-purple" />
              Why You Love This
            </h2>
            <p className="text-charcoal leading-relaxed">{result.analysis}</p>
          </div>

          {/* Qualities */}
          {result.qualities.length > 0 && (
            <div>
              <h2 className="text-lg font-semibold text-charcoal mb-3">
                Key Qualities
              </h2>
              <div className="flex flex-wrap gap-2">
                {result.qualities.map((quality, i) => (
                  <span
                    key={i}
                    className="inline-flex items-center px-3 py-1.5 rounded-full text-sm font-medium bg-purple-100 text-purple-700"
                  >
                    {quality}
                  </span>
                ))}
              </div>
            </div>
          )}

          {/* Similar Recommendations */}
          {result.recommendations.length > 0 && (
            <div>
              <h2 className="text-lg font-semibold text-charcoal mb-4">
                Songs With the Same Qualities
              </h2>
              <div className="space-y-3">
                {result.recommendations.map((rec) => (
                  <RecommendationCard
                    key={rec.id}
                    recommendation={rec}
                    onToggleSave={handleToggleSave}
                    onDislike={handleDislike}
                    saving={savingIds.has(String(rec.id))}
                    disliking={dislikingIds.has(String(rec.id))}
                  />
                ))}
              </div>
            </div>
          )}
        </div>
      )}
    </div>
  )
}