'use client';

import { useState } from 'react';
import { X, Save, Trash2 } from 'lucide-react';
import { Button } from '@/components/ui/Button';
import { Textarea } from '@/components/ui/Input';
import type { Personaje } from '@/types/project';

interface PersonajeEditorProps {
  personaje: Personaje;
  onSave: (personaje: Personaje) => void;
  onDelete: (id: string) => void;
  onClose: () => void;
}

export function PersonajeEditor({ personaje, onSave, onDelete, onClose }: PersonajeEditorProps) {
  const [editedPersonaje, setEditedPersonaje] = useState<Personaje>({ ...personaje });

  const handleChange = (field: keyof Personaje, value: string) => {
    setEditedPersonaje({ ...editedPersonaje, [field]: value });
  };

  const handleSave = () => {
    onSave(editedPersonaje);
    onClose();
  };

  const handleDelete = () => {
    if (confirm(`¿Eliminar a ${personaje.nombre}?`)) {
      onDelete(personaje.id);
      onClose();
    }
  };

  return (
    <div className="fixed inset-0 bg-black/40 backdrop-blur-sm flex items-center justify-center z-50 p-4 animate-fade-in">
      <div className="bg-white rounded-lg shadow-xl shadow-black/10 max-w-2xl w-full max-h-[90vh] overflow-hidden animate-scale-in">
        <div className="flex items-center justify-between px-5 py-4 border-b border-stone-100">
          <h2 className="text-base font-semibold text-stone-900">{personaje.nombre}</h2>
          <button onClick={onClose} className="p-1 text-stone-400 hover:text-stone-600 transition-colors">
            <X className="w-4 h-4" />
          </button>
        </div>

        <div className="p-5 overflow-y-auto max-h-[calc(90vh-140px)] space-y-4">
          <div className="grid grid-cols-2 gap-3">
            <div>
              <label className="block text-sm font-medium text-stone-600 mb-1.5">Nombre</label>
              <input
                type="text"
                value={editedPersonaje.nombre}
                onChange={(e) => handleChange('nombre', e.target.value)}
                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>
              <label className="block text-sm font-medium text-stone-600 mb-1.5">Tipo</label>
              <select
                value={editedPersonaje.tipo}
                onChange={(e) => handleChange('tipo', e.target.value)}
                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="protagonista">Protagonista</option>
                <option value="aliado">Aliado</option>
                <option value="antagonista">Antagonista</option>
              </select>
            </div>
          </div>

          <div>
            <label className="block text-sm font-medium text-stone-600 mb-1.5">Especie</label>
            <input
              type="text"
              value={editedPersonaje.especie || ''}
              onChange={(e) => handleChange('especie', e.target.value)}
              placeholder="Ej: gato, 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>
            <label className="block text-sm font-medium text-stone-600 mb-1.5">Apariencia Física</label>
            <Textarea
              value={editedPersonaje.aparienciaFisica || ''}
              onChange={(e) => handleChange('aparienciaFisica', e.target.value)}
              placeholder="Describe el aspecto físico: color, tamaño, rasgos distintivos..."
              rows={3}
            />
          </div>

          {/* Rol Principal */}
          <div>
            <label className="block text-sm font-medium text-stone-600 mb-1.5">Rol Principal</label>
            <Textarea
              value={editedPersonaje.rolPrincipal}
              onChange={(e) => handleChange('rolPrincipal', e.target.value)}
              placeholder="Su función en la historia..."
              rows={2}
            />
          </div>

          {/* Personalidad */}
          <div>
            <label className="block text-sm font-medium text-stone-600 mb-1.5">Personalidad</label>
            <Textarea
              value={editedPersonaje.personalidad}
              onChange={(e) => handleChange('personalidad', e.target.value)}
              placeholder="Rasgos de carácter..."
              rows={2}
            />
          </div>

          {/* Habilidad Innata */}
          <div>
            <label className="block text-sm font-medium text-stone-600 mb-1.5">Habilidad Innata</label>
            <Textarea
              value={editedPersonaje.habilidadInnata}
              onChange={(e) => handleChange('habilidadInnata', e.target.value)}
              placeholder="Qué sabe hacer naturalmente..."
              rows={2}
            />
          </div>

          {/* Utilería Visual */}
          <div>
            <label className="block text-sm font-medium text-stone-600 mb-1.5">Utilería Visual</label>
            <Textarea
              value={editedPersonaje.utileriaVisual}
              onChange={(e) => handleChange('utileriaVisual', e.target.value)}
              placeholder="Objetos distintivos que lleva..."
              rows={2}
            />
          </div>

          {/* Mecánica Narrativa */}
          <div>
            <label className="block text-sm font-medium text-stone-600 mb-1.5">Mecánica Narrativa</label>
            <Textarea
              value={editedPersonaje.mecanicaNarrativa}
              onChange={(e) => handleChange('mecanicaNarrativa', e.target.value)}
              placeholder="Cómo funciona en la historia..."
              rows={2}
            />
          </div>

          {/* Comunicación */}
          <div>
            <label className="block text-sm font-medium text-stone-600 mb-1.5">Comunicación</label>
            <Textarea
              value={editedPersonaje.comunicacion}
              onChange={(e) => handleChange('comunicacion', e.target.value)}
              placeholder="Cómo se expresa (sonidos, gestos)..."
              rows={2}
            />
          </div>

          {/* Avance de Habilidad */}
          <div>
            <label className="block text-sm font-medium text-stone-600 mb-1.5">Avance de Habilidad</label>
            <Textarea
              value={editedPersonaje.avanceHabilidad}
              onChange={(e) => handleChange('avanceHabilidad', e.target.value)}
              placeholder="Cómo progresa a lo largo de la serie..."
              rows={2}
            />
          </div>
        </div>

        {/* Footer */}
        <div className="flex items-center justify-between px-5 py-4 border-t border-stone-100">
          <Button variant="ghost" size="sm" onClick={handleDelete} className="text-red-500 hover:text-red-600 hover:bg-red-50">
            <Trash2 className="w-3.5 h-3.5" />
            Eliminar
          </Button>
          <div className="flex gap-2">
            <Button variant="ghost" size="sm" onClick={onClose}>
              Cancelar
            </Button>
            <Button size="sm" onClick={handleSave}>
              <Save className="w-3.5 h-3.5" />
              Guardar
            </Button>
          </div>
        </div>
      </div>
    </div>
  );
}
