'use client';

import { useState, useEffect, use } from 'react';
import { trips as initialTrips, Trip, TripPhoto } from '@/lib/data';
import { notFound, useRouter } from 'next/navigation';
import Image from 'next/image';
import PageHeader from '@/components/page-header';
import { Card, CardContent } from "@/components/ui/card";
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Textarea } from '@/components/ui/textarea';
import { 
  Carousel, 
  CarouselContent, 
  CarouselItem, 
  CarouselNext, 
  CarouselPrevious 
} from "@/components/ui/carousel";
import { 
  ArrowLeft, 
  Pencil, 
  Save, 
  X, 
  Plus, 
  Trash2, 
  CheckCircle2 
} from 'lucide-react';
import { toast } from '@/hooks/use-toast';

export default function TripDetailPage({ params }: { params: Promise<{ slug: string }> }) {
  const router = useRouter();
  const resolvedParams = use(params);
  const slug = resolvedParams.slug;

  const [trip, setTrip] = useState<Trip | null>(null);
  const [isEditing, setIsEditing] = useState(false);
  const [editedTrip, setEditedTrip] = useState<any>(null);
  const [extraSections, setExtraSections] = useState<{title: string, content: string}[]>([]);

  useEffect(() => {
    const foundTrip = initialTrips.find((t) => t.slug === slug);
    if (foundTrip) {
      setTrip(foundTrip);
      setEditedTrip({ ...foundTrip });
    }
  }, [slug]);

  const displayPhotos: TripPhoto[] = trip ? [trip.mainImage, ...trip.photos.slice(0, 2)] : [];

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

  const handleSave = () => {
    setTrip({ ...editedTrip });
    setIsEditing(false);
    toast({
      title: "¡Cambios guardados!",
      description: "La información del viaje se ha actualizado correctamente en esta sesión.",
    });
  };

  const handleCancel = () => {
    setEditedTrip({ ...trip });
    setIsEditing(false);
  };

  const addSection = () => {
    setExtraSections([...extraSections, { title: '', content: '' }]);
  };

  const removeSection = (index: number) => {
    setExtraSections(extraSections.filter((_, i) => i !== index));
  };

  const updateSection = (index: number, field: 'title' | 'content', value: string) => {
    const newSections = [...extraSections];
    newSections[index][field] = value;
    setExtraSections(newSections);
  };

  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('/nuestros-viajes')}
          className="font-body hover:bg-primary/10"
        >
          <ArrowLeft className="mr-2 h-4 w-4" /> Volver a viajes
        </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 Viaje
          </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={editedTrip.title} 
                onChange={(e) => setEditedTrip({...editedTrip, title: e.target.value})}
                className="text-3xl font-bold text-center font-headline h-14"
                placeholder="Título del viaje"
              />
              <Input 
                value={editedTrip.date} 
                onChange={(e) => setEditedTrip({...editedTrip, date: e.target.value})}
                className="text-lg text-center font-body h-10 text-muted-foreground"
                placeholder="Fecha (ej: Enero 2025)"
              />
            </div>
          ) : (
            <>
              <h1 className="font-headline text-4xl md:text-6xl font-bold text-gradient mb-4">
                {trip!.title}
              </h1>
              <p className="font-body text-lg md:text-xl text-foreground/70">
                {trip!.date}
              </p>
            </>
          )}
        </div>
      </header>

      <main className="container mx-auto px-4">
        <div className="max-w-4xl mx-auto space-y-12">
          
          <div className="relative">
            <Carousel className="w-full" opts={{ loop: true }}>
              <CarouselContent>
                {displayPhotos.map((photo, index) => (
                  <CarouselItem key={index}>
                    <Card className="overflow-hidden shadow-xl border-0 bg-card/80 backdrop-blur-sm">
                      <div className="relative aspect-video w-full">
                        <Image
                          src={photo.src}
                          alt={photo.alt}
                          fill
                          className="object-cover"
                          data-ai-hint={photo.dataAiHint}
                        />
                      </div>
                    </Card>
                  </CarouselItem>
                ))}
              </CarouselContent>
              <CarouselPrevious className="hidden md:flex -left-12" />
              <CarouselNext className="hidden md:flex -right-12" />
            </Carousel>
          </div>
          
          <div className="bg-card/40 backdrop-blur-md rounded-3xl p-8 md:p-12 border border-white/20 shadow-lg">
            {isEditing ? (
              <div className="space-y-4">
                <label className="text-sm font-semibold text-primary font-body uppercase tracking-wider">Descripción Principal</label>
                <Textarea 
                  value={editedTrip.description} 
                  onChange={(e) => setEditedTrip({...editedTrip, description: e.target.value})}
                  className="min-h-[200px] font-body text-lg leading-relaxed"
                  placeholder="Escribe la historia de este viaje..."
                />
              </div>
            ) : (
              <article className="prose prose-lg max-w-none font-body text-foreground/90 leading-relaxed italic">
                <p>{trip!.description}</p>
              </article>
            )}
          </div>

          {/* Extra Sections */}
          <div className="space-y-8">
            {extraSections.map((section, index) => (
              <Card key={index} className="bg-card/60 backdrop-blur-sm border-dashed border-2 border-primary/20 relative overflow-hidden">
                {isEditing && (
                  <Button 
                    variant="ghost" 
                    size="icon" 
                    className="absolute top-2 right-2 text-destructive hover:bg-destructive/10"
                    onClick={() => removeSection(index)}
                  >
                    <Trash2 className="h-4 w-4" />
                  </Button>
                )}
                <CardContent className="pt-8">
                  {isEditing ? (
                    <div className="space-y-4">
                      <Input 
                        placeholder="Título de la sección (opcional)" 
                        value={section.title}
                        onChange={(e) => updateSection(index, 'title', e.target.value)}
                        className="font-headline text-xl font-semibold"
                      />
                      <Textarea 
                        placeholder="Contenido de la sección..." 
                        value={section.content}
                        onChange={(e) => updateSection(index, 'content', e.target.value)}
                        className="min-h-[100px] font-body"
                      />
                    </div>
                  ) : (
                    <div className="space-y-4">
                      {section.title && <h3 className="font-headline text-2xl font-bold text-primary">{section.title}</h3>}
                      <p className="font-body text-lg text-foreground/80 leading-relaxed">{section.content}</p>
                    </div>
                  )}
                </CardContent>
              </Card>
            ))}

            {isEditing && (
              <Button 
                onClick={addSection} 
                variant="outline" 
                className="w-full h-16 border-dashed border-2 hover:border-primary hover:text-primary group"
              >
                <Plus className="mr-2 h-5 w-5 group-hover:scale-110 transition-transform" /> 
                Añadir Nueva Sección de Texto
              </Button>
            )}
          </div>
        </div>
      </main>

      <footer className="text-center p-12 text-muted-foreground font-body mt-16">
        <div className="flex justify-center items-center gap-2 mb-2">
          <CheckCircle2 className="w-4 h-4 text-primary" />
          <span>Vuestros recuerdos están a salvo.</span>
        </div>
        <p>Juntos, el mejor destino.</p>
      </footer>
    </div>
  );
}