'use client';

import { useState } from 'react';
import { useRouter } from 'next/navigation';
import Image from 'next/image';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Textarea } from '@/components/ui/textarea';
import { Card, CardContent } from "@/components/ui/card";
import { 
  ArrowLeft, 
  Save, 
  X, 
  Plus, 
  Trash2, 
  Camera
} from 'lucide-react';
import { toast } from '@/hooks/use-toast';

export default function NewTripPage() {
  const router = useRouter();
  const [trip, setTrip] = useState({
    title: '',
    date: '',
    description: '',
    mainImage: {
        src: 'https://placehold.co/1200x600.png',
        alt: 'Imagen principal',
        dataAiHint: 'travel placeholder'
    }
  });
  
  const [extraSections, setExtraSections] = useState<{title: string, content: string}[]>([]);

  const handleSave = () => {
    if (!trip.title.trim()) {
      toast({
        variant: "destructive",
        title: "Falta información",
        description: "Por favor, añade al menos un título para el viaje.",
      });
      return;
    }

    toast({
      title: "¡Viaje Creado!",
      description: "Se ha añadido tu nuevo viaje a la colección (Simulado).",
    });
    router.push('/nuestros-viajes');
  };

  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" /> Cancelar
        </Button>
        
        <Button onClick={handleSave} className="bg-green-600 hover:bg-green-700 text-white font-headline px-8 shadow-lg">
          <Save className="mr-2 h-4 w-4" /> Crear Viaje
        </Button>
      </div>

      <header className="py-12 md:py-16 text-center">
        <div className="container mx-auto px-4 max-w-2xl space-y-4">
            <h1 className="font-headline text-2xl font-bold text-primary uppercase tracking-tighter mb-2">Nuevo Viaje</h1>
            <Input 
                value={trip.title} 
                onChange={(e) => setTrip({...trip, title: e.target.value})}
                className="text-3xl font-bold text-center font-headline h-16 border-2 focus-visible:ring-primary"
                placeholder="¿A dónde fuimos?"
            />
            <Input 
                value={trip.date} 
                onChange={(e) => setTrip({...trip, date: e.target.value})}
                className="text-lg text-center font-body h-12 text-muted-foreground border-2"
                placeholder="Fecha (ej: Diciembre 2025)"
            />
        </div>
      </header>

      <main className="container mx-auto px-4">
        <div className="max-w-4xl mx-auto space-y-12">
          
          <div className="relative group">
            <Card className="overflow-hidden shadow-xl border-dashed border-2 border-primary/30 aspect-video flex items-center justify-center bg-muted/30">
                <div className="text-center space-y-4">
                    <div className="bg-primary/10 p-6 rounded-full inline-block">
                        <Camera className="w-12 h-12 text-primary/50" />
                    </div>
                    <p className="font-body text-muted-foreground">La imagen principal se generará automáticamente o podrás subirla pronto.</p>
                </div>
            </Card>
          </div>
          
          <div className="bg-card/40 backdrop-blur-md rounded-3xl p-8 md:p-12 border border-white/20 shadow-lg space-y-4">
            <label className="text-sm font-semibold text-primary font-body uppercase tracking-wider">La Historia de Nuestra Aventura</label>
            <Textarea 
                value={trip.description} 
                onChange={(e) => setTrip({...trip, description: e.target.value})}
                className="min-h-[250px] font-body text-lg leading-relaxed border-2 focus-visible:ring-primary"
                placeholder="Empieza a escribir vuestros recuerdos aquí..."
            />
          </div>

          <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">
                <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 space-y-4">
                    <Input 
                        placeholder="Título de este momento (opcional)" 
                        value={section.title}
                        onChange={(e) => updateSection(index, 'title', e.target.value)}
                        className="font-headline text-xl font-semibold border-2"
                    />
                    <Textarea 
                        placeholder="Cuéntame más sobre esto..." 
                        value={section.content}
                        onChange={(e) => updateSection(index, 'content', e.target.value)}
                        className="min-h-[120px] font-body border-2"
                    />
                </CardContent>
              </Card>
            ))}

            <Button 
                onClick={addSection} 
                variant="outline" 
                className="w-full h-20 border-dashed border-2 hover:border-primary hover:text-primary group text-lg"
            >
                <Plus className="mr-2 h-6 w-6 group-hover:scale-110 transition-transform" /> 
                Añadir Otro Recuerdo o Detalle al Viaje
            </Button>
          </div>
        </div>
      </main>

      <footer className="text-center p-12 text-muted-foreground font-body mt-16">
        <p>Cada viaje es un nuevo capítulo de nuestra vida.</p>
      </footer>
    </div>
  );
}