"use client";
import Link from "next/link";
import { FormEvent, useCallback, useEffect, useState } from "react";
import { useParams, useRouter } from "next/navigation";
const apiBase = process.env.NEXT_PUBLIC_API_BASE_URL || "/api/v1";
type Row = Record<string, unknown>;
export default function CredentialsPage() {
  const { id } = useParams<{ id: string }>(),
    router = useRouter(),
    [data, setData] = useState<Row | null>(null),
    [notice, setNotice] = useState(""),
    [error, setError] = useState(""),
    [editing, setEditing] = useState<string | null>(null),
    [busy, setBusy] = useState<string | null>(null);
  const load = useCallback(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/admin/entities/${id}/credentials`,
        { credentials: "include", cache: "no-store" },
      ),
      body = await response.json();
    if (!response.ok) {
      setError(body.detail || "No fue posible cargar las credenciales.");
      return;
    }
    setData(body);
  }, [id, router]);
  useEffect(() => {
    const timer = window.setTimeout(() => void load(), 0);
    return () => window.clearTimeout(timer);
  }, [load]);
  useEffect(() => {
    if (!notice && !error) return;
    const timer = setTimeout(() => {
      setNotice("");
      setError("");
    }, 5000);
    return () => clearTimeout(timer);
  }, [notice, error]);
  async function csrf() {
    let token = sessionStorage.getItem("documenta:csrf");
    if (!token) {
      const response = await fetch(`${apiBase}/auth/csrf`, {
        credentials: "include",
      });
      token = (await response.json()).csrf_token;
      sessionStorage.setItem("documenta:csrf", token!);
    }
    return token!;
  }
  async function save(provider: string, event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    setBusy(provider);
    const form = new FormData(event.currentTarget),
      token = await csrf(),
      response = await fetch(
        `${apiBase}/panel/admin/entities/${id}/credentials`,
        {
          method: "POST",
          credentials: "include",
          headers: {
            "Content-Type": "application/json",
            "X-CSRF-Token": token,
          },
          body: JSON.stringify({
            proveedor: provider,
            ambiente: form.get("ambiente"),
            secreto: form.get("secreto"),
            identificador_publico: form.get("identificador_publico"),
            endpoint_base: form.get("endpoint_base"),
            fingerprint: null,
            motivo: form.get("motivo"),
          }),
        },
      ),
      body = await response.json();
    setBusy(null);
    if (!response.ok) {
      setError(body.detail || "No fue posible guardar la credencial.");
      return;
    }
    await load();
    setEditing(null);
    setNotice(`Credencial ${provider} guardada correctamente.`);
  }
  async function remove(provider: string) {
    if (!confirm(`¿Eliminar la credencial ${provider}?`)) return;
    setBusy(provider);
    const token = await csrf(),
      response = await fetch(
        `${apiBase}/panel/admin/entities/${id}/credentials/${provider}`,
        {
          method: "DELETE",
          credentials: "include",
          headers: { "X-CSRF-Token": token },
        },
      ),
      body = await response.json();
    setBusy(null);
    if (!response.ok) {
      setError(body.detail || "No fue posible eliminar la credencial.");
      return;
    }
    await load();
    setNotice(`Credencial ${provider} eliminada correctamente.`);
  }
  async function testGesnot() {
    setBusy("GESNOT");
    const token = await csrf(),
      response = await fetch(
        `${apiBase}/panel/admin/entities/${id}/credentials/gesnot/test`,
        {
          method: "POST",
          credentials: "include",
          headers: { "X-CSRF-Token": token },
        },
      ),
      body = await response.json();
    setBusy(null);
    if (!response.ok) {
      setError(body.detail || "No fue posible probar GesNot.");
      return;
    }
    setNotice(
      body.notaria_habilitada
        ? "Conexión GesNot validada correctamente."
        : "GesNot respondió, pero la notaría no está habilitada para esta keyCliente.",
    );
  }
  async function testWebpay() {
    setBusy("WEBPAY");
    setError("");
    const token = await csrf(),
      response = await fetch(
        `${apiBase}/panel/admin/entities/${id}/credentials/webpay/test`,
        {
          method: "POST",
          credentials: "include",
          headers: { "X-CSRF-Token": token },
        },
      ),
      body = await response.json();
    setBusy(null);
    if (!response.ok) {
      setError(body.detail || "No fue posible probar Webpay.");
      return;
    }
    setNotice(body.mensaje || "Conexión Webpay validada correctamente.");
  }
  async function testPaymentProvider(provider: "KLAP" | "GETNET") {
    setBusy(provider); setError("");
    const token = await csrf(), response = await fetch(
      `${apiBase}/panel/admin/entities/${id}/credentials/${provider.toLowerCase()}/test`,
      { method:"POST", credentials:"include", headers:{"X-CSRF-Token":token} });
    const body = await response.json(); setBusy(null);
    if (!response.ok) { setError(body.detail || `No fue posible probar ${provider}.`); return; }
    setNotice(body.mensaje || `Conexión ${provider} validada correctamente.`);
  }
  async function copyText(value: string, label: string) {
    try {
      await navigator.clipboard.writeText(value);
      setError("");
      setNotice(`${label} copiado al portapapeles.`);
    } catch {
      setNotice("");
      setError("El navegador no permitió copiar automáticamente. Selecciona el texto y cópialo manualmente.");
    }
  }
  if (!data)
    return (
      <main className="summary-page">
        <div className="panel-empty">
          {error || "Cargando credenciales protegidas…"}
        </div>
      </main>
    );
  const notary = (data.entidad || data.notaria) as Row,
    credentials = (data.credenciales || []) as Row[],
    iframeUrl = String(notary.iframe_url || ""),
    iframeCode = `<iframe\n  src="${iframeUrl}"\n  title="Trámites en línea"\n  width="100%"\n  height="760"\n  loading="lazy"\n  style="border:0; width:100%; min-height:760px"\n></iframe>`;
  return (
    <main className="summary-page">
      <header className="summary-header">
        <div>
          <Link href="/panel" className="back-link">
            ← Volver al panel
          </Link>
          <span className="section-kicker">Integraciones protegidas</span>
          <h1>Credenciales</h1>
          <p>
            {String(notary.nombre_fantasia)} · {String(notary.rut)}
          </p>
        </div>
      </header>
      {(notice || error) && (
        <div className={`app-toast ${notice ? "is-success" : "is-error"}`}>
          <strong>{notice ? "Cambios guardados" : "Atención"}</strong>
          <span>{notice || error}</span>
          <button
            onClick={() => {
              setNotice("");
              setError("");
            }}
          >
            ×
          </button>
        </div>
      )}
      <section className="panel-card iframe-integration-card">
        <div className="card-heading">
          <div>
            <span className="section-kicker">Integración web</span>
            <h2>Catálogo para iframe</h2>
            <p className="muted-copy">
              Esta ruta muestra únicamente los documentos habilitados para esta entidad.
            </p>
          </div>
          <span className="status-pill status-realizado">Disponible</span>
        </div>
        <div className="iframe-integration-grid">
          <label>
            Ruta pública
            <input value={iframeUrl} readOnly onFocus={(event) => event.currentTarget.select()} />
          </label>
          <label>
            Código HTML
            <textarea value={iframeCode} readOnly onFocus={(event) => event.currentTarget.select()} />
          </label>
        </div>
        <div className="wizard-actions iframe-actions">
          <button className="button button-secondary" type="button"
            onClick={() => void copyText(iframeUrl, "Ruta del iframe")}>Copiar ruta</button>
          <button className="button button-secondary" type="button"
            onClick={() => void copyText(iframeCode, "Código iframe")}>Copiar HTML</button>
          <a className="button button-primary" href={iframeUrl} target="_blank" rel="noopener noreferrer">
            Abrir catálogo
          </a>
        </div>
      </section>
      <div className="credential-grid credential-page-grid">
        {(["GESNOT", "WEBPAY", "KLAP", "GETNET"] as const).map((provider) => {
          const current = credentials.find((c) => c.proveedor === provider),
            open = !current || editing === provider;
          return (
            <article
              className="panel-card credential-provider-card"
              key={provider}
            >
              <div className="card-heading">
                <div>
                  <span className="section-kicker">{provider}</span>
                  <h2>
                    {current
                      ? "Credencial configurada"
                      : "Pendiente de configuración"}
                  </h2>
                  <p className="muted-copy">
                    {current
                      ? `${String(current.ambiente)} · versión ${String(current.version)}`
                      : provider === "GESNOT" ? "Solo puede existir una credencial activa."
                      : "Puede permanecer activo junto con los otros medios de pago."}
                  </p>
                </div>
                {current && !open && (
                  <span className="status-pill status-realizado">Activa</span>
                )}
              </div>
              {open ? (
                <form
                  className="profile-form"
                  onSubmit={(event) => void save(provider, event)}
                >
                  <label>
                    Ambiente
                    <select
                      name="ambiente"
                      defaultValue={String(current?.ambiente || "INTEGRACION")}
                      onChange={(event) => {
                        if (provider !== "GETNET" || current) return;
                        const form = event.currentTarget.form;
                        if (!form) return;
                        const login = form.elements.namedItem("identificador_publico") as HTMLInputElement;
                        const secret = form.elements.namedItem("secreto") as HTMLInputElement;
                        const endpoint = form.elements.namedItem("endpoint_base") as HTMLInputElement;
                        if (event.currentTarget.value === "INTEGRACION") {
                          login.value = "7ffbb7bf1f7361b1200b2e8d74e1d76f";
                          secret.value = "SnZP3D63n3I9dH9O";
                          endpoint.value = "https://checkout.test.getnet.cl";
                        } else {
                          login.value = ""; secret.value = "";
                          endpoint.value = "https://checkout.getnet.cl";
                        }
                      }}
                    >
                      <option value="INTEGRACION">Integración</option>
                      <option value="PRODUCCION">Producción</option>
                    </select>
                  </label>
                  <label>
                    {provider === "GESNOT" ? "keyCliente"
                      : provider === "WEBPAY" ? "API Key / secreto Webpay"
                      : provider === "GETNET" ? "SecretKey Getnet (genera TranKey)" : "API Key Klap"}
                    <input
                      name="secreto"
                      type="password"
                      minLength={8}
                      defaultValue={!current && provider === "GETNET" ? "SnZP3D63n3I9dH9O" : ""}
                      required
                    />
                  </label>
                  <label>
                    {provider === "GESNOT" ? "ID notaría GesNot"
                      : provider === "GETNET" ? "Login Getnet"
                      : provider === "WEBPAY" ? "Código de comercio" : "Identificador comercial (opcional)"}
                    <input
                      name="identificador_publico"
                      defaultValue={String(
                        current?.identificador_publico ||
                          (!current && provider === "GETNET" ? "7ffbb7bf1f7361b1200b2e8d74e1d76f" : ""),
                      )}
                      required={provider !== "KLAP"}
                    />
                  </label>
                  <label>
                    Endpoint base
                    <input
                      name="endpoint_base"
                      type="url"
                      defaultValue={String(
                        current?.endpoint_base ||
                          (provider === "GESNOT" ? "https://api.gesnot.cl/ot"
                           : provider === "WEBPAY" ? "https://webpay3gint.transbank.cl"
                           : provider === "GETNET" ? "https://checkout.test.getnet.cl"
                           : "https://api-pasarela-sandbox.mcdesaqa.cl/payment-gateway/v1/orders"),
                      )}
                    />
                  </label>
                  <label>
                    Motivo
                    <input name="motivo" minLength={5} required />
                  </label>
                  <div className="wizard-actions">
                    {current && (
                      <button
                        type="button"
                        className="button button-secondary"
                        onClick={() => setEditing(null)}
                      >
                        Cancelar
                      </button>
                    )}
                    <button
                      className="button button-primary"
                      disabled={busy === provider}
                    >
                      {busy === provider
                        ? "Cifrando y guardando…"
                        : "Guardar credencial"}
                    </button>
                  </div>
                </form>
              ) : (
                <div className="wizard-actions">
                  {provider === "GESNOT" && (
                    <button
                      className="button button-secondary"
                      disabled={busy === provider}
                      onClick={() => void testGesnot()}
                    >
                      Probar conexión
                    </button>
                  )}
                  {provider === "WEBPAY" && (
                    <button
                      className="button button-secondary"
                      disabled={busy === provider}
                      onClick={() => void testWebpay()}
                    >
                      {busy === provider ? "Probando…" : "Probar conexión"}
                    </button>
                  )}
                  {(provider === "KLAP" || provider === "GETNET") && (
                    <button className="button button-secondary" disabled={busy === provider}
                      onClick={() => void testPaymentProvider(provider)}>
                      {busy === provider ? "Probando…" : "Probar conexión"}
                    </button>
                  )}
                  <button
                    className="button button-secondary"
                    onClick={() => setEditing(provider)}
                  >
                    Editar / reemplazar
                  </button>
                  <button
                    className="button button-danger"
                    disabled={busy === provider}
                    onClick={() => void remove(provider)}
                  >
                    {busy === provider ? "Eliminando…" : "Eliminar"}
                  </button>
                </div>
              )}
            </article>
          );
        })}
      </div>
    </main>
  );
}