"use client";
import Link from "next/link";
import { useParams, useRouter } from "next/navigation";
import { useEffect, useState } from "react";
import { dateTimeCL, panelValue } from "../../../lib/datetime";
const apiBase = process.env.NEXT_PUBLIC_API_BASE_URL || "/api/v1";
type Row = Record<string, unknown>;
type Summary = {
  documento: Row;
  creador: Row;
  cliente: Row;
  notaria: Row;
  pago: Row | null;
  gesnot: Row | null;
  gesnot_intentos: Row[];
  campos: Row[];
  estados: Row[];
};
const label = (value: string) => value.replaceAll("_", " ");
const display = (value: unknown) =>
  value === null || value === undefined || value === ""
    ? "—"
    : typeof value === "boolean"
      ? value
        ? "Sí"
        : "No"
      : String(value);
export default function DocumentSummaryPage() {
  const { codigo } = useParams<{ codigo: string }>(),
    router = useRouter();
  const [data, setData] = useState<Summary | null>(null),
    [error, setError] = useState(""),
    [tab, setTab] = useState<"overview" | "document" | "payment" | "states">(
      "overview",
    );
  useEffect(() => {
    const load = async () => {
      const me = await fetch(`${apiBase}/auth/me`, {
        credentials: "include",
        cache: "no-store",
      });
      if (!me.ok) {
        router.replace("/acceso");
        return;
      }
      const response = await fetch(`${apiBase}/panel/documents/${encodeURIComponent(codigo)}/summary`, {
          credentials: "include",
          cache: "no-store",
        }),
        body = await response.json();
      if (!response.ok) {
        setError(body.detail || "No fue posible cargar el resumen.");
        return;
      }
      setData(body);
    };
    void load();
  }, [codigo, router]);
  if (error)
    return (
      <main className="summary-page">
        <section className="panel-card panel-empty">
          {error}
          <Link className="button button-secondary" href="/panel">
            Volver al panel
          </Link>
        </section>
      </main>
    );
  if (!data)
    return (
      <main className="summary-page">
        <div className="panel-empty">Cargando resumen seguro…</div>
      </main>
    );
  const doc = data.documento;
  return (
    <main className="summary-page">
      <header className="summary-header">
        <div>
          <Link className="back-link" href="/panel">
            ← Volver a documentos
          </Link>
          <span className="section-kicker">Resumen del documento</span>
          <h1>{display(doc.folio)}</h1>
          <p>
            {display(doc.documento)} ·{" "}
            <span
              className={`status-pill status-${String(doc.estado).toLowerCase()}`}
            >
              {display(doc.estado)}
            </span>
          </p>
        </div>
        <div className="download-actions">
          <a
            className="button button-secondary"
            href={`${apiBase}/panel/documents/${encodeURIComponent(codigo)}/download?format=pdf`}
          >
            PDF
          </a>
          <a
            className="button button-primary"
            href={`${apiBase}/panel/documents/${encodeURIComponent(codigo)}/download?format=docx`}
          >
            Word
          </a>
        </div>
      </header>
      <nav className="summary-tabs">
        {(["overview", "document", "payment", "states"] as const).map(
          (value) => (
            <button
              key={value}
              className={tab === value ? "is-active" : ""}
              onClick={() => setTab(value)}
            >
              {value === "overview"
                ? "Resumen"
                : value === "document"
                  ? "Documento"
                  : value === "payment"
                    ? "Pago y GesNot"
                    : "Estados"}
            </button>
          ),
        )}
      </nav>
      {tab === "overview" && (
        <div className="summary-grid">
          <InfoCard title="Quién lo creó" data={data.creador} />
          <InfoCard title="Cliente" data={data.cliente} />
          <InfoCard title="Notaría" data={data.notaria} />
          <InfoCard title="Documento" data={data.documento} />
        </div>
      )}
      {tab === "document" && (
        <section className="panel-card">
          <h2>Campos del documento</h2>
          <div className="detail-list">
            {data.campos.map((field, index) => (
              <div key={index}>
                <span>{display(field.etiqueta)}</span>
                <strong>{display(field.valor)}</strong>
                <small>{display(field.codigo)}</small>
              </div>
            ))}
          </div>
        </section>
      )}
      {tab === "payment" && (
        <div>
        <div className="summary-grid">
          <InfoCard
            title="Pago"
            data={data.pago || { estado: "Sin pago registrado" }}
          />
          <InfoCard
            title="Orden GesNot"
            data={data.gesnot || { estado: "Sin OT registrada" }}
          />
        </div>
        <section className="panel-card" style={{marginTop: 18}}>
          <h2>Intentos de integración GesNot</h2>
          <div className="panel-table-wrap"><table><thead><tr><th>Intento</th><th>Estado</th><th>HTTP</th><th>Respuesta sanitizada</th><th>Error</th><th>Fecha</th></tr></thead><tbody>
            {(data.gesnot_intentos || []).map((item,index)=><tr key={index}><td>{display(item.intento)}</td><td>{display(item.estado)}</td><td>{display(item.http_status)}</td><td>{display(item.respuesta_sanitizada)}</td><td>{display(item.error_sanitizado)}</td><td>{dateTimeCL(item.finalizado_en || item.iniciado_en)}</td></tr>)}
          </tbody></table></div>
        </section>
        </div>
      )}
      {tab === "states" && (
        <section className="panel-card">
          <h2>Historial de estados</h2>
          <div className="state-timeline">
            {data.estados.map((item, index) => (
              <article key={index}>
                <span></span>
                <div>
                  <strong>{display(item.estado_destino)}</strong>
                  <p>{display(item.motivo)}</p>
                  <small>
                    {dateTimeCL(item.creado_en)} · {display(item.actor_tipo)}
                  </small>
                </div>
              </article>
            ))}
          </div>
        </section>
      )}
    </main>
  );
}
function InfoCard({ title, data }: { title: string; data: Row }) {
  return (
    <section className="panel-card info-card">
      <h2>{title}</h2>
      <dl>
        {Object.entries(data).map(([key, value]) => (
          <div key={key}>
            <dt>{label(key)}</dt>
            <dd>{panelValue(key, value)}</dd>
          </div>
        ))}
      </dl>
    </section>
  );
}