'use client';

import { useState, use } from 'react';
import Link from 'next/link';
import { ArrowLeft, Sparkles, Users, Film, ChevronRight, Plus, RefreshCw } from 'lucide-react';
import { Button } from '@/components/ui/Button';
import { Card, CardContent, CardHeader } from '@/components/ui/Card';
import { Textarea } from '@/components/ui/Input';
import { Toast } from '@/components/ui/Toast';
import { WizardStepper } from '@/components/wizard/WizardStepper';
import { GenerationPanel } from '@/components/wizard/GenerationPanel';
import { IdeaMotrizView } from '@/components/project/IdeaMotrizView';
import { IdeaMotrizEditor } from '@/components/project/IdeaMotrizEditor';
import { PersonajesView } from '@/components/project/PersonajesView';
import { PersonajeEditor } from '@/components/project/PersonajeEditor';
import { CharacterAssetsPanel } from '@/components/project/CharacterAssetsPanel';
import { useProjectData } from '@/hooks/useProjectData';
import type { Personaje } from '@/types/project';

const WIZARD_STEPS = [
  { id: 'idea_motriz', name: 'Idea Motriz', description: 'Concepto y estructura' },
  { id: 'personajes', name: 'Personajes', description: 'Protagonistas y antagonista' },
  { id: 'capitulos', name: 'Capítulos', description: 'Guiones y escaletas' },
];

export default function ProjectPage({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = use(params);

  const {
    project,
    ideaMotriz,
    personajes,
    capitulos,
    currentStep,
    loading,
    generating,
    setIdeaMotriz,
    changeStep,
    canAdvance,
    handleGenerateIdeaMotriz,
    handleRefineIdeaMotriz,
    handleSaveIdeaMotriz,
    handleGeneratePersonajes,
    handleSavePersonajes,
    handleMejorarPersonajes,
    handleAddPersonaje,
    handleUpdatePersonaje,
    handleDeletePersonaje,
    toast,
    clearToast,
  } = useProjectData(slug);

  const [personajeFeedback, setPersonajeFeedback] = useState('');
  const [showAddPersonaje, setShowAddPersonaje] = useState(false);
  const [nuevoPersonaje, setNuevoPersonaje] = useState({
    nombre: '',
    tipo: 'aliado' as 'protagonista' | 'aliado' | 'antagonista',
    especie: '',
    aparienciaFisica: '',
    descripcion: ''
  });
  const [editingPersonaje, setEditingPersonaje] = useState<Personaje | null>(null);
  const [assetsPersonaje, setAssetsPersonaje] = useState<Personaje | null>(null);
  const [editingIdeaMotriz, setEditingIdeaMotriz] = useState(false);

  const onMejorarPersonajes = async () => {
    await handleMejorarPersonajes(personajeFeedback);
    setPersonajeFeedback('');
  };

  const onAddPersonaje = async () => {
    const result = await handleAddPersonaje(nuevoPersonaje);
    if (result) {
      setNuevoPersonaje({ nombre: '', tipo: 'aliado', especie: '', aparienciaFisica: '', descripcion: '' });
      setShowAddPersonaje(false);
    }
  };

  if (loading) {
    return (
      <div className="min-h-screen flex items-center justify-center bg-[var(--background)]">
        <div className="animate-spin w-5 h-5 border-2 border-indigo-600 border-t-transparent rounded-full" />
      </div>
    );
  }

  if (!project) {
    return (
      <div className="min-h-screen flex items-center justify-center">
        <Card className="p-8 text-center">
          <h2 className="text-xl font-semibold mb-4">Proyecto no encontrado</h2>
          <Link href="/">
            <Button>Volver al inicio</Button>
          </Link>
        </Card>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-[var(--background)]">
      {toast && <Toast message={toast.message} type={toast.type} onClose={clearToast} />}

      <header className="border-b border-stone-200/60 bg-white/80 backdrop-blur-sm sticky top-0 z-10">
        <div className="max-w-5xl mx-auto px-6 py-3 flex items-center gap-4">
          <Link href="/" className="p-1 -ml-1 text-stone-400 hover:text-stone-600 transition-colors">
            <ArrowLeft className="w-4 h-4" />
          </Link>
          <div className="min-w-0">
            <h1 className="text-sm font-semibold text-stone-900 truncate">{project.name}</h1>
          </div>
        </div>
      </header>

      <main className="max-w-5xl mx-auto px-6 py-8">
        <WizardStepper
          steps={WIZARD_STEPS}
          currentStep={currentStep}
          onStepClick={(index) => {
            if (index <= currentStep || (index === currentStep + 1 && canAdvance())) {
              changeStep(index);
            }
          }}
        />

        <div className="mt-8">
          {/* Step 0: Idea Motriz */}
          {currentStep === 0 && (
            <GenerationPanel
              title="Idea Motriz"
              description="Define el concepto central, formato, narrativa y estructura de tu serie animada."
              placeholder="Describe tu idea para la serie. Por ejemplo: Una serie sobre dos gatitos que coleccionan virtudes para sanar el mundo. Sin diálogos, solo expresiones y sonidos. Cada capítulo ganan una virtud nueva..."
              currentData={ideaMotriz}
              onGenerate={handleGenerateIdeaMotriz}
              onRefine={handleRefineIdeaMotriz}
              onSave={handleSaveIdeaMotriz}
              isLoading={generating}
            >
              {ideaMotriz && (
                <>
                  <div className="flex justify-end mb-4">
                    <Button variant="outline" onClick={() => setEditingIdeaMotriz(true)}>
                      Editar campos
                    </Button>
                  </div>
                  <IdeaMotrizView data={ideaMotriz} />
                  {editingIdeaMotriz && (
                    <IdeaMotrizEditor
                      ideaMotriz={ideaMotriz}
                      onSave={(updated) => setIdeaMotriz(updated)}
                      onClose={() => setEditingIdeaMotriz(false)}
                    />
                  )}
                </>
              )}
            </GenerationPanel>
          )}

          {/* Step 1: Personajes */}
          {currentStep === 1 && (
            <div className="space-y-6">
              <div>
                <h2 className="text-xl font-semibold text-stone-900">Personajes</h2>
                <p className="mt-1 text-stone-500 text-sm">
                  Define los personajes principales, sus roles y mecánicas.
                </p>
              </div>

              {personajes.length === 0 ? (
                <div className="text-center py-16">
                  <p className="text-stone-400 text-sm mb-5">
                    Basado en la Idea Motriz, la IA generará los personajes.
                  </p>
                  <Button onClick={handleGeneratePersonajes} loading={generating}>
                    <Sparkles className="w-4 h-4" />
                    Generar personajes
                  </Button>
                </div>
              ) : (
                <>
                  <div className="flex justify-between">
                    <Button variant="outline" size="sm" onClick={() => setShowAddPersonaje(!showAddPersonaje)}>
                      <Plus className="w-3.5 h-3.5" />
                      Añadir
                    </Button>
                    <Button size="sm" onClick={handleSavePersonajes} loading={generating}>
                      Guardar cambios
                    </Button>
                  </div>

                  {showAddPersonaje && (
                    <Card className="border-dashed border-stone-300 animate-slide-up">
                      <CardHeader>
                        <h3 className="text-sm font-medium text-stone-700">Nuevo personaje</h3>
                      </CardHeader>
                      <CardContent className="space-y-3">
                        <div>
                          <label className="block text-sm font-medium text-stone-600 mb-1.5">Nombre</label>
                          <input
                            type="text"
                            value={nuevoPersonaje.nombre}
                            onChange={(e) => setNuevoPersonaje({...nuevoPersonaje, nombre: e.target.value})}
                            placeholder="Ej: Búho Sabio"
                            className="w-full px-3 py-2 border border-stone-200 rounded-lg bg-white text-stone-900 focus:outline-none focus:ring-2 focus:ring-indigo-500/20 focus:border-indigo-400 transition-colors"
                          />
                        </div>
                        <div className="grid grid-cols-2 gap-3">
                          <div>
                            <label className="block text-sm font-medium text-stone-600 mb-1.5">Tipo</label>
                            <select
                              value={nuevoPersonaje.tipo}
                              onChange={(e) => setNuevoPersonaje({...nuevoPersonaje, tipo: e.target.value as any})}
                              className="w-full px-3 py-2 border border-stone-200 rounded-lg bg-white text-stone-900 focus:outline-none focus:ring-2 focus:ring-indigo-500/20 focus:border-indigo-400 transition-colors"
                            >
                              <option value="aliado">Aliado</option>
                              <option value="protagonista">Protagonista</option>
                              <option value="antagonista">Antagonista</option>
                            </select>
                          </div>
                          <div>
                            <label className="block text-sm font-medium text-stone-600 mb-1.5">Especie</label>
                            <input
                              type="text"
                              value={nuevoPersonaje.especie}
                              onChange={(e) => setNuevoPersonaje({...nuevoPersonaje, especie: e.target.value})}
                              placeholder="Ej: búho, zorro..."
                              className="w-full px-3 py-2 border border-stone-200 rounded-lg bg-white text-stone-900 focus:outline-none focus:ring-2 focus:ring-indigo-500/20 focus:border-indigo-400 transition-colors"
                            />
                          </div>
                        </div>
                        <div>
                          <label className="block text-sm font-medium text-stone-600 mb-1.5">Apariencia</label>
                          <Textarea
                            value={nuevoPersonaje.aparienciaFisica}
                            onChange={(e) => setNuevoPersonaje({...nuevoPersonaje, aparienciaFisica: e.target.value})}
                            placeholder="Color, tamaño, rasgos..."
                            rows={2}
                          />
                        </div>
                        <div>
                          <label className="block text-sm font-medium text-stone-600 mb-1.5">Rol</label>
                          <Textarea
                            value={nuevoPersonaje.descripcion}
                            onChange={(e) => setNuevoPersonaje({...nuevoPersonaje, descripcion: e.target.value})}
                            placeholder="Su rol en la historia..."
                            rows={2}
                          />
                        </div>
                        <div className="flex justify-end gap-2 pt-1">
                          <Button variant="ghost" size="sm" onClick={() => setShowAddPersonaje(false)}>
                            Cancelar
                          </Button>
                          <Button size="sm" onClick={onAddPersonaje} loading={generating}>
                            <Sparkles className="w-3.5 h-3.5" />
                            Crear con IA
                          </Button>
                        </div>
                      </CardContent>
                    </Card>
                  )}

                  {/* Lista de personajes */}
                  <PersonajesView
                    personajes={personajes}
                    slug={slug}
                    onSelectPersonaje={(p) => setEditingPersonaje(p)}
                    onOpenAssets={(p) => setAssetsPersonaje(p)}
                  />

                  {editingPersonaje && (
                    <PersonajeEditor
                      personaje={editingPersonaje}
                      onSave={handleUpdatePersonaje}
                      onDelete={handleDeletePersonaje}
                      onClose={() => setEditingPersonaje(null)}
                    />
                  )}

                  {assetsPersonaje && (
                    <CharacterAssetsPanel
                      personaje={assetsPersonaje}
                      slug={slug}
                      onClose={() => setAssetsPersonaje(null)}
                    />
                  )}

                  <div className="border border-stone-200 rounded-lg p-5 bg-white">
                    <div className="flex items-center gap-2 mb-3">
                      <RefreshCw className="w-4 h-4 text-stone-400" />
                      <span className="text-sm font-medium text-stone-700">Refinar personajes</span>
                    </div>
                    <Textarea
                      value={personajeFeedback}
                      onChange={(e) => setPersonajeFeedback(e.target.value)}
                      placeholder="Ej: 'Hazlos más tiernos', 'Más detalle en la mecánica de Coco'..."
                      rows={2}
                    />
                    <div className="mt-3 flex justify-end">
                      <Button size="sm" onClick={onMejorarPersonajes} loading={generating} disabled={!personajeFeedback.trim()}>
                        <RefreshCw className="w-3.5 h-3.5" />
                        Refinar
                      </Button>
                    </div>
                  </div>
                </>
              )}
            </div>
          )}

          {/* Step 2: Capítulos */}
          {currentStep === 2 && (
            <div className="space-y-6">
              <div className="flex items-center justify-between">
                <div>
                  <h2 className="text-xl font-semibold text-stone-900">Capítulos</h2>
                  <p className="mt-1 text-stone-500 text-sm">Crea y gestiona los capítulos de tu serie.</p>
                </div>
                <Link href={`/project/${slug}/capitulo/new`}>
                  <Button size="sm">
                    <Plus className="w-3.5 h-3.5" />
                    Nuevo capítulo
                  </Button>
                </Link>
              </div>

              {capitulos.length === 0 ? (
                <div className="text-center py-16">
                  <p className="text-stone-400 text-sm mb-5">Crea tu primer capítulo para comenzar.</p>
                  <Link href={`/project/${slug}/capitulo/new`}>
                    <Button>
                      <Plus className="w-4 h-4" />
                      Crear primer capítulo
                    </Button>
                  </Link>
                </div>
              ) : (
                <div className="space-y-1">
                  {capitulos.map((cap) => (
                    <Link key={cap.id} href={`/project/${slug}/capitulo/${cap.numero}`} className="block group">
                      <div className="flex items-center gap-4 px-4 py-3 rounded-lg hover:bg-white border border-transparent hover:border-stone-200/80 transition-all duration-150">
                        <span className="flex-shrink-0 w-7 h-7 bg-indigo-50 text-indigo-600 rounded text-xs font-semibold flex items-center justify-center">
                          {cap.numero}
                        </span>
                        <div className="flex-1 min-w-0">
                          <h3 className="text-sm font-medium text-stone-800 group-hover:text-stone-950 truncate">{cap.titulo}</h3>
                          {cap.virtudGanada && (
                            <span className="text-xs text-stone-400">{cap.virtudGanada}</span>
                          )}
                        </div>
                        <ChevronRight className="w-4 h-4 text-stone-300 group-hover:text-stone-400 transition-colors" />
                      </div>
                    </Link>
                  ))}
                </div>
              )}
            </div>
          )}
        </div>

        <div className="h-20" /> {/* spacer for fixed footer */}
      </main>

      <footer className="fixed bottom-0 left-0 right-0 z-10 border-t border-stone-200/60 bg-white/80 backdrop-blur-sm">
        <div className="max-w-5xl mx-auto px-6 py-3 flex justify-between">
          <Button
            variant="ghost"
            size="sm"
            onClick={() => changeStep(Math.max(0, currentStep - 1))}
            disabled={currentStep === 0}
          >
            <ArrowLeft className="w-3.5 h-3.5" />
            Anterior
          </Button>
          <Button
            variant="outline"
            size="sm"
            onClick={() => changeStep(Math.min(WIZARD_STEPS.length - 1, currentStep + 1))}
            disabled={currentStep === WIZARD_STEPS.length - 1 || !canAdvance()}
          >
            Siguiente
            <ChevronRight className="w-3.5 h-3.5" />
          </Button>
        </div>
      </footer>
    </div>
  );
}
