"use client";
import { useState } from "react";
import { useStore, insurerDue, findPatient, uid } from "@/lib/store";
import { budgetSplit, fdate, mxn } from "@/lib/logic";
import { CLAIM_STEPS } from "@/lib/types";
import { Note, PageHead, Pill, Tabs, useUI } from "@/components/ui";
import { ClaimModal } from "@/components/modals";

export default function AseguradorasPage() {
  const { s, mutate, ctx } = useStore();
  const { open, toast } = useUI();
  const [sel, setSel] = useState(s.insurers[0]?.id ?? "");
  const ins = s.insurers.find((i) => i.id === sel) ?? s.insurers[0];
  const setIns = (k: "coaseg" | "preauth" | "payDays", v: string) => mutate((d) => { d.insurers.find((i) => i.id === ins.id)![k] = Number(v) || 0; });
  return (
    <>
      <PageHead eyebrow="Aseguradoras · complemento opcional" title="Convenios con aseguradoras"
        sub="Cada aseguradora tiene su tabulador, sus requisitos y sus formatos. El sistema calcula qué paga la aseguradora y qué paga el paciente, llena los formatos con los datos del expediente y sigue cada trámite hasta el pago.">
        <label className="chk panel" style={{ padding: "8px 12px" }}>
          <input type="checkbox" checked={s.clinic.insurersAddon} onChange={(e) => mutate((d) => { d.clinic.insurersAddon = e.target.checked; })} /> Complemento activo
        </label>
      </PageHead>
      {!s.clinic.insurersAddon ? <div className="panel muted">Complemento apagado. Los presupuestos usan solo precio particular y descuento de membresía.</div> : (
        <>
          <div className="row" style={{ justifyContent: "space-between" }}>
            <Tabs tabs={s.insurers.map((i) => [i.id, i.name] as [string, string])} value={ins.id} onChange={setSel} />
            <button className="btn sm" onClick={() => { const id = uid(); mutate((d) => { d.insurers.push({ id, name: "Nueva aseguradora", kind: "Seguro dental", coaseg: 20, preauth: 3000, payDays: 30, reqs: [...d.insurers[0].reqs], forms: ["Pre-autorización", "Reclamación"], tab: {} }); }); setSel(id); toast("Captura su tabulador y requisitos"); }}>+ Agregar aseguradora</button>
          </div>
          <div className="grid g2">
            <div className="panel" style={{ display: "flex", flexDirection: "column", gap: 10 }}>
              <div className="spread">
                <input aria-label="Nombre de la aseguradora" value={ins.name} onChange={(e) => mutate((d) => { d.insurers.find((i) => i.id === ins.id)!.name = e.target.value; })} style={{ fontFamily: "var(--f-display)", fontSize: "1.1rem", fontWeight: 700, maxWidth: 260 }} />
                <Pill tone="info">{ins.kind}</Pill>
              </div>
              <div className="fgrid" style={{ gridTemplateColumns: "repeat(3,minmax(0,1fr))" }}>
                <label className="f">Coaseguro %<input type="number" value={ins.coaseg} onChange={(e) => setIns("coaseg", e.target.value)} /></label>
                <label className="f">Pre-autorizar arriba de<input type="number" value={ins.preauth} onChange={(e) => setIns("preauth", e.target.value)} /></label>
                <label className="f">Paga en (días)<input type="number" value={ins.payDays} onChange={(e) => setIns("payDays", e.target.value)} /></label>
              </div>
              <h3>Requisitos para cada trámite</h3>
              <ol style={{ margin: 0, paddingLeft: 20, fontSize: ".9rem", display: "flex", flexDirection: "column", gap: 3 }}>{ins.reqs.map((r) => <li key={r}>{r}</li>)}</ol>
              <h3>Formatos</h3>
              <div className="row">{ins.forms.map((f) => <Pill key={f}>{f}</Pill>)}</div>
              <Note>Los formatos se llenan solos desde el trámite de cada paciente. En producción se carga el PDF oficial de cada aseguradora como plantilla.</Note>
            </div>
            <div className="panel">
              <h3>Tabulador</h3>
              <p className="muted" style={{ fontSize: ".85rem", margin: ".3em 0 8px" }}>Deja vacío lo que la aseguradora no cubre.</p>
              <div className="tscroll"><table>
                <thead><tr><th>Servicio</th><th className="n">Particular</th><th className="n">Tabulador</th><th className="n">Diferencia</th></tr></thead>
                <tbody>{s.services.map((c) => {
                  const t = ins.tab[c.name];
                  return (
                    <tr key={c.id}><td>{c.name}</td><td className="n">{mxn(c.price)}</td>
                      <td className="n"><input type="number" aria-label={`Tabulador ${c.name}`} placeholder="No cubre" value={t ?? ""} style={{ width: 100, textAlign: "right" }}
                        onChange={(e) => mutate((d) => { const x = d.insurers.find((i) => i.id === ins.id)!; if (e.target.value === "") delete x.tab[c.name]; else x.tab[c.name] = Number(e.target.value); })} /></td>
                      <td className="n" style={{ color: t != null && t < c.price ? "var(--warn)" : "var(--muted)" }}>{t != null ? mxn(t - c.price) : "—"}</td></tr>
                  );
                })}</tbody>
              </table></div>
            </div>
          </div>
          <div className="panel">
            <div className="spread"><h3>Trámites en curso</h3><span className="muted">Por cobrar a aseguradoras: <b className="mono">{mxn(insurerDue(s, ctx))}</b></span></div>
            <div className="tscroll"><table style={{ marginTop: 8 }}>
              <thead><tr><th>Paciente</th><th>Aseguradora</th><th>Estado</th><th>Documentos</th><th className="n">Paga aseguradora</th><th /></tr></thead>
              <tbody>{s.claims.length ? s.claims.map((c) => {
                const p = findPatient(s, c.patientId)!; const i = s.insurers.find((x) => x.id === c.insurerId)!; const b = p.budgets.find((x) => x.id === c.budgetId);
                const ok = c.docs.filter(Boolean).length;
                return (
                  <tr key={c.id}><td>{p.name}<br /><small className="muted">{fdate(c.date)}</small></td><td>{i.name}</td>
                    <td><Pill tone={c.step === 5 ? "ok" : "info"}>{CLAIM_STEPS[c.step]}</Pill></td>
                    <td><span className="mono" style={{ color: ok < i.reqs.length ? "var(--warn)" : "var(--ok)" }}>{ok}/{i.reqs.length}</span></td>
                    <td className="n">{mxn(b ? budgetSplit(p, b, ctx).insPay : 0)}</td>
                    <td><button className="btn sm" onClick={() => open(<ClaimModal id={c.id} />)}>Abrir</button></td></tr>
                );
              }) : <tr><td colSpan={6} className="muted">Sin trámites. Se crean desde el presupuesto de un paciente asegurado.</td></tr>}</tbody>
            </table></div>
          </div>
          <Note>Nombres de aseguradoras reales; tabuladores, coaseguros y requisitos son de ejemplo. Cada aseguradora entrega los suyos al firmar el convenio de red.</Note>
        </>
      )}
    </>
  );
}