import type { Lead, LeadFoto, LeadNota } from '@/db/schema';
import { TIPO_LABEL } from '@/lib/funnel';
import { agruparPorZona } from '@/lib/funnel/fotos';

function Fila({ titulo, fotos }: { titulo: string; fotos: LeadFoto[] }) {
  if (fotos.length === 0) return null;
  return (
    <div className="flex flex-col gap-1.5">
      <span className="text-xs uppercase tracking-wide font-semibold text-gray-400">{titulo}</span>
      <div className="flex flex-wrap gap-2">
        {fotos.map((f) => (
          // eslint-disable-next-line @next/next/no-img-element
          <img
            key={f.id}
            src={f.url}
            alt=""
            className="w-28 h-20 object-cover rounded-lg border border-gray-200"
          />
        ))}
      </div>
    </div>
  );
}

// Galería de la ficha: fotos antes/después y notas agrupadas por zona.
export default function LeadFotosGaleria({
  fotos,
  notas,
  tipoLead,
}: {
  fotos: LeadFoto[];
  notas: LeadNota[];
  tipoLead: Lead['tipoReforma'];
}) {
  const grupos = agruparPorZona(fotos, notas, tipoLead ?? 'otro');
  if (grupos.length === 0) return null;

  return (
    <div className="flex flex-col gap-5">
      {grupos.map((g) => (
        <div key={g.zona} className="flex flex-col gap-3 border border-gray-200 rounded-lg p-4">
          <span className="text-sm font-bold text-black">{TIPO_LABEL[g.zona]}</span>
          <Fila titulo="Antes" fotos={g.antes} />
          <Fila titulo="Después" fotos={g.despues} />
          {g.notas.length > 0 && (
            <ul className="flex flex-col gap-1 text-sm text-gray-600">
              {g.notas.map((n) => (
                <li key={n.id}>• {n.texto}</li>
              ))}
            </ul>
          )}
        </div>
      ))}
    </div>
  );
}