'use client';
import { useState } from 'react';
import PageHeader from '@/components/page-header';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { WandSparkles, Loader2, HeartCrack } from 'lucide-react';
import { type SurpriseDateOutput, suggestSurpriseDate } from '@/ai/flows/date-planner-flow';
import { toast } from '@/hooks/use-toast';
import { Input } from '@/components/ui/input';

const categoryStyles: { [key: string]: string } = {
  Adventurous: 'border-blue-500 text-blue-500',
  Cozy: 'border-yellow-500 text-yellow-500',
  Creative: 'border-purple-500 text-purple-500',
  Foodie: 'border-green-500 text-green-500',
  Relaxing: 'border-teal-500 text-teal-500',
  Default: 'border-gray-500 text-gray-500',
};


const DateIdeaCard = ({ idea }: { idea: SurpriseDateOutput }) => {
    const categoryStyle = categoryStyles[idea.category] || categoryStyles.Default;
    return (
        <Card className="shadow-2xl border bg-card/80 backdrop-blur-sm animate-in fade-in zoom-in-95 duration-500 w-full max-w-2xl text-center">
            <CardHeader>
                <div className="flex justify-center mb-4">
                    <div className={`inline-block px-3 py-1 text-sm font-semibold rounded-full border-2 ${categoryStyle}`}>
                        {idea.category}
                    </div>
                </div>
                <CardTitle className="font-headline text-3xl text-gradient">
                {idea.title}
                </CardTitle>
            </CardHeader>
            <CardContent>
                <p className="font-body text-foreground/80 text-lg">
                {idea.description}
                </p>
            </CardContent>
        </Card>
    )
};

export default function SurpriseDatePlannerPage() {
  const [dateIdea, setDateIdea] = useState<SurpriseDateOutput | null>(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [style, setStyle] = useState('');

  const handleGenerateDate = async () => {
    setLoading(true);
    setError(null);
    setDateIdea(null);
    try {
      const idea = await suggestSurpriseDate({ style });
      setDateIdea(idea);
    } catch (err) {
      console.error(err);
      const errorMessage = err instanceof Error ? err.message : 'An unknown error occurred.';
      setError('No se pudo generar una idea. Por favor, inténtalo de nuevo.');
      toast({
        variant: "destructive",
        title: "Error de IA",
        description: "Hubo un problema al contactar con el servicio de IA. Revisa tu clave de API o inténtalo más tarde.",
      });
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="bg-transparent min-h-screen text-foreground flex flex-col">
      <PageHeader
        title="Planeador de Citas"
        description="¿Sin ideas para vuestra próxima cita? ¡Deja que la magia decida!"
      />
      <main className="container mx-auto px-4 py-8 md:py-10 flex-grow flex flex-col items-center justify-center gap-8">
        <div className="w-full max-w-2xl text-center space-y-4">
            <Input
              type="text"
              value={style}
              onChange={(e) => setStyle(e.target.value)}
              placeholder="Ej: Algo relajante en casa..."
              className="font-body text-lg text-center max-w-xs mx-auto"
              disabled={loading}
            />
            <Button onClick={handleGenerateDate} disabled={loading} size="lg" className="font-body text-lg w-full max-w-xs mx-auto">
            {loading ? (
                <>
                <Loader2 className="mr-2 h-5 w-5 animate-spin" />
                Generando...
                </>
            ) : (
                <>
                <WandSparkles className="mr-2 h-5 w-5" />
                Generar Cita Sorpresa
                </>
            )}
            </Button>
        </div>
        
        {dateIdea && <DateIdeaCard idea={dateIdea} />}
        
        {error && (
             <Card className="shadow-2xl border-destructive bg-destructive/10 backdrop-blur-sm animate-in fade-in zoom-in-95 duration-500 w-full max-w-2xl text-center">
                <CardHeader>
                    <div className="flex justify-center mb-4 text-destructive">
                        <HeartCrack className="w-12 h-12" />
                    </div>
                    <CardTitle className="font-headline text-3xl text-destructive">
                        ¡Ups! Algo salió mal
                    </CardTitle>
                </CardHeader>
                <CardContent>
                    <p className="font-body text-destructive-foreground text-lg">
                    {error}
                    </p>
                </CardContent>
            </Card>
        )}

        {!loading && !dateIdea && !error && (
            <div className="text-center text-muted-foreground font-body">
                <p>Escribe una idea o haz clic en el botón para crear una nueva aventura juntos.</p>
            </div>
        )}

      </main>
    </div>
  );
}