"use client";
import type { ReactNode } from "react";
import { useStore, currentDoctor, findPatient, sponsorFor, patientBalance } from "@/lib/store";
import { budgetSplit, doctorCredentials, fdate, mxn } from "@/lib/logic";
import { TOOTH_STATES } from "./Odontogram";
import type { Doctor } from "@/lib/types";
import { LogoMark, useUI } from "./ui";

/** Encabezado común de documentos impresos/compartidos. */
export function DocHeader({ title, right, doctor }: { title: string; right: ReactNode; doctor?: Doctor }) {
  const { s } = useStore();
  const d = doctor ?? currentDoctor(s);
  return (
    <div className="dh">
      <div className="row" style={{ gap: 10, alignItems: "flex-start" }}>
        <LogoMark size={44} />
        <div>
          <h3>{s.clinic.name}</h3>
          <div style={{ fontSize: ".78rem" }}>{d.name}<br />{doctorCredentials(d)}<br />{s.clinic.addr} · Tel. {s.clinic.tel}</div>
        </div>
      </div>
      <div style={{ textAlign: "right" }}><b>{title}</b><br />{right}</div>
    </div>
  );
}

function DocActions({ shareLabel = "Enviar por WhatsApp", extra }: { shareLabel?: string; extra?: ReactNode }) {
  const { toast, close } = useUI();
  return (
    <div className="row">
      <button className="btn pri" onClick={() => { close(); toast("Enviado por WhatsApp (simulado)"); }}>{shareLabel}</button>
      {extra}
      <button className="btn" onClick={close}>Cerrar</button>
    </div>
  );
}

export function ReceiptDoc({ folio }: { folio: number }) {
  const { s, ctx } = useStore();
  const p = s.patients.find((q) => q.pays.some((x) => x.folio === folio));
  const x = p?.pays.find((y) => y.folio === folio);
  if (!p || !x) return <p>No se encontró el recibo.</p>;
  const due = patientBalance(p, ctx).due;
  const sp = sponsorFor(s, "rec");
  return (
    <>
      <div className="doc">
        <DocHeader title="RECIBO" right={<><span className="mono">Folio {x.folio}</span><br />{fdate(x.date)}</>} />
        <p style={{ margin: "0 0 8px" }}>Recibimos de <b>{p.name}</b> la cantidad de:</p>
        <table><tbody>
          <tr><td>{x.concept}</td><td className="n">{mxn(x.amount)}</td></tr>
          <tr><td>Forma de pago</td><td className="n" style={{ fontFamily: "var(--f-body)" }}>{x.method}</td></tr>
        </tbody></table>
        <div className="tot">{mxn(x.amount)}</div>
        {!x.membership && <div style={{ textAlign: "right", fontSize: ".82rem" }}>Saldo restante del tratamiento: <b className="mono">{mxn(due)}</b></div>}
        <div className="fine">{s.clinic.razon} · RFC {s.clinic.rfc}<br />Comprobante de pago sin efectos fiscales. Si requieres factura (CFDI), solicítala con tus datos fiscales.</div>
        {sp && <div className="fine" style={{ borderTop: "1px dashed #cfd8dc", paddingTop: 6 }}>{sp.msg} · Patrocinado por {sp.name}</div>}
      </div>
      <DocActions />
    </>
  );
}

export function PrescriptionDoc({ patientId, rxId }: { patientId: string; rxId: string }) {
  const { s } = useStore();
  const p = findPatient(s, patientId);
  const r = p?.rx.find((x) => x.id === rxId);
  if (!p || !r) return null;
  const d = s.doctors.find((x) => x.id === r.doctorId);
  return (
    <>
      <div className="doc">
        <DocHeader title="RECETA MÉDICA" right={fdate(r.date)} doctor={d} />
        <div style={{ fontSize: ".85rem", marginBottom: 10 }}>Paciente: <b>{p.name}</b> · Edad: {p.age} · Alergias: <b>{p.hist.alergias || "—"}</b></div>
        <ol style={{ paddingLeft: 18, margin: 0, display: "flex", flexDirection: "column", gap: 8 }}>
          {r.meds.map((m, i) => <li key={i}><b>{m.name}</b><br />{m.ind}</li>)}
        </ol>
        {r.notes && <p style={{ fontSize: ".85rem", marginTop: 10 }}>{r.notes}</p>}
        <div style={{ marginTop: 28, borderTop: "1px solid #9aa7ab", width: 240, paddingTop: 4, fontSize: ".8rem" }}>
          {(d ?? currentDoctor(s)).name}<br />{doctorCredentials(d ?? currentDoctor(s))}
        </div>
      </div>
      <DocActions />
    </>
  );
}

export function ReferralDoc({ id }: { id: string }) {
  const { s } = useStore();
  const r = s.referrals.find((x) => x.id === id);
  if (!r) return null;
  const p = findPatient(s, r.patientId)!;
  const l = s.labs.find((x) => x.id === r.labId)!;
  return (
    <>
      <div className="doc">
        <DocHeader title="ORDEN DE ESTUDIO" right={fdate(r.date)} doctor={s.doctors.find((d) => d.id === r.doctorId)} />
        <p style={{ margin: "0 0 6px" }}>Para: <b>{l.name}</b><br /><small>{l.addr}</small></p>
        <p style={{ margin: "0 0 6px" }}>Paciente: <b>{p.name}</b> · {p.age} años · Tel. <span className="mono">{p.tel}</span></p>
        <table><tbody>
          {r.studies.map((n) => {
            const pr = l.studies.find((x) => x.name === n)?.price ?? 0;
            return <tr key={n}><td>{n}</td><td className="n">{mxn(pr * (1 - l.disc / 100))}</td></tr>;
          })}
        </tbody></table>
        <p style={{ fontSize: ".85rem", marginTop: 8 }}>Motivo: {r.reason}</p>
        <p style={{ fontSize: ".85rem" }}><b>Presenta esta orden para obtener {l.disc}% de descuento por convenio.</b> Los resultados se envían directo al consultorio.</p>
      </div>
      <DocActions shareLabel="Enviar al paciente por WhatsApp" />
    </>
  );
}

export function InsurerFormDoc({ claimId, formIndex, onBack }: { claimId: string; formIndex: number; onBack: () => void }) {
  const { s, ctx } = useStore();
  const c = s.claims.find((x) => x.id === claimId)!;
  const p = findPatient(s, c.patientId)!;
  const ins = s.insurers.find((i) => i.id === c.insurerId)!;
  const b = p.budgets.find((x) => x.id === c.budgetId)!;
  const split = budgetSplit(p, b, ctx);
  const ant = ([["diabetes", "Diabetes"], ["hiper", "Hipertensión"], ["cardio", "Cardiopatía"], ["coag", "Coagulación"], ["embarazo", "Embarazo"]] as const)
    .filter(([k]) => p.hist[k]).map((x) => x[1]);
  const sig = { borderTop: "1px solid #9aa7ab", paddingTop: 4, flex: 1 };
  return (
    <>
      <div className="doc">
        <DocHeader title={ins.forms[formIndex].toUpperCase()} right={ins.name} />
        <table><tbody>
          <tr><td>Asegurado titular</td><td>{p.ins?.holder}</td></tr>
          <tr><td>Paciente</td><td>{p.name} · {p.age} años</td></tr>
          <tr><td>Póliza</td><td className="mono">{p.ins?.policy || "Por capturar"}</td></tr>
          <tr><td>Diagnóstico</td><td>{p.hist.dx || "—"}</td></tr>
          <tr><td>Antecedentes</td><td>{ant.join(", ") || "Sin antecedentes relevantes"} · Alergias: {p.hist.alergias || "—"}</td></tr>
        </tbody></table>
        <h4 style={{ margin: "12px 0 4px" }}>Tratamiento</h4>
        <table>
          <thead><tr><th>Pieza</th><th>Procedimiento</th><th className="n">Tabulador</th></tr></thead>
          <tbody>{b.items.map((i, k) => <tr key={k}><td className="mono">{i.tooth || "—"}</td><td>{i.name}</td><td className="n">{ins.tab[i.name] != null ? mxn(ins.tab[i.name]) : "No cubierto"}</td></tr>)}</tbody>
        </table>
        <div style={{ fontSize: ".85rem", marginTop: 8 }}>Monto a cargo de {ins.name}: <b className="mono">{mxn(split.insPay)}</b> · Coaseguro del paciente: <b className="mono">{mxn(split.patPay)}</b></div>
        <div style={{ fontSize: ".85rem", marginTop: 4 }}>Odontograma: {Object.entries(p.teeth).map(([t, st]) => `${t} ${TOOTH_STATES[st][0].toLowerCase()}`).join(", ") || "sin hallazgos"}</div>
        <div style={{ display: "flex", gap: 24, marginTop: 34, fontSize: ".8rem" }}>
          <div style={sig}>Firma del paciente</div>
          <div style={sig}>{currentDoctor(s).name}<br />{doctorCredentials(currentDoctor(s))}</div>
        </div>
        <div className="fine">Llenado automático con datos del expediente. En producción se usa la plantilla oficial de {ins.name}.</div>
      </div>
      <DocActions shareLabel="Enviar a la aseguradora" extra={<button className="btn" onClick={onBack}>Volver al trámite</button>} />
    </>
  );
}