"use client";
import Link from "next/link";
import { FormEvent, useState } from "react";
import { PublicFooter, PublicHeader } from "../components/PublicChrome";
const apiBase = process.env.NEXT_PUBLIC_API_BASE_URL || "/api/v1";
const formatRut = (value: string) => {
  const c = value.replace(/[^0-9kK]/g, "").toUpperCase();
  return c.length < 2
    ? c
    : `${c.slice(0, -1).replace(/\B(?=(\d{3})+(?!\d))/g, ".")}-${c.slice(-1)}`;
};
export default function StatusPage() {
  const [code, setCode] = useState(() =>
      typeof window === "undefined"
        ? ""
        : new URLSearchParams(window.location.search).get("codigo") || "",
    ),
    [data, setData] = useState<Record<string, unknown> | null>(null),
    [error, setError] = useState(""),
    [busy, setBusy] = useState(false);
  async function verify(e: FormEvent<HTMLFormElement>) {
    e.preventDefault();
    setBusy(true);
    setError("");
    const f = new FormData(e.currentTarget),
      rut = String(f.get("rut") || "");
    const r = await fetch(
        `${apiBase}/solicitudes/${encodeURIComponent(code)}/estado`,
        {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ rut }),
        },
      ),
      b = await r.json();
    setBusy(false);
    if (!r.ok) {
      setData(null);
      return setError(b.detail || "No fue posible validar la identidad.");
    }
    setData(b);
  }
  return (
    <><PublicHeader /><main className="status-public-page">
      <section className="status-public-shell">
        {!data ? (
          <div className="status-lookup-grid">
            <div className="status-lookup-copy"><span className="section-kicker">SEGUIMIENTO SEGURO</span>
              <h1>Estado de tu solicitud</h1>
              <p>Consulta el avance de tu trámite de forma segura. Sólo necesitas el código recibido y el RUT informado.</p>
              <ul><li>Estado actualizado del trámite</li><li>Datos de la entidad seleccionada</li><li>Información del pago y de la entrega</li></ul>
            </div>
          <form className="procedure-card profile-form status-lookup-form" onSubmit={verify}>
            <h2>Consultar seguimiento</h2><p>Validaremos tu identidad antes de mostrar información.</p>
            <label>
              Código del documento
              <input
                value={code}
                onChange={(e) => setCode(e.target.value)}
                required
                placeholder="DOC-20260823-ABC123"
              />
            </label>
            <label>
              RUT
              <input
                name="rut"
                onChange={(e) =>
                  (e.currentTarget.value = formatRut(e.currentTarget.value))
                }
                required
                placeholder="12.345.678-9"
              />
            </label>
            {error && <p className="form-error">{error}</p>}
            <button className="button button-primary" disabled={busy}>
              {busy ? "Validando…" : "Consultar estado"}
            </button>
            <p className="status-login-help">
              Si el RUT no coincide, puedes{" "}
              <Link href="/acceso">ingresar a tu cuenta</Link> para ver tus
              documentos asociados.
            </p>
          </form>
          </div>
        ) : (
          <>
            <div className="status-result-heading"><div className="confirmation-ok">✓</div><div><span className="section-kicker">SEGUIMIENTO SEGURO</span><h1>Tu documento</h1><p>Información actualizada del trámite consultado.</p></div></div>
            <div className="summary-grid public-summary">
              <Summary
                title="Documento"
                rows={[
                  ["Folio", data.folio],
                  ["Trámite", data.documento],
                  ["Estado", data.estado_solicitud || data.estado],
                  ["Vencimiento", data.vence_en],
                ]}
              />
              <Summary
                title="Entidad"
                rows={[
                  ["Nombre", data.entidad || data.notaria],
                  [
                    "Dirección",
                    `${data.direccion || ""}, ${data.comuna || ""}`,
                  ],
                  ["Referencia externa", data.numero_ot || "No aplica"],
                ]}
              />
              <Summary
                title="Pago"
                rows={[
                  ["Estado", data.estado_pago || "Pendiente"],
                  [
                    "Monto",
                    `$${Number(data.total || 0).toLocaleString("es-CL")}`,
                  ],
                  ["Autorización", data.codigo_autorizacion || "—"],
                ]}
              />
              <Summary
                title="Fechas"
                rows={[
                  ["Creado", data.creada_en],
                  ["Pagado", data.pagada_en || "—"],
                  ["Realizado", data.realizada_en || "—"],
                ]}
              />
            </div>
            <button
              className="button button-secondary"
              onClick={() => setData(null)}
            >
              Nueva consulta
            </button>
          </>
        )}
      </section>
    </main><PublicFooter /></>
  );
}
function Summary({
  title,
  rows,
}: {
  title: string;
  rows: Array<[string, unknown]>;
}) {
  return (
    <article className="summary-block">
      <h3>{title}</h3>
      <dl>
        {rows.map(([k, v]) => (
          <div key={k}>
            <dt>{k}</dt>
            <dd>{String(v ?? "—")}</dd>
          </div>
        ))}
      </dl>
    </article>
  );
}