"use client";
/* eslint-disable react-hooks/set-state-in-effect, react-hooks/exhaustive-deps */
import { FormEvent, useEffect, useState } from "react";
const apiBase = process.env.NEXT_PUBLIC_API_BASE_URL || "/api/v1";
type Row = Record<string, unknown>;
export default function OffersManagement({
  csrf,
  notify,
  canManageCommission,
}: {
  csrf: () => Promise<string>;
  notify: (message: string) => void;
  canManageCommission: boolean;
}) {
  const [notaries, setNotaries] = useState<Row[]>([]);
  const [selected, setSelected] = useState("");
  const [items, setItems] = useState<Row[]>([]);
  const [gesnotTypes, setGesnotTypes] = useState<Row[]>([]);
  const [territory, setTerritory] = useState<Record<string, Row[]>>({});
  const [editing, setEditing] = useState<Row | null>(null);
  const [coverageMode, setCoverageMode] = useState("NACIONAL");
  const [connectorMode, setConnectorMode] = useState("NINGUNO");
  const [query, setQuery] = useState("");
  const [commissionDraft, setCommissionDraft] = useState<number | null>(null);
  const [commissionScope, setCommissionScope] = useState("FUTURO");
  const [commissionFrom, setCommissionFrom] = useState("");
  const [commissionTo, setCommissionTo] = useState("");
  const [commissionReason, setCommissionReason] = useState("");
  const [savingCommission, setSavingCommission] = useState(false);
  const [loading, setLoading] = useState(true);
  async function load(id = "") {
    setLoading(true);
    try {
      const response = await fetch(
        `${apiBase}/panel/offers${id ? `?notaria_id=${id}` : ""}`,
        { credentials: "include", cache: "no-store" },
      );
      const body = await response.json();
      if (!response.ok) throw new Error(body.detail || "No fue posible cargar las ofertas.");
      const entities = body.entidades || body.notarias || [];
      setNotaries(entities);
      setSelected(String(body.selected_entidad_id || body.selected_notaria_id || ""));
      setItems(body.items || []);
      setGesnotTypes(body.gesnot_types || []);
      setTerritory(body.territorio || {});
    } catch (reason) {
      setNotaries([]);setSelected("");setItems([]);setTerritory({});
      notify(reason instanceof Error ? reason.message : "No fue posible cargar las ofertas.");
    } finally { setLoading(false); }
  }
  useEffect(() => {
    void load();
  }, []);
  async function save(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    if (!editing || !selected) return;
    const form = new FormData(event.currentTarget),
      token = await csrf();
    if (form.get("tipo_cobertura") === "ENTIDAD") {
      const jurisdictionResponse = await fetch(
        `${apiBase}/panel/offers/entities/${selected}/jurisdictions`,
        {
          method: "PUT",
          credentials: "include",
          headers: { "Content-Type": "application/json", "X-CSRF-Token": token },
          body: JSON.stringify({
            jurisdiccion_ids: form.getAll("entity_jurisdiccion_ids").map(Number),
          }),
        },
      );
      const jurisdictionBody = await jurisdictionResponse.json();
      if (!jurisdictionResponse.ok) {
        notify(jurisdictionBody.detail || "No fue posible guardar la jurisdicción de la entidad.");
        return;
      }
    }
    const response = await fetch(
      `${apiBase}/panel/admin/matters/${editing.materia_id}/offers`,
      {
        method: "PUT",
        credentials: "include",
        headers: { "Content-Type": "application/json", "X-CSRF-Token": token },
        body: JSON.stringify({
          notaria_id: Number(selected),
          conector_post_pago: connectorMode,
          gesnot_tipo_ot: Number(form.get("gesnot_tipo_ot") || editing.gesnot_tipo_ot || 2),
          gesnot_materia: form.get("gesnot_materia") || editing.gesnot_materia || String(editing.nombre).toUpperCase(),
          precio: Number(form.get("precio")),
          plazo_estimado_horas: form.get("plazo_estimado_horas")
            ? Number(form.get("plazo_estimado_horas"))
            : null,
          activo: form.get("activo") === "on",
          tipo_cobertura: form.get("tipo_cobertura"),
          comuna_ids: form.getAll("comuna_ids").map(Number),
          jurisdiccion_ids: form.getAll("jurisdiccion_ids").map(Number),
          corte_ids: form.getAll("corte_ids").map(Number),
        }),
      },
    );
    const body = await response.json();
    if (!response.ok) {
      notify(body.detail || "No fue posible guardar la oferta.");
      return;
    }
    await load(selected);
    setEditing(null);
    notify("Oferta y cobertura actualizadas correctamente.");
  }
  async function commission(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    if (commissionDraft === null) return;
    if (commissionScope === "RANGO" && (!commissionFrom || !commissionTo)) {
      notify("Selecciona las fechas de inicio y término.");
      return;
    }
    setSavingCommission(true);
    const token = await csrf();
    const response = await fetch(
      `${apiBase}/panel/offers/notaries/${selected}/commission`,
      {
        method: "PUT",
        credentials: "include",
        headers: { "Content-Type": "application/json", "X-CSRF-Token": token },
        body: JSON.stringify({
          porcentaje: commissionDraft,
          alcance: commissionScope,
          desde: commissionScope === "RANGO" ? commissionFrom : null,
          hasta: commissionScope === "RANGO" ? commissionTo : null,
          motivo: commissionReason || `Cambio de comisión: ${commissionScope}`,
        }),
      },
    );
    const body = await response.json();
    setSavingCommission(false);
    if (!response.ok) {
      notify(body.detail || "No fue posible actualizar la comisión.");
      return;
    }
    await load(selected);
    setCommissionDraft(null);
    notify(`Comisión actualizada. ${Number(body.documentos_recalculados || 0)} documento(s) recalculado(s).`);
  }
  const current = notaries.find((item) => String(item.id) === selected),
    usesGesnot = Boolean(editing) && ((current?.capacidades || []) as unknown[]).includes("NOTARIA") &&
      ((editing?.capacidades || []) as unknown[]).includes("NOTARIA"),
    visible = items.filter(
      (item) =>
        !query ||
        Object.values(item).some((value) =>
          String(value ?? "")
            .toLowerCase()
            .includes(query.toLowerCase()),
        ),
    );
  return (
    <section className="panel-card management-browser">
      <div className="card-heading">
        <div>
          <h2>Servicios y ofertas</h2>
          <p className="muted-copy">
            Configura qué servicios ofrece cada entidad, su valor y territorio.
          </p>
        </div>
        {canManageCommission && (
          <form className="commission-form" onSubmit={(event) => {
            event.preventDefault();
            const value = Number(new FormData(event.currentTarget).get("porcentaje"));
            setCommissionDraft(value);
            setCommissionScope("FUTURO");
            setCommissionFrom("");
            setCommissionTo("");
            setCommissionReason("");
          }}>
            <label>
              Comisión %
              <input
                name="porcentaje"
                type="number"
                min="0"
                max="100"
                step="0.01"
                key={String(current?.porcentaje_comision)}
                defaultValue={Number(current?.porcentaje_comision || 10)}
              />
            </label>
            <button className="table-action">Guardar</button>
          </form>
        )}
      </div>
      <div className="table-toolbar">
        <select
          value={selected}
          disabled={loading || !notaries.length}
          onChange={(event) => {
            setSelected(event.target.value);
            void load(event.target.value);
          }}
        >
          {!notaries.length && <option value="">{loading ? "Cargando entidades…" : "No hay entidades disponibles"}</option>}
          {notaries.map((item) => (
            <option key={String(item.id)} value={String(item.id)}>
              {String(item.nombre_fantasia)}
            </option>
          ))}
        </select>
        <input
          type="search"
          value={query}
          onChange={(event) => setQuery(event.target.value)}
          placeholder="Buscar servicio o categoría…"
        />
        <span>{visible.length} servicios compatibles</span>
      </div>
      <div className="panel-table-wrap">
        <table>
          <thead>
            <tr>
              <th>Servicio</th>
              <th>Categoría</th>
              <th>Estado oferta</th>
              <th>Precio</th>
              <th>Cobertura</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            {visible.map((item) => (
              <tr key={String(item.materia_id)}>
                <td>
                  <strong>{String(item.nombre)}</strong>
                  <small>{String(item.codigo)}</small>
                </td>
                <td>{String(item.categoria)}</td>
                <td>
                  {item.oferta_id
                    ? item.activo
                      ? "Activa"
                      : "Inactiva"
                    : "Sin configurar"}
                </td>
                <td>
                  {item.precio
                    ? `$${Number(item.precio).toLocaleString("es-CL")}`
                    : "—"}
                </td>
                <td>{String(item.tipo_cobertura || "NACIONAL").toLowerCase()}</td>
                <td>
                  <button
                    className="table-action"
                    onClick={() => {
                      setEditing(item);
                      setCoverageMode(String(item.tipo_cobertura || "NACIONAL"));
                      setConnectorMode(String(item.conector_post_pago || "NINGUNO"));
                    }}
                  >
                    Configurar
                  </button>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
      {editing && (
        <div className="admin-modal-backdrop">
          <section className="admin-modal">
            <header>
              <h2>{String(editing.nombre)}</h2>
              <button className="modal-close" onClick={() => setEditing(null)}>
                ×
              </button>
            </header>
            <div className="admin-modal-content">
              <form className="profile-form" onSubmit={save}>
                <label>
                  Entrega posterior al pago
                  <select
                    name="conector_post_pago"
                    value={connectorMode}
                    onChange={(event) => setConnectorMode(event.target.value)}
                  >
                    <option value="NINGUNO">Bandeja de la entidad</option>
                    {usesGesnot && <option value="GESNOT">GesNot — crear OT automáticamente</option>}
                  </select>
                  <small className="muted-copy">
                    La solicitud pagada siempre queda en Documenta; el conector externo es opcional por oferta.
                  </small>
                </label>
                {usesGesnot && connectorMode === "GESNOT" && (<>
                  <label>
                    Tipo de documento GesNot
                    <select name="gesnot_tipo_ot" defaultValue={String(editing.gesnot_tipo_ot || 2)} required>
                      {gesnotTypes.map((type) => (
                        <option key={String(type.codigo)} value={String(type.codigo)}>
                          {String(type.codigo)} — {String(type.descripcion)}
                        </option>
                      ))}
                    </select>
                  </label>
                  <label>
                    Materia enviada a GN
                    <input
                      name="gesnot_materia"
                      defaultValue={String(editing.gesnot_materia || editing.nombre).toUpperCase()}
                      required
                    />
                  </label>
                </>)}
                <div className="form-pair">
                  <label>
                    Precio
                    <input
                      name="precio"
                      type="number"
                      min="0"
                      defaultValue={Number(editing.precio || 0)}
                      required
                    />
                  </label>
                  <label>
                    Plazo horas
                    <input
                      name="plazo_estimado_horas"
                      type="number"
                      min="1"
                      defaultValue={
                        editing.plazo_estimado_horas
                          ? Number(editing.plazo_estimado_horas)
                          : undefined
                      }
                    />
                  </label>
                </div>
                <label>
                  Cobertura territorial
                  <select
                    name="tipo_cobertura"
                    value={coverageMode}
                    onChange={(event) => setCoverageMode(event.target.value)}
                  >
                    <option value="NACIONAL">Nacional</option>
                    <option value="ENTIDAD">Jurisdicción de la entidad</option>
                    <option value="PERSONALIZADA">Personalizada</option>
                  </select>
                </label>
                {coverageMode === "ENTIDAD" && (
                  <label>
                    Jurisdicciones de la entidad
                    <select
                      name="entity_jurisdiccion_ids"
                      multiple
                      size={7}
                      required
                      defaultValue={(territory.jurisdicciones_entidad || []).map((item) => String(item.jurisdiccion_id))}
                    >
                      {(territory.jurisdicciones || []).map((item) => (
                        <option key={String(item.id)} value={String(item.id)}>
                          {String(item.nombre)} — {String(item.corte)}
                        </option>
                      ))}
                    </select>
                    <small className="muted-copy">Esta selección se reutiliza en todas las ofertas con cobertura institucional.</small>
                  </label>
                )}
                {coverageMode === "PERSONALIZADA" && (
                  <div className="coverage-grid">
                    <label>
                      Comunas
                      <select name="comuna_ids" multiple size={7} defaultValue={((editing.comuna_ids || []) as unknown[]).map(String)}>
                        {(territory.comunas || []).map((item) => (
                          <option key={String(item.id)} value={String(item.id)}>
                            {String(item.nombre)} — {String(item.region)}
                          </option>
                        ))}
                      </select>
                    </label>
                    <label>
                      Jurisdicciones
                      <select name="jurisdiccion_ids" multiple size={7} defaultValue={((editing.jurisdiccion_ids || []) as unknown[]).map(String)}>
                        {(territory.jurisdicciones || []).map((item) => (
                          <option key={String(item.id)} value={String(item.id)}>
                            {String(item.nombre)} — {String(item.corte)}
                          </option>
                        ))}
                      </select>
                    </label>
                    <label>
                      Cortes de Apelaciones
                      <select name="corte_ids" multiple size={7} defaultValue={((editing.corte_ids || []) as unknown[]).map(String)}>
                        {(territory.cortes || []).map((item) => (
                          <option key={String(item.id)} value={String(item.id)}>{String(item.nombre)}</option>
                        ))}
                      </select>
                    </label>
                    <small className="muted-copy">Usa Ctrl/Cmd para seleccionar más de un territorio.</small>
                  </div>
                )}
                <label>
                  <input
                    name="activo"
                    type="checkbox"
                    defaultChecked={
                      editing.oferta_id ? Boolean(editing.activo) : true
                    }
                  />{" "}
                  Oferta activa
                </label>
                <button className="button button-primary">
                  Guardar oferta
                </button>
              </form>
            </div>
          </section>
        </div>
      )}
      {commissionDraft !== null && (
        <div className="admin-modal-backdrop">
          <section className="admin-modal commission-scope-modal" role="dialog" aria-modal="true" aria-labelledby="commission-title">
            <header>
              <div>
                <small className="eyebrow">CAMBIO DE COMISIÓN</small>
                <h2 id="commission-title">¿Desde cuándo se aplicará {commissionDraft}%?</h2>
              </div>
              <button className="modal-close" type="button" onClick={() => setCommissionDraft(null)}>×</button>
            </header>
            <div className="admin-modal-content">
              <form className="profile-form" onSubmit={commission}>
                <div className="commission-scope-options">
                  {[
                    ["FUTURO", "Desde ahora en adelante", "No modifica documentos ya realizados."],
                    ["MES_ACTUAL", "Todo este mes", "Recalcula los documentos realizados durante el mes actual."],
                    ["SIEMPRE", "Desde siempre", "Recalcula todo el historial de esta notaría."],
                    ["RANGO", "Rango de fechas", "Recalcula únicamente los documentos realizados en el período."],
                  ].map(([value, title, description]) => (
                    <label className={`commission-scope-option ${commissionScope === value ? "selected" : ""}`} key={value}>
                      <input type="radio" name="alcance" value={value} checked={commissionScope === value} onChange={() => setCommissionScope(value)} />
                      <span><strong>{title}</strong><small>{description}</small></span>
                    </label>
                  ))}
                </div>
                {commissionScope === "RANGO" && (
                  <div className="form-pair">
                    <label>Desde<input type="date" value={commissionFrom} onChange={(e) => setCommissionFrom(e.target.value)} required /></label>
                    <label>Hasta<input type="date" value={commissionTo} onChange={(e) => setCommissionTo(e.target.value)} required /></label>
                  </div>
                )}
                <label>Motivo del cambio<textarea value={commissionReason} onChange={(e) => setCommissionReason(e.target.value)} minLength={5} required placeholder="Ej.: Acuerdo comercial vigente desde agosto." /></label>
                <div className="modal-actions">
                  <button type="button" className="button button-secondary" disabled={savingCommission} onClick={() => setCommissionDraft(null)}>Cancelar</button>
                  <button className="button button-primary" disabled={savingCommission}>{savingCommission ? "Guardando…" : "Confirmar cambio"}</button>
                </div>
              </form>
            </div>
          </section>
        </div>
      )}
    </section>
  );
}