"use client";

import { FormEvent, useEffect, useMemo, useState } from "react";

const apiBase = process.env.NEXT_PUBLIC_API_BASE_URL || "/api/v1";
type Row = Record<string, unknown>;
type EditableTab = "regions" | "communes" | "categories";
type Tab = EditableTab | "legal" | "gesnot_types" | "gesnot_errors" | "gesnot_states" | "gesnot_messages";

const tabs: Array<{ value: Tab; label: string }> = [
  { value: "regions", label: "Regiones" },
  { value: "communes", label: "Comunas" },
  { value: "categories", label: "Categorías" },
  { value: "legal", label: "Textos legales" },
  { value: "gesnot_types", label: "Tipos OT GesNot" },
  { value: "gesnot_states", label: "Estados GesNot" },
  { value: "gesnot_errors", label: "Códigos GesNot" },
  { value: "gesnot_messages", label: "Mensajes GesNot" },
];

export default function MaintainersManagement({
  data, csrf, notify,
}: {
  data: Row | null;
  csrf: () => Promise<string>;
  notify: (message: string) => void;
}) {
  const [tab, setTab] = useState<Tab>("regions");
  const [query, setQuery] = useState("");
  const [page, setPage] = useState(1);
  const [editing, setEditing] = useState<Row | null | false>(false);
  const [saving, setSaving] = useState(false);
  const [regions, setRegions] = useState<Row[]>(() => (data?.regions as Row[]) || []);
  const [communes, setCommunes] = useState<Row[]>(() => (data?.communes as Row[]) || []);
  const [categories, setCategories] = useState<Row[]>(() => (data?.categories as Row[]) || []);
  const [legal, setLegal] = useState<Row>(() => (data?.legal as Row) || {});
  useEffect(() => {
    setRegions((data?.regions as Row[]) || []);
    setCommunes((data?.communes as Row[]) || []);
    setCategories((data?.categories as Row[]) || []);
    setLegal((data?.legal as Row) || {});
    setPage(1);
  }, [data]);
  const rowsByTab: Record<Tab, Row[]> = {
    regions, communes, categories, legal: [],
    gesnot_types: (data?.gesnot_types as Row[]) || [],
    gesnot_errors: (data?.gesnot_errors as Row[]) || [],
    gesnot_states: (data?.gesnot_states as Row[]) || [],
    gesnot_messages: (data?.gesnot_messages as Row[]) || [],
  };
  const rows = rowsByTab[tab];
  const editable = tab === "regions" || tab === "communes" || tab === "categories";
  const filtered = useMemo(
    () => rows.filter((row) => !query || Object.values(row).some((value) =>
      String(value ?? "").toLowerCase().includes(query.toLowerCase()))),
    [rows, query],
  );
  const pageSize = 12;
  const pages = Math.max(1, Math.ceil(filtered.length / pageSize));
  const visible = filtered.slice((page - 1) * pageSize, page * pageSize);

  async function saveLegal(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    const form = new FormData(event.currentTarget);
    const body = {
      texto_consentimiento: String(form.get("texto_consentimiento") || ""),
      titulo_terminos: String(form.get("titulo_terminos") || ""),
      contenido_terminos: String(form.get("contenido_terminos") || ""),
      titulo_privacidad: String(form.get("titulo_privacidad") || ""),
      contenido_privacidad: String(form.get("contenido_privacidad") || ""),
    };
    setSaving(true);
    try {
      const token = await csrf();
      const response = await fetch(`${apiBase}/panel/admin/maintainers/legal`, {
        method: "PUT", credentials: "include",
        headers: { "Content-Type": "application/json", "X-CSRF-Token": token },
        body: JSON.stringify(body),
      });
      const result = await response.json();
      if (!response.ok) return notify(result.detail || "No fue posible guardar los textos legales.");
      setLegal(result);
      notify("Textos legales actualizados correctamente.");
    } finally { setSaving(false); }
  }

  async function save(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    if (!editable) return;
    const form = new FormData(event.currentTarget);
    const body = tab === "regions"
      ? { codigo: form.get("codigo"), nombre: form.get("nombre"), activo: form.get("activo") === "on" }
      : tab === "communes"
        ? {
            region_id: Number(form.get("region_id")),
            codigo: form.get("codigo"),
            codigo_gesnot: form.get("codigo_gesnot") ? Number(form.get("codigo_gesnot")) : null,
            nombre: form.get("nombre"),
            activo: form.get("activo") === "on",
          }
        : {
            nombre: form.get("nombre"), slug: form.get("slug"),
            orden: Number(form.get("orden")), activo: form.get("activo") === "on",
          };
    const id = editing && editing.id;
    setSaving(true);
    try {
      const token = await csrf();
      const response = await fetch(`${apiBase}/panel/admin/maintainers/${tab}${id ? `/${id}` : ""}`, {
        method: id ? "PUT" : "POST", credentials: "include",
        headers: { "Content-Type": "application/json", "X-CSRF-Token": token },
        body: JSON.stringify(body),
      });
      const result = await response.json();
      if (!response.ok) { notify(result.detail || "No fue posible guardar."); return; }
      const setter = tab === "regions" ? setRegions : tab === "communes" ? setCommunes : setCategories;
      setter((previous) => id
        ? previous.map((item) => Number(item.id) === Number(id) ? result : item)
        : [result, ...previous]);
      setEditing(false);
      notify("Mantenedor actualizado correctamente.");
    } finally { setSaving(false); }
  }

  function headers() {
    if (tab === "communes") return <><th>Comuna</th><th>Código interno</th><th>Código GesNot</th><th>Región</th><th>Estado</th><th /></>;
    if (tab === "categories") return <><th>Nombre</th><th>Slug</th><th>Orden</th><th>Estado</th><th /></>;
    if (tab === "gesnot_messages") return <><th>Mensaje</th><th>Posible causa / solución</th><th>Estado</th></>;
    if (tab === "gesnot_states") return <><th>Código</th><th>Estado de OT</th><th>Terminal</th><th>Estado</th></>;
    if (tab === "gesnot_types") return <><th>Código</th><th>Tipo de OT</th><th>Estado</th></>;
    if (tab === "gesnot_errors") return <><th>Código</th><th>Descripción</th><th>Estado</th></>;
    return <><th>Región</th><th>Código</th><th>Estado</th><th /></>;
  }

  function row(item: Row) {
    const status = <td>{item.activo ? "Activo" : "Inactivo"}</td>;
    const edit = editable ? <td><button className="table-action" onClick={() => setEditing(item)}>Editar</button></td> : null;
    if (tab === "communes") return <><td>{String(item.nombre)}</td><td>{String(item.codigo)}</td><td>{String(item.codigo_gesnot ?? "—")}</td><td>{String(item.region ?? regions.find((region) => Number(region.id) === Number(item.region_id))?.nombre ?? "—")}</td>{status}{edit}</>;
    if (tab === "categories") return <><td>{String(item.nombre)}</td><td>{String(item.slug)}</td><td>{String(item.orden)}</td>{status}{edit}</>;
    if (tab === "gesnot_messages") return <><td>{String(item.mensaje)}</td><td>{String(item.posible_causa_solucion)}</td>{status}</>;
    if (tab === "gesnot_states") return <><td>{String(item.codigo)}</td><td>{String(item.descripcion)}</td><td>{item.es_terminal ? "Sí" : "No"}</td>{status}</>;
    if (tab === "gesnot_types" || tab === "gesnot_errors") return <><td>{String(item.codigo)}</td><td>{String(item.descripcion)}</td>{status}</>;
    return <><td>{String(item.nombre)}</td><td>{String(item.codigo)}</td>{status}{edit}</>;
  }

  return <section className="panel-card management-browser">
    <div className="security-tabs">{tabs.map(({ value, label }) =>
      <button key={value} className={tab === value ? "is-active" : ""} onClick={() => {
        setTab(value); setQuery(""); setPage(1); setEditing(false);
      }}>{label}</button>)}</div>
    {tab === "legal" ? <form className="profile-form legal-settings-form" onSubmit={saveLegal}>
      <label>Texto junto a la aceptación
        <textarea name="texto_consentimiento" defaultValue={String(legal.texto_consentimiento || "")} required />
      </label>
      <label>Título de términos y condiciones
        <input name="titulo_terminos" defaultValue={String(legal.titulo_terminos || "")} required />
      </label>
      <label>Contenido de términos y condiciones
        <textarea name="contenido_terminos" defaultValue={String(legal.contenido_terminos || "")} required />
      </label>
      <label>Título de política de privacidad
        <input name="titulo_privacidad" defaultValue={String(legal.titulo_privacidad || "")} required />
      </label>
      <label>Contenido de política de privacidad
        <textarea name="contenido_privacidad" defaultValue={String(legal.contenido_privacidad || "")} required />
      </label>
      <button className="button button-primary" disabled={saving}>{saving ? "Guardando…" : "Guardar textos legales"}</button>
    </form> : <><div className="table-toolbar">
      <input type="search" value={query} onChange={(event) => { setQuery(event.target.value); setPage(1); }} placeholder="Buscar…" />
      <span>{filtered.length} registros</span>
      {editable && <button className="button button-primary" onClick={() => setEditing(null)}>Agregar</button>}
    </div>
    <div className="panel-table-wrap"><table><thead><tr>{headers()}</tr></thead>
      <tbody>{visible.map((item) => <tr key={`${tab}-${String(item.id ?? item.codigo)}`}>{row(item)}</tr>)}</tbody>
    </table></div>
    <div className="table-pagination">
      <button disabled={page <= 1} onClick={() => setPage((value) => value - 1)}>Anterior</button>
      <span>Página {page} de {pages}</span>
      <button disabled={page >= pages} onClick={() => setPage((value) => value + 1)}>Siguiente</button>
    </div></>}
    {editing !== false && editable && <div className="admin-modal-backdrop"><section className="admin-modal">
      <header><h2>{editing ? "Editar" : "Agregar"}</h2><button className="modal-close" onClick={() => setEditing(false)}>×</button></header>
      <div className="admin-modal-content"><form className="profile-form" onSubmit={save}>
        {tab === "communes" && <label>Región<select name="region_id" defaultValue={String(editing?.region_id || "")} required>
          {regions.map((item) => <option key={String(item.id)} value={String(item.id)}>{String(item.nombre)}</option>)}
        </select></label>}
        <label>Nombre<input name="nombre" defaultValue={String(editing?.nombre || "")} required /></label>
        {tab !== "categories" ? <>
          <label>Código interno<input name="codigo" defaultValue={String(editing?.codigo || "")} required /></label>
          {tab === "communes" && <label>Código GesNot<input name="codigo_gesnot" type="number" min="1" max="9999"
            defaultValue={editing?.codigo_gesnot == null ? "" : String(editing.codigo_gesnot)} placeholder="Ej. 294 para Santiago" /></label>}
        </> : <>
          <label>Slug<input name="slug" pattern="[a-z0-9]+(?:-[a-z0-9]+)*" defaultValue={String(editing?.slug || "")} required /></label>
          <label>Orden<input name="orden" type="number" min="0" defaultValue={Number(editing?.orden || 0)} /></label>
        </>}
        <label><input name="activo" type="checkbox" defaultChecked={!editing || Boolean(editing.activo)} /> Activo</label>
        <button className="button button-primary" disabled={saving}>{saving ? "Guardando…" : "Guardar"}</button>
      </form></div>
    </section></div>}
  </section>;
}