"use client";
import Link from "next/link";
import { FormEvent, useMemo, useState } from "react";
import { dateTimeCL } from "../lib/datetime";
import { userMessage } from "../lib/messages";
const apiBase = process.env.NEXT_PUBLIC_API_BASE_URL || "/api/v1";
type Row = Record<string, unknown> & {
  editable?: boolean;
  requerido?: boolean;
};
export default function DocumentsManagement({
  rows,
  csrf,
  notify,
  canComplete,
  canReopen,
}: {
  rows: Row[];
  csrf: () => Promise<string>;
  notify: (message: string) => void;
  canComplete: boolean;
  canReopen: boolean;
}) {
  const [query, setQuery] = useState(""),
    [page, setPage] = useState(1),
    [editing, setEditing] = useState<Row | null>(null),
    [detail, setDetail] = useState<Row | null>(null),
    [loading, setLoading] = useState(false),
    pageSize = 12;
  const filtered = useMemo(
      () =>
        rows.filter(
          (row) =>
            !query ||
            Object.values(row).some((value) =>
              String(value ?? "")
                .toLowerCase()
                .includes(query.toLowerCase()),
            ),
        ),
      [rows, query],
    ),
    pages = Math.max(1, Math.ceil(filtered.length / pageSize)),
    visible = filtered.slice((page - 1) * pageSize, page * pageSize);
  async function open(row: Row) {
    setEditing(row);
    setLoading(true);
    try {
      const response = await fetch(`${apiBase}/panel/documents/${encodeURIComponent(String(row.folio))}`, {
          credentials: "include",
          cache: "no-store",
        }),
        body = await response.json();
      if (!response.ok) throw new Error(body.detail);
      setDetail(body);
    } catch (reason) {
      notify(
        userMessage(reason, "No fue posible cargar."),
      );
      setEditing(null);
    } finally {
      setLoading(false);
    }
  }
  async function save(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    if (!editing) return;
    const form = new FormData(event.currentTarget),
      fields = (detail?.campos || []) as Row[],
      token = await csrf(),
      response = await fetch(`${apiBase}/panel/documents/${encodeURIComponent(String(editing.folio))}`, {
        method: "PUT",
        credentials: "include",
        headers: { "Content-Type": "application/json", "X-CSRF-Token": token },
        body: JSON.stringify({
          respuestas: fields.filter((field) => field.tipo_dato !== "ARCHIVO").map((field) => ({
            campo_id: Number(field.campo_id),
            valor: String(form.get(`field-${field.campo_id}`) || ""),
          })),
        }),
      }),
      body = await response.json();
    if (!response.ok) {
      notify(body.detail || "No fue posible actualizar.");
      return;
    }
    notify("Documento actualizado correctamente.");
    setEditing(null);
  }
  async function transition(row: Row, action: "ready" | "reopen") {
    if (!confirm(`¿Confirmas el cambio de estado para ${row.folio}?`)) return;
    const token = await csrf(),
      response = await fetch(`${apiBase}/panel/documents/${encodeURIComponent(String(row.folio))}/${action}`, {
        method: "POST",
        credentials: "include",
        headers: { "X-CSRF-Token": token },
      }),
      body = await response.json();
    if (!response.ok) {
      notify(body.detail || "No fue posible cambiar el estado.");
      return;
    }
    row.estado = body.estado;
    row.editable = body.estado !== "REALIZADO";
    notify("Estado actualizado correctamente.");
    setPage((v) => v);
  }
  return (
    <section className="panel-card document-browser">
      <div className="card-heading">
        <div>
          <h2>Documentos</h2>
          <p className="muted-copy">
            Selecciona el folio para abrir el resumen completo.
          </p>
        </div>
      </div>
      <div className="table-toolbar">
        <input
          type="search"
          value={query}
          onChange={(event) => {
            setQuery(event.target.value);
            setPage(1);
          }}
          placeholder="Buscar folio, cliente, documento o notaría…"
        />
        <span>{filtered.length} documentos</span>
      </div>
      <div className="panel-table-wrap">
        <table>
          <thead>
            <tr>
              <th>Folio</th>
              <th>Cliente</th>
              <th>Documento</th>
              <th>Notaría</th>
              <th>Estado</th>
              <th>Fecha</th>
              <th>Acciones</th>
            </tr>
          </thead>
          <tbody>
            {visible.map((row) => (
              <tr key={String(row.id)}>
                <td>
                  <Link
                    className="folio-link"
                    href={`/panel/documento/${encodeURIComponent(String(row.folio))}`}
                  >
                    {String(row.folio)}
                  </Link>
                </td>
                <td>{String(row.cliente || "—")}</td>
                <td>{String(row.documento)}</td>
                <td>{String(row.notaria)}</td>
                <td>
                  <span
                    className={`status-pill status-${String(row.estado).toLowerCase()}`}
                  >
                    {String(row.estado)}
                  </span>
                </td>
                <td>{dateTimeCL(row.creada_en)}</td>
                <td>
                  <div className="document-actions">
                    <a
                      className="table-action"
                      href={`${apiBase}/panel/documents/${encodeURIComponent(String(row.folio))}/download?format=pdf`}
                      target="_blank"
                    >
                      PDF
                    </a>
                    <a
                      className="table-action"
                      href={`${apiBase}/panel/documents/${encodeURIComponent(String(row.folio))}/download?format=docx`}
                      target="_blank"
                    >
                      Word
                    </a>
                    {Boolean(row.editable) && (
                      <button
                        className="table-action"
                        onClick={() => void open(row)}
                      >
                        Editar
                      </button>
                    )}
                    {canComplete && Boolean(row.editable) && (
                      <button
                        className="table-action ready"
                        onClick={() => void transition(row, "ready")}
                      >
                        Marcar listo
                      </button>
                    )}
                    {canReopen && row.estado === "REALIZADO" && (
                      <button
                        className="table-action danger"
                        onClick={() => void transition(row, "reopen")}
                      >
                        Revertir
                      </button>
                    )}
                  </div>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
      <div className="table-pagination">
        <button disabled={page <= 1} onClick={() => setPage((v) => v - 1)}>
          Anterior
        </button>
        <span>
          Página {page} de {pages}
        </span>
        <button disabled={page >= pages} onClick={() => setPage((v) => v + 1)}>
          Siguiente
        </button>
      </div>
      {editing && (
        <div className="admin-modal-backdrop">
          <section className="admin-modal">
            <header>
              <h2>Editar {String(editing.folio)}</h2>
              <button className="modal-close" onClick={() => setEditing(null)}>
                ×
              </button>
            </header>
            <div className="admin-modal-content">
              {loading ? (
                <div className="panel-empty">Cargando…</div>
              ) : (
                <form className="profile-form" onSubmit={save}>
                  {((detail?.campos || []) as Row[]).filter((field) => field.tipo_dato !== "ARCHIVO").map((field) => (
                    <label key={String(field.campo_id)}>
                      {String(field.etiqueta)}
                      {Boolean(field.requerido) && " *"}
                      {field.tipo_dato === "COMUNA" ? (
                        <select
                          name={`field-${field.campo_id}`}
                          defaultValue={String(field.valor || "")}
                          required={Boolean(field.requerido)}
                        >
                          <option value="">Selecciona una comuna</option>
                          {((detail?.comunas || []) as Row[]).map((item) => (
                            <option key={String(item.codigo)} value={String(item.codigo)}>
                              {String(item.nombre)} · {String(item.region)}
                            </option>
                          ))}
                        </select>
                      ) : (
                        <input
                          name={`field-${field.campo_id}`}
                          type={
                            field.tipo_dato === "EMAIL"
                              ? "email"
                              : field.tipo_dato === "TELEFONO"
                                ? "tel"
                                : field.tipo_dato === "FECHA"
                                  ? "date"
                                  : ["ENTERO", "DECIMAL", "NUMERO"].includes(String(field.tipo_dato))
                                    ? "number"
                                    : "text"
                          }
                          defaultValue={String(field.valor || "")}
                          required={Boolean(field.requerido)}
                        />
                      )}
                    </label>
                  ))}
                  {((detail?.adjuntos || []) as Row[]).length > 0 && (
                    <div>
                      <strong>Archivos adjuntos</strong>
                      {((detail?.adjuntos || []) as Row[]).map((item) => (
                        <p key={String(item.id)}>
                          {String(item.etiqueta)}: <a href={`${apiBase}/panel/documents/${encodeURIComponent(String(editing.folio))}/attachments/${item.id}`} target="_blank" rel="noopener noreferrer">{String(item.nombre)}</a>
                        </p>
                      ))}
                    </div>
                  )}
                  <button className="button button-primary">Guardar</button>
                </form>
              )}
            </div>
          </section>
        </div>
      )}
    </section>
  );
}