"use client";

import { FormEvent, useState } from "react";
import { userMessage } from "../../lib/messages";

const apiBase = process.env.NEXT_PUBLIC_API_BASE_URL || "/api/v1";
type Evidence = Record<string, unknown>;
type Source = { repositorio: string; codigo: string; resultado: string; duracion_ms: number; evidencia?: Evidence | null; error?: string | null };
type Result = { verificacion_id: string; codigo: string; estado: string; resumen: string; consultado_en: string; duracion_ms: number; fuentes: Source[]; kpis: { consultadas: number; respondieron: number; fallaron: number } };

const labels: Record<string, string> = {
  VERIFICADO: "Documento verificado", INVALIDO: "Documento no vigente",
  NO_ENCONTRADO: "Código no encontrado", INDETERMINADO: "Consulta incompleta",
  REGISTRADO: "Registro Documenta", VALIDO: "Firma válida", VIGENTE: "Vigente",
  ERROR: "No respondió", OMITIDO: "Temporalmente omitido",
};
const evidenceLabels: Record<string, string> = {
  documento: "Documento", tipo: "Tipo", version: "Versión", emisor: "Emisor",
  emitido_en: "Fecha de emisión", firmado_en: "Fecha de firma", estado_documento: "Estado",
  estado_firma: "Evidencia de firma", algoritmo_hash: "Algoritmo", hash_documento: "Huella digital",
  revocado_en: "Fecha de revocación", motivo_revocacion: "Motivo", codigo: "Código",
};
function display(value: unknown) {
  if (value === null || value === undefined || value === "") return "No informado";
  const raw = String(value);
  if (/^\d{4}-\d{2}-\d{2}T/.test(raw) || /^\d{4}-\d{2}-\d{2} /.test(raw)) {
    const date = new Date(raw.includes("T") ? raw : raw.replace(" ", "T") + "Z");
    if (!Number.isNaN(date.getTime())) return new Intl.DateTimeFormat("es-CL", { dateStyle: "long", timeStyle: "short", timeZone: "America/Santiago" }).format(date);
  }
  return labels[raw] || raw;
}

export default function VerificationClient({ initialCode = "" }: { initialCode?: string }) {
  const [code, setCode] = useState(initialCode);
  const [result, setResult] = useState<Result | null>(null);
  const [error, setError] = useState("");
  const [loading, setLoading] = useState(false);
  async function verify(event: FormEvent<HTMLFormElement>) {
    event.preventDefault(); setLoading(true); setError(""); setResult(null);
    try {
      const response = await fetch(`${apiBase}/portal/verificacion/consultar`, {
        method: "POST", headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ codigo: code }), cache: "no-store",
      });
      const body = await response.json();
      if (!response.ok) throw new Error(typeof body.detail === "string" ? body.detail : "No fue posible realizar la consulta.");
      setResult(body as Result);
      window.history.replaceState(null, "", `/verificar?codigo=${encodeURIComponent(code.trim())}`);
    } catch (reason) { setError(userMessage(reason, "No fue posible realizar la consulta.")); }
    finally { setLoading(false); }
  }

  return <>
    <section className="verification-hero"><div className="portal-container verification-hero-grid">
      <div><span className="portal-eyebrow">VERIFICACIÓN DOCUMENTAL</span><h1>Consulta el código de un documento.</h1><p>Ingresa el código impreso en el documento. Revisaremos las fuentes habilitadas y mostraremos el emisor, la fecha y el resultado de la verificación.</p>
        <ul><li>Fuentes identificadas</li><li>Huella digital verificable</li><li>Respuesta con fecha y evidencia</li></ul>
      </div>
      <form className="verification-form" onSubmit={verify}>
        <label htmlFor="verification-code">Código del documento</label>
        <div className="verification-input"><input id="verification-code" value={code} onChange={(event) => setCode(event.target.value.toUpperCase())} minLength={6} maxLength={120} autoComplete="off" spellCheck={false} placeholder="Ej. DOC-DOC123456-PDF" required/><button disabled={loading}>{loading ? "Consultando…" : "Verificar"}</button></div>
        <small>El código se consulta únicamente para verificar su existencia, vigencia e integridad.</small>
        {error && <div className="verification-error" role="alert">{error}<button type="button" onClick={() => setError("")} aria-label="Cerrar">×</button></div>}
      </form>
    </div></section>
    {result && <section className="verification-result"><div className="portal-container">
      <header className={`verification-result-head state-${result.estado.toLowerCase()}`}><div className="verification-state-icon" aria-hidden="true">{result.estado === "VERIFICADO" ? "✓" : result.estado === "INVALIDO" ? "!" : "?"}</div><div><span>RESULTADO DE LA CONSULTA</span><h2>{labels[result.estado] || result.estado}</h2><p>{result.resumen}</p></div><dl><div><dt>Fuentes</dt><dd>{result.kpis.respondieron}/{result.kpis.consultadas}</dd></div><div><dt>Duración</dt><dd>{result.duracion_ms} ms</dd></div></dl></header>
      <div className="verification-sources">{result.fuentes.map((source) => <article key={source.codigo} className={`verification-source state-${source.resultado.toLowerCase()}`}><header><div><span>FUENTE</span><h3>{source.repositorio}</h3></div><b>{labels[source.resultado] || source.resultado.replaceAll("_", " ")}</b></header>
        {source.evidencia ? <dl>{Object.entries(source.evidencia).filter(([key]) => key !== "fuente_url").map(([key, value]) => <div key={key}><dt>{evidenceLabels[key] || key.replaceAll("_", " ")}</dt><dd>{display(value)}</dd></div>)}</dl> : <p>{source.resultado === "NO_ENCONTRADO" ? "La fuente respondió correctamente, pero no encontró este código." : "La fuente no entregó evidencia para esta consulta."}</p>}
        {Boolean(source.evidencia?.fuente_url) && <a href={String(source.evidencia?.fuente_url)} target="_blank" rel="noreferrer">Abrir fuente oficial ↗</a>}
        <small>Respuesta en {source.duracion_ms} ms</small>
      </article>)}</div>
      <footer className="verification-proof"><div><span>Identificador de consulta</span><code>{result.verificacion_id}</code></div><div><span>Consultado</span><strong>{display(result.consultado_en)}</strong></div><p>La verificación confirma la evidencia reportada por cada fuente al momento de la consulta. No reemplaza la revisión jurídica del contenido ni amplía los efectos de una firma electrónica.</p></footer>
    </div></section>}
    <section className="verification-help"><div className="portal-container"><span>¿NO ENCUENTRAS EL CÓDIGO?</span><h2>Revisa el pie del documento.</h2><p>Los documentos emitidos por Documenta muestran su código junto al sitio web. Si el documento proviene de otra fuente, utiliza el identificador de validación informado por su emisor.</p></div></section>
  </>;
}