"use client";

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

const apiBase = process.env.NEXT_PUBLIC_API_BASE_URL || "/api/v1";

type CmsBlock = {
  id?: number;
  codigo: string;
  tipo: string;
  titulo: string;
  bajada?: string | null;
  contenido: Record<string, unknown>;
  orden: number;
  activo: boolean;
};

type CmsData = {
  titulo?: string;
  meta_titulo?: string;
  meta_descripcion?: string;
  estado?: "BORRADOR" | "PUBLICADA";
  actualizado_en?: string;
  bloques?: CmsBlock[];
  analitica?: Record<string, number>;
};

export default function PortalContentManagement({
  data,
  csrf,
  notify,
  onSaved,
}: {
  data: Record<string, unknown> | null;
  csrf: () => Promise<string>;
  notify: (message: string) => void;
  onSaved: (data: Record<string, unknown>) => void;
}) {
  const source = (data || {}) as CmsData;
  const [saving, setSaving] = useState(false);
  const blocks = useMemo(() => source.bloques || [], [source.bloques]);

  async function save(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    setSaving(true);
    try {
      const form = new FormData(event.currentTarget);
      const payloadBlocks = blocks.map((block) => {
        const raw = String(form.get(`contenido_${block.codigo}`) || "{}");
        let contenido: Record<string, unknown>;
        try {
          contenido = JSON.parse(raw) as Record<string, unknown>;
        } catch {
          throw new Error(`El JSON del bloque ${block.codigo} no es válido.`);
        }
        return {
          codigo: block.codigo,
          tipo: block.tipo,
          titulo: String(form.get(`titulo_${block.codigo}`) || ""),
          bajada: String(form.get(`bajada_${block.codigo}`) || "") || null,
          contenido,
          orden: Number(form.get(`orden_${block.codigo}`) || 0),
          activo: form.get(`activo_${block.codigo}`) === "on",
        };
      });
      const token = await csrf();
      const response = await fetch(`${apiBase}/panel/admin/portal-content`, {
        method: "PUT",
        credentials: "include",
        headers: { "Content-Type": "application/json", "X-CSRF-Token": token },
        body: JSON.stringify({
          titulo: form.get("titulo"),
          meta_titulo: form.get("meta_titulo"),
          meta_descripcion: form.get("meta_descripcion"),
          estado: form.get("estado"),
          bloques: payloadBlocks,
        }),
      });
      const body = await response.json();
      if (!response.ok) {
        const detail = Array.isArray(body.detail)
          ? body.detail.map((item: { msg?: string }) => item.msg).join(" · ")
          : body.detail;
        throw new Error(detail || "No fue posible guardar el portal.");
      }
      onSaved({ ...(body.pagina || {}), analitica: source.analitica || {} });
      notify("Portal público actualizado correctamente.");
    } catch (reason) {
      notify(userMessage(reason, "No fue posible guardar el portal."));
    } finally {
      setSaving(false);
    }
  }

  if (!source.bloques) {
    return <div className="panel-empty">No hay configuración del portal disponible.</div>;
  }

  return (
    <form className="cms-editor" onSubmit={save}>
      <section className="panel-card cms-intro-card">
        <div>
          <span className="section-kicker">NÚCLEO PÚBLICO</span>
          <h2>Contenido de documenta.cl</h2>
          <p>
            Edita la portada institucional. Esto no modifica el catálogo, los pagos ni el
            flujo de solicitudes de tramites.documenta.cl.
          </p>
        </div>
        <a className="button button-secondary" href="https://documenta.cl" target="_blank" rel="noreferrer">
          Ver portal ↗
        </a>
      </section>

      <div className="metrics-grid cms-metrics">
        {Object.entries(source.analitica || {}).map(([key, value]) => (
          <article className="metric-card" key={key}>
            <small>{key.replaceAll("_", " ")}</small>
            <strong>{Number(value || 0).toLocaleString("es-CL")}</strong>
          </article>
        ))}
      </div>

      <section className="panel-card profile-form cms-page-settings">
        <h2>Publicación y SEO</h2>
        <label>
          Nombre interno
          <input name="titulo" defaultValue={source.titulo} required />
        </label>
        <label>
          Título para buscadores
          <input name="meta_titulo" defaultValue={source.meta_titulo} maxLength={180} required />
        </label>
        <label>
          Descripción para buscadores
          <textarea name="meta_descripcion" defaultValue={source.meta_descripcion} rows={3} maxLength={500} required />
        </label>
        <label>
          Estado
          <select name="estado" defaultValue={source.estado || "BORRADOR"}>
            <option value="PUBLICADA">Publicada</option>
            <option value="BORRADOR">Borrador</option>
          </select>
        </label>
      </section>

      <div className="cms-block-list">
        {blocks.map((block) => (
          <section className="panel-card profile-form cms-block-card" key={block.codigo}>
            <header>
              <div>
                <small>{block.tipo} · {block.codigo}</small>
                <h2>{block.titulo}</h2>
              </div>
              <label className="cms-toggle">
                <input type="checkbox" name={`activo_${block.codigo}`} defaultChecked={block.activo} />
                Visible
              </label>
            </header>
            <label>
              Título
              <input name={`titulo_${block.codigo}`} defaultValue={block.titulo} required />
            </label>
            <label>
              Bajada
              <textarea name={`bajada_${block.codigo}`} defaultValue={block.bajada || ""} rows={3} />
            </label>
            <label>
              Contenido estructurado
              <textarea
                className="cms-json-input"
                name={`contenido_${block.codigo}`}
                defaultValue={JSON.stringify(block.contenido, null, 2)}
                rows={12}
                spellCheck={false}
              />
              <small>Conserva las claves; puedes cambiar textos, etiquetas, URLs y elementos.</small>
            </label>
            <label>
              Orden
              <input type="number" min="0" max="1000" name={`orden_${block.codigo}`} defaultValue={block.orden} />
            </label>
          </section>
        ))}
      </div>

      <div className="cms-save-bar">
        <span>Los cambios publicados se verán en documenta.cl.</span>
        <button className="button button-primary" disabled={saving}>
          {saving ? "Guardando…" : "Guardar portal"}
        </button>
      </div>
    </form>
  );
}