'use client';

import type { IdeaMotriz } from '@/types/project';

interface IdeaMotrizViewProps {
  data: IdeaMotriz;
}

function SectionLabel({ children }: { children: React.ReactNode }) {
  return <h3 className="text-xs font-medium text-stone-400 uppercase tracking-wider mb-2">{children}</h3>;
}

export function IdeaMotrizView({ data }: IdeaMotrizViewProps) {
  return (
    <div className="space-y-6">
      <div>
        <SectionLabel>Premisa</SectionLabel>
        <p className="text-stone-800 leading-relaxed">{data.ideaMotrizCentral}</p>
      </div>

      <div className="flex gap-6">
        <div>
          <SectionLabel>Capítulos</SectionLabel>
          <p className="text-xl font-semibold text-stone-900 tabular-nums">{data.formato?.capitulos || '-'}</p>
        </div>
        <div className="w-px bg-stone-100" />
        <div>
          <SectionLabel>Duración</SectionLabel>
          <p className="text-xl font-semibold text-stone-900 tabular-nums">{data.formato?.duracionMinutos || '-'} min</p>
        </div>
      </div>

      <div>
        <SectionLabel>Narrativa</SectionLabel>
        <p className="text-stone-600 text-sm leading-relaxed">{data.narrativa}</p>
      </div>

      {data.estiloVisual && (
        <div>
          <SectionLabel>Estilo Visual</SectionLabel>
          <p className="text-sm text-stone-600 leading-relaxed font-mono bg-stone-50 rounded px-3 py-2">{data.estiloVisual}</p>
        </div>
      )}

      {data.valores && data.valores.length > 0 && (
        <div>
          <SectionLabel>Valores</SectionLabel>
          <div className="flex flex-wrap gap-1.5">
            {data.valores.map((valor, i) => (
              <span key={i} className="px-2.5 py-1 bg-stone-100 text-stone-600 rounded text-xs font-medium">
                {valor}
              </span>
            ))}
          </div>
        </div>
      )}

      {data.protagonistas && data.protagonistas.length > 0 && (
        <div>
          <SectionLabel>Protagonistas</SectionLabel>
          <div className="space-y-3">
            {data.protagonistas.map((p, i) => (
              <div key={i} className="border border-stone-100 rounded-lg p-4">
                <div className="flex items-baseline gap-2">
                  <h4 className="font-medium text-stone-900">{p.nombre}</h4>
                  <span className="text-xs text-stone-400">{p.rol}</span>
                </div>
                {p.utileria && (
                  <p className="text-xs text-stone-500 mt-1.5">Utilería: {p.utileria}</p>
                )}
                {p.mecanica && (
                  <p className="text-sm text-stone-600 mt-1.5">{p.mecanica}</p>
                )}
              </div>
            ))}
          </div>
        </div>
      )}

      {data.antagonista && (
        <div>
          <SectionLabel>Antagonista</SectionLabel>
          <div className="border border-stone-100 rounded-lg p-4">
            <h4 className="font-medium text-stone-900">{data.antagonista.nombre}</h4>
            <p className="text-sm text-stone-600 mt-1">{data.antagonista.descripcion}</p>
            {data.antagonista.representacionVisual && (
              <p className="text-xs text-stone-400 mt-2">Visual: {data.antagonista.representacionVisual}</p>
            )}
          </div>
        </div>
      )}

      {data.estructuraGuion && data.estructuraGuion.length > 0 && (
        <div>
          <SectionLabel>Estructura</SectionLabel>
          <div className="space-y-2">
            {data.estructuraGuion.map((acto) => (
              <div key={acto.numero} className="flex items-start gap-3 py-2">
                <span className="flex-shrink-0 w-6 h-6 bg-indigo-50 text-indigo-600 rounded text-xs font-semibold flex items-center justify-center mt-0.5">
                  {acto.numero}
                </span>
                <div className="flex-1 min-w-0">
                  <div className="flex items-baseline gap-2">
                    <h4 className="text-sm font-medium text-stone-800">{acto.nombre}</h4>
                    <span className="text-xs text-stone-400">{acto.duracionMin}-{acto.duracionMax} min</span>
                  </div>
                  <p className="text-sm text-stone-500 mt-0.5">{acto.descripcion}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      )}

      {data.expansion && (
        <div>
          <SectionLabel>Expansión</SectionLabel>
          <p className="text-sm text-stone-600 leading-relaxed">{data.expansion}</p>
        </div>
      )}
    </div>
  );
}
