'use client';

import { useState, useEffect, useMemo, use } from 'react';
import { recipes as initialRecipes, Recipe } from '@/lib/data';
import { notFound, useRouter } from 'next/navigation';
import Image from 'next/image';
import PageHeader from '@/components/page-header';
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Textarea } from '@/components/ui/textarea';
import { 
  ChefHat, 
  Award, 
  ClipboardList, 
  CakeSlice, 
  Combine, 
  Layers, 
  ArrowLeft, 
  Pencil, 
  Save, 
  X,
  Plus,
  Star
} from 'lucide-react';
import { toast } from '@/hooks/use-toast';
import { ReactElement } from 'react';

const ICONS: Record<string, ReactElement> = {
    bizcochuelo: <CakeSlice className="w-5 h-5 mr-2" />,
    crema: <Combine className="w-5 h-5 mr-2" />,
    torta: <Layers className="w-5 h-5 mr-2" />,
    empezar: <ClipboardList className="w-5 h-5 mr-2" />,
};

const EditableStarRating = ({ rating, label, onChange, isEditing }: { rating: number; label: string; onChange: (r: number) => void; isEditing: boolean }) => (
  <div className="flex flex-col items-center p-4 bg-card/40 backdrop-blur-sm rounded-2xl border border-white/20 shadow-sm">
    <p className="text-xs uppercase font-bold text-primary mb-2 tracking-widest">{label}</p>
    <div className="flex gap-1">
      {[...Array(5)].map((_, i) => (
        <button
          key={i}
          disabled={!isEditing}
          onClick={() => onChange(i + 1)}
          className={`transition-all ${isEditing ? 'hover:scale-125 cursor-pointer' : 'cursor-default'}`}
        >
          <Star
            className={`w-6 h-6 ${i < rating ? 'text-yellow-400 fill-yellow-400' : 'text-muted/30'}`}
          />
        </button>
      ))}
    </div>
  </div>
);

export default function RecipeDetailPage({ params }: { params: Promise<{ slug: string }> }) {
  const router = useRouter();
  const resolvedParams = use(params);
  const slug = resolvedParams.slug;
  
  const [recipe, setRecipe] = useState<Recipe | null>(null);
  const [isEditing, setIsEditing] = useState(false);
  const [editedRecipe, setEditedRecipe] = useState<any>(null);

  useEffect(() => {
    const foundRecipe = initialRecipes.find((r) => r.slug === slug);
    if (foundRecipe) {
      setRecipe(foundRecipe);
      setEditedRecipe({ 
        ...foundRecipe,
        ingredientsText: foundRecipe.ingredients.join('\n'),
        instructionsText: foundRecipe.instructions.join('\n')
      });
    }
  }, [slug]);

  const instructionSections = useMemo(() => {
    const sections: { title: string; steps: string[], icon: ReactElement }[] = [];
    if (recipe?.instructions) {
      let currentSection: { title: string; steps: string[], icon: ReactElement } | null = null;
      for (const line of recipe.instructions) {
        if (line.endsWith(':')) {
          if (currentSection) sections.push(currentSection);
          const title = line.slice(0, -1);
          const iconKey = title.split(' ').pop()?.toLowerCase() ?? '';
          currentSection = {
            title: title.charAt(0).toUpperCase() + title.slice(1),
            steps: [],
            icon: ICONS[iconKey] || <ClipboardList className="w-5 h-5 mr-2" />,
          };
        } else if (currentSection) {
          currentSection.steps.push(line);
        }
      }
      if (currentSection) sections.push(currentSection);
    }
    return sections;
  }, [recipe]);

  if (!recipe && !editedRecipe) {
    return <div className="min-h-screen flex items-center justify-center font-body text-muted-foreground">Cargando receta...</div>;
  }

  const handleSave = () => {
    const updatedRecipe = {
      ...editedRecipe,
      ingredients: editedRecipe.ingredientsText.split('\n').filter((l: string) => l.trim() !== ''),
      instructions: editedRecipe.instructionsText.split('\n').filter((l: string) => l.trim() !== '')
    };
    setRecipe(updatedRecipe);
    setIsEditing(false);
    toast({
      title: "¡Receta guardada!",
      description: "Los cambios se han aplicado correctamente.",
    });
  };

  const handleCancel = () => {
    setEditedRecipe({ 
      ...recipe,
      ingredientsText: recipe?.ingredients.join('\n'),
      instructionsText: recipe?.instructions.join('\n')
    });
    setIsEditing(false);
  };

  return (
    <div className="bg-background min-h-screen text-foreground pb-20">
      <div className="container mx-auto px-4 pt-8 flex justify-between items-center">
        <Button 
          variant="ghost" 
          onClick={() => router.push('/recetas')}
          className="font-body hover:bg-primary/10"
        >
          <ArrowLeft className="mr-2 h-4 w-4" /> Volver a recetas
        </Button>
        
        {!isEditing ? (
          <Button 
            onClick={() => setIsEditing(true)} 
            variant="outline"
            className="border-primary text-primary hover:bg-primary hover:text-white"
          >
            <Pencil className="mr-2 h-4 w-4" /> Editar Receta
          </Button>
        ) : (
          <div className="flex gap-2">
            <Button onClick={handleCancel} variant="ghost" className="text-muted-foreground">
              <X className="mr-2 h-4 w-4" /> Cancelar
            </Button>
            <Button onClick={handleSave} className="bg-green-600 hover:bg-green-700 text-white">
              <Save className="mr-2 h-4 w-4" /> Guardar Todo
            </Button>
          </div>
        )}
      </div>

      <header className="py-12 md:py-16 text-center">
        <div className="container mx-auto px-4">
          {isEditing ? (
            <div className="max-w-2xl mx-auto space-y-4">
              <Input 
                value={editedRecipe.title} 
                onChange={(e) => setEditedRecipe({...editedRecipe, title: e.target.value})}
                className="text-3xl font-bold text-center font-headline h-14"
                placeholder="Nombre de la receta"
              />
              <Input 
                value={editedRecipe.category} 
                onChange={(e) => setEditedRecipe({...editedRecipe, category: e.target.value})}
                className="text-lg text-center font-body h-10 text-muted-foreground"
                placeholder="Categoría (ej: Postre, Almuerzo)"
              />
            </div>
          ) : (
            <>
              <h1 className="font-headline text-4xl md:text-6xl font-bold text-gradient mb-4">
                {recipe!.title}
              </h1>
              <div className="flex justify-center items-center gap-4 text-foreground/70">
                 <ChefHat className="w-5 h-5" />
                 <span className="font-body text-lg">{recipe!.category}</span>
              </div>
            </>
          )}
        </div>
      </header>

      <main className="container mx-auto px-4">
        <div className="max-w-4xl mx-auto space-y-12">
            <Card className="overflow-hidden shadow-xl border-0 bg-card/80 backdrop-blur-sm">
                <div className="relative aspect-video w-full">
                    <Image
                        src={recipe!.image.src}
                        alt={recipe!.image.alt}
                        fill
                        className="object-cover"
                        data-ai-hint={recipe!.image.dataAiHint}
                    />
                </div>
            </Card>

            <div className="grid md:grid-cols-2 gap-8 max-w-2xl mx-auto">
                <EditableStarRating 
                  rating={isEditing ? editedRecipe.ratingAnna : recipe!.ratingAnna} 
                  label="Rating de Anna" 
                  isEditing={isEditing}
                  onChange={(r) => setEditedRecipe({...editedRecipe, ratingAnna: r})}
                />
                <EditableStarRating 
                  rating={isEditing ? editedRecipe.ratingAdri : recipe!.ratingAdri} 
                  label="Rating de Adri" 
                  isEditing={isEditing}
                  onChange={(r) => setEditedRecipe({...editedRecipe, ratingAdri: r})}
                />
            </div>

            {recipe!.memory && !isEditing && (
              <div className="bg-primary/10 backdrop-blur-md rounded-2xl p-6 border border-primary/20 shadow-sm text-center">
                  <div className="flex justify-center items-center gap-2 text-primary">
                      <Award className="w-6 h-6" />
                      <span className="font-headline font-bold text-xl">{recipe!.memory}</span>
                  </div>
              </div>
            )}

            {isEditing && (
              <Card className="shadow-lg border-dashed border-2 border-primary/20">
                <CardContent className="pt-6 space-y-4">
                  <label className="text-sm font-semibold text-primary font-body uppercase tracking-wider block">Fecha o Recuerdo Especial</label>
                  <Input 
                      value={editedRecipe.memory || ''} 
                      onChange={(e) => setEditedRecipe({...editedRecipe, memory: e.target.value})}
                      className="font-body"
                      placeholder="Ej: Nuestra primera cena en casa..."
                  />
                </CardContent>
              </Card>
            )}

            <div className="grid md:grid-cols-3 gap-8">
                <div className="md:col-span-1">
                    <Card className="shadow-lg border-0 bg-card/80 backdrop-blur-sm sticky top-24">
                        <CardHeader>
                            <div className="flex items-center text-primary mb-1">
                                <ChefHat className="w-5 h-5 mr-2" />
                                <CardTitle className="font-headline text-xl">Ingredientes</CardTitle>
                            </div>
                        </CardHeader>
                        <CardContent>
                            {isEditing ? (
                                <Textarea 
                                    value={editedRecipe.ingredientsText}
                                    onChange={(e) => setEditedRecipe({...editedRecipe, ingredientsText: e.target.value})}
                                    className="min-h-[300px] font-body text-sm"
                                    placeholder="Un ingrediente por línea. Usa 'Título:' para secciones."
                                />
                            ) : (
                                <ul className="space-y-3 font-body text-foreground/80">
                                    {recipe!.ingredients.map((ingredient, index) => {
                                        if (ingredient.endsWith(':')) {
                                            return (
                                                <li key={index} className="pt-3 first:pt-0">
                                                    <h4 className="font-headline text-lg text-primary">{ingredient.slice(0, -1)}</h4>
                                                </li>
                                            );
                                        }
                                        return (
                                            <li key={index} className="flex items-center gap-3 pl-2">
                                                <span className="h-1.5 w-1.5 bg-primary rounded-full"></span>
                                                <span>{ingredient}</span>
                                            </li>
                                        );
                                    })}
                                </ul>
                            )}
                        </CardContent>
                    </Card>
                </div>

                <div className="md:col-span-2 space-y-8">
                    {isEditing ? (
                         <Card className="shadow-lg border-0 bg-card/80 backdrop-blur-sm">
                            <CardHeader>
                                <div className="flex items-center text-primary mb-1">
                                    <ClipboardList className="w-5 h-5 mr-2" />
                                    <CardTitle className="font-headline text-xl">Instrucciones</CardTitle>
                                </div>
                            </CardHeader>
                            <CardContent>
                                <Textarea 
                                    value={editedRecipe.instructionsText}
                                    onChange={(e) => setEditedRecipe({...editedRecipe, instructionsText: e.target.value})}
                                    className="min-h-[500px] font-body text-sm leading-relaxed"
                                    placeholder="Un paso por línea. Usa 'Título:' para separar fases (ej: 'Preparación:')."
                                />
                            </CardContent>
                        </Card>
                    ) : (
                        instructionSections.map((section, index) => (
                            <Card key={index} className="shadow-lg border-0 bg-card/80 backdrop-blur-sm">
                                <CardHeader>
                                    <div className="flex items-center text-primary mb-1">
                                        {section.icon}
                                        <CardTitle className="font-headline text-xl">{section.title}</CardTitle>
                                    </div>
                                </CardHeader>
                                <CardContent>
                                    <ol className="space-y-4 font-body text-foreground/80">
                                        {section.steps.map((step, stepIndex) => (
                                            <li key={stepIndex} className="flex items-start gap-3">
                                                <span className="text-primary font-bold text-lg leading-tight">
                                                    {step.match(/^\d+/)?.[0] || (stepIndex + 1)}.
                                                </span>
                                                <span className="flex-1">{step.replace(/^\d+\.\s*/, '')}</span>
                                            </li>
                                        ))}
                                    </ol>
                                </CardContent>
                            </Card>
                        ))
                    )}
                </div>
            </div>
        </div>
      </main>

      <footer className="text-center p-12 text-muted-foreground font-body mt-16">
        <p>Cocinando con amor, la mejor receta.</p>
      </footer>
    </div>
  );
}