'use client';

import { useState, useEffect } from 'react';
import { Image } from 'lucide-react';
import type { Personaje, CharacterAssetsData } from '@/types/project';

interface PersonajesViewProps {
  personajes: Personaje[];
  slug: string;
  onSelectPersonaje?: (personaje: Personaje) => void;
  onOpenAssets?: (personaje: Personaje) => void;
  selectedId?: string;
}

export function PersonajesView({ personajes, slug, onSelectPersonaje, onOpenAssets, selectedId }: PersonajesViewProps) {
  const [baseImages, setBaseImages] = useState<Record<string, string>>({});

  useEffect(() => {
    let cancelled = false;
    async function fetchBaseImages() {
      const images: Record<string, string> = {};
      await Promise.all(
        personajes.map(async (p) => {
          try {
            const res = await fetch(`/api/projects/${slug}/personajes/${p.id}/assets`);
            if (!res.ok) return;
            const data: CharacterAssetsData = await res.json();
            const base = data.assets.find(a => a.isBase && a.imageUrl);
            if (base?.imageUrl) images[p.id] = base.imageUrl;
          } catch { /* ignore */ }
        })
      );
      if (!cancelled) setBaseImages(images);
    }
    if (personajes.length > 0) fetchBaseImages();
    return () => { cancelled = true; };
  }, [personajes, slug]);

  const getTipoStyle = (tipo: string) => {
    switch (tipo) {
      case 'protagonista': return 'bg-indigo-50 text-indigo-600';
      case 'aliado': return 'bg-emerald-50 text-emerald-600';
      case 'antagonista': return 'bg-red-50 text-red-600';
      default: return 'bg-stone-100 text-stone-600';
    }
  };

  return (
    <div className="space-y-3">
      {personajes.map((personaje) => (
        <div
          key={personaje.id}
          onClick={() => onSelectPersonaje?.(personaje)}
          className={`
            bg-white border rounded-lg p-5 transition-all duration-150
            ${onSelectPersonaje ? 'cursor-pointer hover:border-stone-300' : ''}
            ${selectedId === personaje.id ? 'ring-2 ring-indigo-500 border-indigo-300' : 'border-stone-200'}
          `}
        >
          <div className="flex gap-4">
            {/* Base image thumbnail */}
            {baseImages[personaje.id] ? (
              <div className="w-20 h-20 flex-shrink-0 rounded-lg border border-stone-200 overflow-hidden bg-stone-50">
                <img
                  src={baseImages[personaje.id]}
                  alt={personaje.nombre}
                  className="w-full h-full object-cover"
                />
              </div>
            ) : (
              <div className="w-20 h-20 flex-shrink-0 rounded-lg border border-stone-100 bg-stone-50 flex items-center justify-center">
                <span className="text-[10px] text-stone-300">Sin imagen</span>
              </div>
            )}

            {/* Content */}
            <div className="flex-1 min-w-0">
              <div className="flex items-center gap-3 mb-2">
                <h3 className="text-sm font-semibold text-stone-900">{personaje.nombre}</h3>
                <span className={`px-2 py-0.5 text-[11px] font-medium rounded ${getTipoStyle(personaje.tipo)}`}>
                  {personaje.tipo}
                </span>
                {personaje.especie && (
                  <span className="text-xs text-stone-400">{personaje.especie}</span>
                )}
                <div className="flex-1" />
                {onOpenAssets && (
                  <button
                    onClick={(e) => { e.stopPropagation(); onOpenAssets(personaje); }}
                    className="px-2 py-1 text-[11px] font-medium text-stone-400 hover:text-indigo-600 hover:bg-indigo-50 rounded transition-colors flex items-center gap-1"
                  >
                    <Image className="w-3 h-3" />
                    Assets
                  </button>
                )}
              </div>

              {personaje.aparienciaFisica && (
                <p className="text-sm text-stone-500 mb-2 leading-relaxed">{personaje.aparienciaFisica}</p>
              )}

              <div className="text-sm text-stone-600 mb-2">
                <p>{personaje.rolPrincipal}</p>
              </div>

              {personaje.personalidad && (
                <p className="text-xs text-stone-400 mb-2">{personaje.personalidad}</p>
              )}

              <div className="grid grid-cols-2 gap-x-6 gap-y-2 pt-2 border-t border-stone-100">
                {personaje.utileriaVisual && (
                  <div>
                    <span className="text-[11px] font-medium text-stone-400 uppercase tracking-wider">Utilería</span>
                    <p className="text-xs text-stone-600 mt-0.5">{personaje.utileriaVisual}</p>
                  </div>
                )}
                {personaje.comunicacion && (
                  <div>
                    <span className="text-[11px] font-medium text-stone-400 uppercase tracking-wider">Comunicación</span>
                    <p className="text-xs text-stone-600 mt-0.5">{personaje.comunicacion}</p>
                  </div>
                )}
                {personaje.mecanicaNarrativa && (
                  <div className="col-span-2 mt-1">
                    <span className="text-[11px] font-medium text-stone-400 uppercase tracking-wider">Mecánica narrativa</span>
                    <p className="text-xs text-stone-600 mt-0.5">{personaje.mecanicaNarrativa}</p>
                  </div>
                )}
              </div>
            </div>
          </div>
        </div>
      ))}

      {personajes.length === 0 && (
        <div className="text-center py-12">
          <p className="text-sm text-stone-400">No hay personajes definidos</p>
        </div>
      )}
    </div>
  );
}
