'use client';

import { useState, use } from 'react';
import { useRouter } from 'next/navigation';
import Link from 'next/link';
import { ArrowLeft, Sparkles } from 'lucide-react';
import { Button } from '@/components/ui/Button';
import { Card, CardContent, CardHeader, CardFooter } from '@/components/ui/Card';
import { Input, Textarea } from '@/components/ui/Input';

export default function NewCapituloPage({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = use(params);
  const router = useRouter();
  
  const [numero, setNumero] = useState(1);
  const [titulo, setTitulo] = useState('');
  const [virtudSugerida, setVirtudSugerida] = useState('');
  const [creating, setCreating] = useState(false);

  const handleCreate = async () => {
    setCreating(true);
    try {
      const res = await fetch(`/api/projects/${slug}/capitulos`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ numero, titulo, virtudSugerida }),
      });
      
      if (res.ok) {
        router.push(`/project/${slug}/capitulo/${numero}`);
      }
    } catch (error) {
      console.error('Error creating chapter:', error);
    } finally {
      setCreating(false);
    }
  };

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100">
      <header className="bg-white border-b border-gray-200">
        <div className="max-w-3xl mx-auto px-4 py-4">
          <div className="flex items-center gap-4">
            <Link href={`/project/${slug}`} className="text-gray-500 hover:text-gray-700">
              <ArrowLeft className="w-5 h-5" />
            </Link>
            <h1 className="text-xl font-bold text-gray-900">Nuevo Capítulo</h1>
          </div>
        </div>
      </header>

      <main className="max-w-3xl mx-auto px-4 py-8">
        <Card>
          <CardHeader>
            <h2 className="text-lg font-semibold">Crear nuevo capítulo</h2>
            <p className="text-sm text-gray-500">
              Define los datos básicos y la IA generará el guión conductor.
            </p>
          </CardHeader>
          
          <CardContent className="space-y-6">
            <div className="grid grid-cols-2 gap-4">
              <Input
                label="Número de capítulo"
                type="number"
                min={1}
                value={numero}
                onChange={(e) => setNumero(parseInt(e.target.value) || 1)}
              />
              <Input
                label="Título (opcional)"
                value={titulo}
                onChange={(e) => setTitulo(e.target.value)}
                placeholder="Se generará si lo dejas vacío"
              />
            </div>

            <Textarea
              label="Virtud sugerida (opcional)"
              value={virtudSugerida}
              onChange={(e) => setVirtudSugerida(e.target.value)}
              placeholder="Ej: Paciencia, Valentía, Generosidad..."
              rows={2}
            />

            <div className="bg-blue-50 border border-blue-100 rounded-lg p-4">
              <div className="flex items-start gap-3">
                <Sparkles className="w-5 h-5 text-blue-600 mt-0.5" />
                <div>
                  <h4 className="font-medium text-blue-900">Generación con IA</h4>
                  <p className="text-sm text-blue-700 mt-1">
                    Al crear el capítulo, la IA generará automáticamente el guión conductor
                    basándose en la Idea Motriz y los personajes de tu serie.
                  </p>
                </div>
              </div>
            </div>
          </CardContent>

          <CardFooter className="flex justify-end gap-3">
            <Link href={`/project/${slug}`}>
              <Button variant="outline">Cancelar</Button>
            </Link>
            <Button onClick={handleCreate} loading={creating}>
              <Sparkles className="w-4 h-4 mr-2" />
              Crear y generar guión
            </Button>
          </CardFooter>
        </Card>
      </main>
    </div>
  );
}
