'use client';

import Link from 'next/link';
import { Clock, Volume2, AlertCircle } from 'lucide-react';
import type { PlanoEscaleta, PersonajeEnPlano } from '@/types/project';
import type { CharacterAssetsSummary } from '@/lib/file-service';

const EMOTION_LABELS: Record<string, string> = {
  alegria: 'Alegría',
  tristeza: 'Tristeza',
  sorpresa: 'Sorpresa',
  miedo: 'Miedo',
  enfado: 'Enfado',
  neutral: 'Neutral',
};

const EMOTION_COLORS: Record<string, string> = {
  alegria: 'bg-yellow-100 text-yellow-700',
  tristeza: 'bg-blue-100 text-blue-700',
  sorpresa: 'bg-purple-100 text-purple-700',
  miedo: 'bg-slate-100 text-slate-700',
  enfado: 'bg-red-100 text-red-700',
  neutral: 'bg-stone-100 text-stone-600',
};

interface PlanoCardProps {
  plano: PlanoEscaleta;
  index: number;
  assetsMap: Record<string, CharacterAssetsSummary>;
  slug: string;
}

export function PlanoCard({ plano, index, assetsMap, slug }: PlanoCardProps) {
  const personajes = plano.personajesDetalle || [];
  const missingAssets = personajes.filter(p => !assetsMap[p.personajeId]?.hasAssets);

  return (
    <div className="bg-white border border-stone-200 rounded-lg overflow-hidden hover:border-stone-300 transition-colors">
      {/* Header */}
      <div className="px-4 py-2.5 bg-stone-50/80 border-b border-stone-100 flex items-center justify-between">
        <div className="flex items-center gap-2.5">
          <span className="flex-shrink-0 w-6 h-6 bg-indigo-50 text-indigo-600 rounded text-[11px] font-semibold flex items-center justify-center">
            {index + 1}
          </span>
          <span className="text-xs font-medium text-stone-700">{plano.numeroPlano}</span>
          <span className="text-xs text-stone-400">{plano.segmentoGuion}</span>
        </div>
        <div className="flex items-center gap-1 text-xs text-stone-400">
          <Clock className="w-3 h-3" />
          {plano.tiempoSegundos}s
        </div>
      </div>

      {/* Personajes strip */}
      {personajes.length > 0 && (
        <div className="px-4 py-2.5 border-b border-stone-100 flex flex-wrap gap-2">
          {personajes.map((pd) => (
            <PersonajeBadge
              key={pd.personajeId}
              personaje={pd}
              assets={assetsMap[pd.personajeId]}
              slug={slug}
            />
          ))}
        </div>
      )}

      {/* Body */}
      <div className="px-4 py-3 space-y-2">
        <p className="text-sm text-stone-700 leading-relaxed">{plano.accionDescripcion}</p>
        {plano.indicacionesSonido && (
          <div className="flex items-start gap-1.5 text-xs text-stone-400">
            <Volume2 className="w-3 h-3 mt-0.5 flex-shrink-0" />
            <span>{plano.indicacionesSonido}</span>
          </div>
        )}
      </div>

      {/* Missing assets warning */}
      {missingAssets.length > 0 && (
        <div className="px-4 py-2 bg-amber-50 border-t border-amber-100 flex items-center gap-2">
          <AlertCircle className="w-3.5 h-3.5 text-amber-500 flex-shrink-0" />
          <span className="text-xs text-amber-700">
            Sin assets: {missingAssets.map(p => p.nombre).join(', ')}
          </span>
          <Link
            href={`/project/${slug}?step=personajes`}
            className="ml-auto text-xs font-medium text-amber-600 hover:text-amber-800 transition-colors"
          >
            Generar
          </Link>
        </div>
      )}
    </div>
  );
}

function PersonajeBadge({
  personaje,
  assets,
  slug,
}: {
  personaje: PersonajeEnPlano;
  assets?: CharacterAssetsSummary;
  slug: string;
}) {
  const emotionUrl = assets?.emotions[personaje.emocion];
  const tposeUrl = assets?.tposeFrontUrl;
  const avatarUrl = tposeUrl;
  const emotionColor = EMOTION_COLORS[personaje.emocion] || EMOTION_COLORS.neutral;

  return (
    <div className="flex items-center gap-1.5 rounded-full bg-stone-50 border border-stone-150 pl-1 pr-2.5 py-0.5">
      {/* Avatar */}
      {avatarUrl ? (
        <img
          src={avatarUrl}
          alt={personaje.nombre}
          className="w-6 h-6 rounded-full object-cover bg-stone-100"
        />
      ) : (
        <div className="w-6 h-6 rounded-full bg-stone-200 flex items-center justify-center text-[10px] font-medium text-stone-500">
          {personaje.nombre.charAt(0)}
        </div>
      )}

      {/* Name */}
      <span className="text-xs font-medium text-stone-700">{personaje.nombre}</span>

      {/* Emotion badge with optional thumbnail */}
      <span className={`inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-[10px] font-medium ${emotionColor}`}>
        {emotionUrl && (
          <img
            src={emotionUrl}
            alt={personaje.emocion}
            className="w-4 h-4 rounded-sm object-cover"
          />
        )}
        {EMOTION_LABELS[personaje.emocion] || personaje.emocion}
      </span>
    </div>
  );
}
