"use client";
import { useStore } from "@/lib/store";
import { membershipActive, membershipPlan, mxn } from "@/lib/logic";
import { Kpi, Note, PageHead, Pill, useUI } from "@/components/ui";
import { EnrollForm, useMembershipPayment } from "@/components/modals";

export default function MembresiasPage() {
  const { s, mutate } = useStore();
  const { open } = useUI();
  const pay = useMembershipPayment();
  const members = s.patients.filter((p) => p.mem);
  const active = members.filter((p) => membershipActive(p, s.today));
  const mrr = active.reduce((a, p) => a + (membershipPlan(p, s.membershipPlans)?.price ?? 0), 0);
  return (
    <>
      <PageHead eyebrow="Membresías para pacientes" title="Ingreso fijo cada mes para el consultorio"
        sub="El paciente paga una mensualidad, recibe limpiezas y consultas incluidas y un descuento en tratamientos. El sistema aplica el descuento y lleva la cuenta de los servicios usados.">
        <button className="btn pri" onClick={() => open(<EnrollForm />)}>Inscribir paciente</button>
      </PageHead>
      <div className="grid g3">
        <Kpi value={active.length} label="miembros al corriente" />
        <Kpi value={mxn(mrr)} label="ingreso recurrente mensual" />
        <Kpi value={members.length - active.length} label="con pago vencido" color={members.length - active.length ? "var(--warn)" : undefined} />
      </div>
      <h2>Planes que ofrece {s.clinic.name}</h2>
      <div className="grid g3">
        {s.membershipPlans.map((m) => (
          <div key={m.id} className="panel plan">
            <div className="spread"><h3>{m.name}</h3><Pill tone="info">{s.patients.filter((p) => p.mem?.planId === m.id).length} miembros</Pill></div>
            <div className="fgrid" style={{ gridTemplateColumns: "1fr 1fr" }}>
              <label className="f">Mensualidad<input type="number" value={m.price} onChange={(e) => mutate((d) => { d.membershipPlans.find((x) => x.id === m.id)!.price = Number(e.target.value) || 0; })} /></label>
              <label className="f">Descuento %<input type="number" value={m.disc} onChange={(e) => mutate((d) => { d.membershipPlans.find((x) => x.id === m.id)!.disc = Number(e.target.value) || 0; })} /></label>
            </div>
            <ul>
              {Object.entries(m.included).map(([k, v]) => <li key={k}>{v} × {k} al año</li>)}
              <li>{m.disc}% en todos los tratamientos</li><li>{m.extra}</li>
            </ul>
          </div>
        ))}
      </div>
      <div className="panel">
        <h3>Miembros</h3>
        <div className="tscroll"><table style={{ marginTop: 8 }}>
          <thead><tr><th>Paciente</th><th>Plan</th><th>Usado este año</th><th>Pagado hasta</th><th /></tr></thead>
          <tbody>{members.length ? members.map((p) => {
            const m = membershipPlan(p, s.membershipPlans)!; const ok = membershipActive(p, s.today);
            return (
              <tr key={p.id}>
                <td><b>{p.name}</b><br /><small className="muted">desde {p.mem!.since}</small></td>
                <td>{m.name}<br /><small className="mono muted">{mxn(m.price)}/mes</small></td>
                <td style={{ fontSize: ".85rem" }}>{Object.entries(m.included).map(([k, v]) => <div key={k}>{k.split(" (")[0]}: <span className="mono">{p.mem!.used[k] ?? 0}/{v}</span></div>)}</td>
                <td><Pill tone={ok ? "ok" : "warn"}>{p.mem!.paidThru}</Pill></td>
                <td><button className={`btn sm${ok ? "" : " pri"}`} onClick={() => pay(p.id)}>Cobrar mes</button></td>
              </tr>
            );
          }) : <tr><td colSpan={5} className="muted">Sin miembros todavía.</td></tr>}</tbody>
        </table></div>
      </div>
      <Note>Se vende como plan de servicios prepagados y descuentos del propio consultorio, no como seguro. Antes de lanzarlo conviene confirmar con un abogado el encuadre ante CNSF y Profeco, y que el contrato de adhesión cumpla la NOM-174-SCFI.</Note>
    </>
  );
}