import Link from 'next/link';
import { headers } from 'next/headers';
import { notFound } from 'next/navigation';
import { getLead } from '@/db/queries';
import EstadoControl from '@/components/panel/EstadoControl';
import ConceptosEditor from '@/components/panel/ConceptosEditor';
import OpinionLinkBox from '@/components/panel/OpinionLinkBox';
import LeadFotosGaleria from '@/components/panel/LeadFotosGaleria';
import {
  PIPELINE_LABEL,
  PIPELINE_NEXT,
  PIPELINE_ORDER,
  TIPO_LABEL,
  formatEuros,
  formatFecha,
} from '@/lib/funnel';
import { recalcularPresupuesto, enviarPresupuesto, solicitarOpinion } from '../actions';
import type { BudgetResult } from '@/budget/types';

export const dynamic = 'force-dynamic';

function Section({ title, children }: { title: string; children: React.ReactNode }) {
  return (
    <section className="bg-white border border-gray-200 rounded-xl p-5 flex flex-col gap-3">
      <h2 className="text-xs uppercase tracking-wide font-semibold text-gray-400">{title}</h2>
      {children}
    </section>
  );
}

export default async function LeadDetailPage({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params;
  const data = await getLead(id);
  if (!data) notFound();

  const { lead, fotos, notas, eventos, precision } = data;
  const reachedStages = new Set(eventos.map((e) => e.stage));

  const snapshot = lead.desgloseSnapshot as { result: BudgetResult } | null;
  const desglose = snapshot?.result ?? null;
  const prefs = lead.preferencesSnapshot as import('@/lib/voice/preferences').AbstractedPreferences | null;
  const yaEnviado = lead.pipelineStage === 'whatsapp_entregado';

  const h = await headers();
  const host = h.get('x-forwarded-host') ?? h.get('host') ?? 'reformix.dv3.com.es';
  const proto = h.get('x-forwarded-proto') ?? 'https';
  const opinionUrl = `${proto}://${host}/opinion/${lead.id}`;

  return (
    <div className="flex flex-col gap-6">
      <Link href="/panel" className="text-sm text-gray-500 hover:text-primary-700 w-fit">
        ← Volver a leads
      </Link>

      {/* Cabecera + estado */}
      <div className="bg-white border border-gray-200 rounded-xl p-5 flex flex-col gap-4">
        <div className="flex flex-wrap items-start justify-between gap-4">
          <div className="flex flex-col gap-1">
            <h1 className="font-display text-3xl tracking-tight text-black">{lead.nombre}</h1>
            <p className="text-sm text-gray-500">
              {lead.tipoReforma ? TIPO_LABEL[lead.tipoReforma] : 'Reforma'} ·{' '}
              {lead.provincia ?? '—'} · entró {formatFecha(lead.createdAt)}
            </p>
          </div>
          <div className="text-right">
            <div className="text-xs text-gray-400">Presupuesto estimado</div>
            <div className="text-2xl font-black text-black">{formatEuros(lead.presupuestoEstimado)}</div>
          </div>
        </div>
        <EstadoControl
          leadId={lead.id}
          estado={lead.estado}
          presupuestoEstimado={lead.presupuestoEstimado}
        />
      </div>

      {/* Solicitar opinión al cliente */}
      <Section title="Opinión del cliente">
        {lead.testimonioSolicitadoAt ? (
          <div className="flex flex-col gap-3">
            <p className="text-sm text-gray-500">
              Solicitada el {formatFecha(lead.testimonioSolicitadoAt)}. Comparte este enlace con el
              cliente para que deje su opinión. Cuando la envíe, la verás en{' '}
              <Link href="/panel/opiniones" className="text-primary-700 underline underline-offset-2">
                Opiniones
              </Link>{' '}
              para aprobarla.
            </p>
            <OpinionLinkBox url={opinionUrl} />
          </div>
        ) : lead.estado === 'ganado' ? (
          <div className="flex flex-col gap-3">
            <p className="text-sm text-gray-500">
              Si la reforma ha ido bien, pídele su opinión. Generamos un enlace para que valore y
              suba fotos del resultado.
            </p>
            <form action={solicitarOpinion.bind(null, lead.id)}>
              <button
                type="submit"
                className="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-primary-700 text-white text-sm font-semibold w-fit hover:bg-primary-900"
              >
                Solicitar opinión al cliente
              </button>
            </form>
          </div>
        ) : (
          <p className="text-sm text-gray-400">
            Disponible cuando marques este lead como <span className="font-medium">ganado</span>.
          </p>
        )}
      </Section>

      {/* Timeline del funnel */}
      <Section title="Progreso en el funnel">
        <ol className="flex flex-col gap-2">
          {PIPELINE_ORDER.map((stage) => {
            const reached = reachedStages.has(stage);
            const isCurrent = stage === lead.pipelineStage;
            return (
              <li key={stage} className="flex items-center gap-3 text-sm">
                <span
                  className={`w-2.5 h-2.5 rounded-full shrink-0 ${
                    reached ? 'bg-green-500' : 'bg-gray-200'
                  }`}
                />
                <span className={reached ? 'text-black font-medium' : 'text-gray-400'}>
                  {PIPELINE_LABEL[stage]}
                </span>
                {isCurrent && (
                  <span className="ml-auto text-xs text-amber-600 font-medium">
                    → {PIPELINE_NEXT[stage]}
                  </span>
                )}
              </li>
            );
          })}
        </ol>
      </Section>

      <div className="grid md:grid-cols-2 gap-6">
        {/* 1. Datos personales */}
        <Section title="Datos personales">
          <dl className="text-sm flex flex-col gap-2">
            <div className="flex justify-between gap-4">
              <dt className="text-gray-500">Teléfono</dt>
              <dd className="text-black font-medium">{lead.telefono}</dd>
            </div>
            <div className="flex justify-between gap-4">
              <dt className="text-gray-500">Email</dt>
              <dd className="text-black font-medium break-all">{lead.email}</dd>
            </div>
            <div className="flex justify-between gap-4">
              <dt className="text-gray-500">Provincia</dt>
              <dd className="text-black font-medium">{lead.provincia ?? '—'}</dd>
            </div>
            <div className="flex justify-between gap-4">
              <dt className="text-gray-500">Consentimientos</dt>
              <dd className="text-black font-medium">
                {lead.consentPrivacidad ? 'Privacidad ✓' : 'Privacidad ✗'} ·{' '}
                {lead.consentContratacion ? 'Contratación ✓' : 'Contratación ✗'}
              </dd>
            </div>
          </dl>
        </Section>

        {/* 4. Render */}
        <Section title="Render generado">
          {lead.renderUrl ? (
            // eslint-disable-next-line @next/next/no-img-element
            <img src={lead.renderUrl} alt="Render de la reforma" className="w-full rounded-lg object-cover" />
          ) : (
            <p className="text-sm text-gray-400">Aún no generado.</p>
          )}
        </Section>

        {/* Preferencias detectadas */}
        <Section title="Preferencias detectadas">
          {prefs ? (
            <div className="flex flex-col gap-3 text-sm">
              <p className="text-gray-700">{prefs.resumen}</p>
              {prefs.estiloRender.length > 0 && (
                <div className="flex flex-wrap gap-2">
                  {prefs.estiloRender.map((e) => (
                    <span key={e} className="px-2 py-0.5 rounded-full bg-gray-100 text-gray-700 text-xs">
                      {e}
                    </span>
                  ))}
                </div>
              )}
              {prefs.elementos.length > 0 && (
                <ul className="flex flex-col gap-1">
                  {prefs.elementos.map((el) => (
                    <li key={el.key} className="flex justify-between">
                      <span className="text-gray-600">{el.label}</span>
                      <span className="text-black font-medium">{formatEuros(el.importe)}</span>
                    </li>
                  ))}
                </ul>
              )}
              {prefs.ajustes.length > 0 && (
                <ul className="text-xs text-gray-500 flex flex-col gap-1">
                  {prefs.ajustes.map((a, i) => (
                    <li key={i}>
                      <span className="font-medium text-gray-700">{a.label}</span> — {a.motivo}
                    </li>
                  ))}
                </ul>
              )}
              <div className="text-xs text-gray-400">
                Confianza de la extracción: {prefs.confianza}
                {prefs.camposFaltantes.length > 0 && ` · faltan: ${prefs.camposFaltantes.join(', ')}`}
              </div>
            </div>
          ) : (
            <p className="text-sm text-gray-400">Sin preferencias procesadas aún.</p>
          )}
        </Section>

        {/* 2. Transcripción */}
        <Section title="Transcripción de la llamada">
          {lead.transcripcion ? (
            <p className="text-sm text-gray-700 leading-relaxed whitespace-pre-wrap max-h-64 overflow-auto">
              {lead.transcripcion}
            </p>
          ) : (
            <p className="text-sm text-gray-400">Aún no hay llamada.</p>
          )}
        </Section>

        {/* 3. JSON de entidades */}
        <Section title="Entidades extraídas (JSON)">
          {lead.entidades ? (
            <pre className="text-xs bg-gray-900 text-gray-100 rounded-lg p-4 overflow-auto max-h-64">
              {JSON.stringify(lead.entidades, null, 2)}
            </pre>
          ) : (
            <p className="text-sm text-gray-400">Sin entidades aún.</p>
          )}
        </Section>

        {/* 5. Audio */}
        <Section title="Audio de la llamada">
          {lead.audioUrl ? (
            <audio controls src={lead.audioUrl} className="w-full">
              Tu navegador no soporta audio.
            </audio>
          ) : (
            <p className="text-sm text-gray-400">Sin grabación.</p>
          )}
        </Section>

        {/* 6. PDF */}
        <Section title="Presupuesto (PDF)">
          {desglose ? (
            <div className="flex flex-wrap items-center gap-3">
              <a
                href={`/panel/${lead.id}/presupuesto?download=1`}
                className="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-primary-700 text-white text-sm font-semibold w-fit hover:bg-primary-900"
              >
                Descargar PDF
              </a>
              <a
                href={`/panel/${lead.id}/presupuesto`}
                target="_blank"
                rel="noopener"
                className="text-sm font-medium text-gray-500 hover:text-primary-700"
              >
                Ver en el navegador
              </a>
            </div>
          ) : (
            <p className="text-sm text-gray-400">
              Recalcula el presupuesto desde el catálogo para generarlo.
            </p>
          )}
        </Section>
      </div>

      {/* Fotos y notas por zona */}
      {(fotos.length > 0 || notas.length > 0) && (
        <Section title="Fotos y detalles por zona">
          <LeadFotosGaleria fotos={fotos} notas={notas} tipoLead={lead.tipoReforma} />
        </Section>
      )}

      {/* Precisión (si ganado) */}
      {precision && (
        <Section title="Precisión del presupuesto">
          <div className="flex flex-wrap gap-8 text-sm">
            <div>
              <div className="text-gray-400 text-xs">Estimado</div>
              <div className="text-black font-bold text-lg">{formatEuros(precision.estimated)}</div>
            </div>
            <div>
              <div className="text-gray-400 text-xs">Final firmado</div>
              <div className="text-black font-bold text-lg">{formatEuros(precision.final)}</div>
            </div>
            <div>
              <div className="text-gray-400 text-xs">Desviación</div>
              <div
                className={`font-bold text-lg ${
                  Math.abs(Number(precision.deltaPct)) <= 15 ? 'text-green-600' : 'text-amber-600'
                }`}
              >
                {Number(precision.deltaPct) > 0 ? '+' : ''}
                {precision.deltaPct}%
              </div>
            </div>
          </div>
        </Section>
      )}

      {/* Presupuesto desglosado */}
      <Section title="Presupuesto desglosado">
        <div className="flex flex-wrap items-center gap-3">
          <form action={recalcularPresupuesto.bind(null, lead.id)}>
            <button
              type="submit"
              className="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-primary-700 text-white text-sm font-semibold w-fit hover:bg-primary-900"
            >
              Recalcular desde el catálogo
            </button>
          </form>
          {desglose && (
            <a
              href={`/panel/${lead.id}/presupuesto`}
              target="_blank"
              rel="noopener"
              className="inline-flex items-center gap-2 px-4 py-2 rounded-lg border border-gray-300 text-sm font-semibold text-gray-700 hover:border-gray-500"
            >
              Revisar PDF
            </a>
          )}
        </div>

        {desglose ? (
          <div className="flex flex-col gap-4 mt-2">
            {yaEnviado && (
              <div className="text-sm font-medium text-green-700 bg-green-50 rounded-lg px-3 py-2">
                Presupuesto enviado al cliente por WhatsApp ✓
              </div>
            )}

            {/* Conceptos editables + subtotal/factor zona/total */}
            <ConceptosEditor
              leadId={lead.id}
              partidas={desglose.partidas}
              factorZona={desglose.factorZona}
              bloqueado={yaEnviado}
            />

            {/* Rango */}
            <div className="flex justify-between text-sm">
              <span className="text-gray-500">Rango orientativo</span>
              <span className="text-black font-medium">
                {formatEuros(desglose.rango.min)} – {formatEuros(desglose.rango.max)}
              </span>
            </div>

            {/* Confianza */}
            <div className="flex items-center gap-2 text-sm">
              <span className="text-gray-500">Confianza del cálculo</span>
              <span
                className={`px-2 py-0.5 rounded-full text-xs font-semibold ${
                  desglose.confianza === 'alta'
                    ? 'bg-green-100 text-green-700'
                    : desglose.confianza === 'media'
                      ? 'bg-amber-100 text-amber-700'
                      : 'bg-red-100 text-red-700'
                }`}
              >
                {desglose.confianza}
              </span>
            </div>

            {/* Avisos */}
            {desglose.avisos.length > 0 && (
              <ul className="text-xs text-amber-700 bg-amber-50 rounded-lg p-3 flex flex-col gap-1">
                {desglose.avisos.map((aviso, i) => (
                  <li key={i}>⚠ {aviso}</li>
                ))}
              </ul>
            )}

            {/* Disclaimer RF-B-09 */}
            <p className="text-xs text-gray-400">
              Presupuesto orientativo. El precio final puede variar según la visita técnica.
            </p>

            {/* Enviar al cliente (envío simulado: registra la entrega por WhatsApp) */}
            {!yaEnviado && (
              <form action={enviarPresupuesto.bind(null, lead.id)} className="border-t border-gray-200 pt-4">
                <button
                  type="submit"
                  className="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-green-600 text-white text-sm font-semibold w-fit hover:bg-green-700"
                >
                  Enviar al cliente por WhatsApp
                </button>
              </form>
            )}
          </div>
        ) : (
          <p className="text-sm text-gray-400">Aún no se ha calculado el presupuesto.</p>
        )}
      </Section>
    </div>
  );
}
