"use client";
import { useStore, findPatient, pushFeed, uid } from "@/lib/store";
import { fdate, mxn } from "@/lib/logic";
import { REFERRAL_STEPS, type SponsorSlot } from "@/lib/types";
import { Note, PageHead, Pill, useUI, WaBubble } from "@/components/ui";
import { ReferralForm, reminderText } from "@/components/modals";
import { ReferralDoc } from "@/components/docs";

const SLOTS: Record<SponsorSlot, string> = { wa: "Pie de recordatorios de WhatsApp", rec: "Pie de recibos", portal: "Formulario de citas en línea" };

export default function ConveniosPage() {
  const { s, mutate } = useStore();
  const { open } = useUI();
  const med = s.role === "medico";
  return (
    <>
      <PageHead eyebrow={med ? "Convenios" : "Convenios y patrocinios"} title={med ? "Refiere a estudios con descuento" : "Refiere a estudios y suma ingresos por patrocinio"}
        sub="La orden sale con los datos del paciente y el descuento del convenio. Los resultados regresan al expediente.">
        <button className="btn pri" onClick={() => open(<ReferralForm />)}>Nueva orden de estudio</button>
      </PageHead>
      <div className="grid g2">
        {s.labs.map((l) => (
          <div key={l.id} className="panel" style={{ display: "flex", flexDirection: "column", gap: 8 }}>
            <div className="spread"><h3>{l.name}</h3><Pill tone="info">{l.type}</Pill></div>
            <small className="muted">{l.addr} · {l.disc}% de descuento para tus pacientes</small>
            <div className="tscroll"><table>
              <thead><tr><th>Estudio</th><th className="n">Lista</th><th className="n">Convenio</th></tr></thead>
              <tbody>{l.studies.map((st) => <tr key={st.name}><td>{st.name}</td><td className="n muted">{mxn(st.price)}</td><td className="n">{mxn(st.price * (1 - l.disc / 100))}</td></tr>)}</tbody>
            </table></div>
            <button className="btn sm" style={{ alignSelf: "start" }} onClick={() => open(<ReferralForm labId={l.id} />)}>Referir paciente</button>
          </div>
        ))}
      </div>
      <div className="panel">
        <h3>Órdenes de estudio</h3>
        <div className="tscroll"><table style={{ marginTop: 8 }}>
          <thead><tr><th>Paciente</th><th>Laboratorio</th><th>Estudios</th><th>Estado</th><th /></tr></thead>
          <tbody>{s.referrals.length ? [...s.referrals].reverse().map((r) => {
            const l = s.labs.find((x) => x.id === r.labId)!; const p = findPatient(s, r.patientId)!;
            return (
              <tr key={r.id}><td>{p.name}<br /><small className="muted">{fdate(r.date)}</small></td><td>{l.name}</td><td style={{ fontSize: ".85rem" }}>{r.studies.join(", ")}</td>
                <td><Pill tone={r.step === 2 ? "ok" : "info"}>{REFERRAL_STEPS[r.step]}</Pill></td>
                <td><div className="row">
                  <button className="btn sm" onClick={() => open(<ReferralDoc id={r.id} />)}>Orden</button>
                  {r.step < 2 && <button className="btn sm" onClick={() => mutate((d) => {
                    const x = d.referrals.find((y) => y.id === r.id)!; x.step++;
                    if (x.step === 2) { d.patients.find((y) => y.id === r.patientId)!.studies.push({ id: uid(), date: d.today, label: `${r.studies.join(", ")} · ${l.name}`, img: null }); pushFeed(d, `Llegaron resultados de ${p.name} (${l.name})`, "ok"); }
                  })}>{r.step === 0 ? "Ya agendó" : "Recibir resultados"}</button>}
                </div></td></tr>
            );
          }) : <tr><td colSpan={5} className="muted">Sin órdenes.</td></tr>}</tbody>
        </table></div>
        <Note style={{ marginTop: 10 }}>Laboratorios de ejemplo. Conviene que el beneficio sea un descuento para el paciente y no una comisión al dentista por referir: el cobro por referencia se considera práctica contraria a la ética médica. Revisarlo con un abogado.</Note>
      </div>
      {!med && (
        <>
          <h2>Patrocinios de marca</h2>
          <p className="muted" style={{ margin: "-8px 0 0", maxWidth: "64ch" }}>Una marca paga por aparecer en los mensajes y documentos que reciben tus pacientes.</p>
          <div className="grid g2">
            {s.sponsors.map((sp) => (
              <div key={sp.id} className="panel" style={{ display: "flex", flexDirection: "column", gap: 8 }}>
                <div className="spread"><h3>{sp.name}</h3>
                  <label className="chk"><input type="checkbox" checked={sp.active} onChange={(e) => mutate((d) => { d.sponsors.find((x) => x.id === sp.id)!.active = e.target.checked; })} /> Activo</label></div>
                <small className="muted">{sp.category} · {sp.deal}</small>
                <label className="f">Mensaje patrocinado<input value={sp.msg} onChange={(e) => mutate((d) => { d.sponsors.find((x) => x.id === sp.id)!.msg = e.target.value; })} /></label>
                <div className="eyebrow">Dónde aparece</div>
                {(Object.keys(SLOTS) as SponsorSlot[]).map((k) => (
                  <label key={k} className="chk"><input type="checkbox" checked={sp.slots[k]} onChange={(e) => mutate((d) => { d.sponsors.find((x) => x.id === sp.id)!.slots[k] = e.target.checked; })} /> {SLOTS[k]}</label>
                ))}
              </div>
            ))}
          </div>
          <div className="panel"><h3>Vista previa del recordatorio</h3><div style={{ marginTop: 8 }}><WaBubble text={reminderText(s, s.appointments[1])} /></div></div>
          <Note>Marcas ficticias de ejemplo. La publicidad de productos de higiene e insumos para la salud está regulada por COFEPRIS; el contrato de patrocinio debe dejar la responsabilidad del contenido en la marca.</Note>
        </>
      )}
    </>
  );
}