/* sections-reporting.jsx — Automated email reporting (customizable + benefits) */

const RPT_FREQ = [
  { key: "daily",   label: "Daily",   sub: "Every morning, 7:00 AM" },
  { key: "weekly",  label: "Weekly",  sub: "Mondays, start of week" },
  { key: "monthly", label: "Monthly", sub: "1st of the month" },
];

const RPT_BLOCKS = [
  { key: "kpis",    icon: "spark",  label: "KPI summary",        desc: "Collected, billed, denial rate, days-to-pay" },
  { key: "denials", icon: "bell",   label: "Denial alerts",      desc: "New denials flagged the moment they post" },
  { key: "aging",   icon: "clock",  label: "Aging buckets",      desc: "What's 30 / 60 / 90+ days out and at risk" },
  { key: "payers",  icon: "chart",  label: "Per-payer breakdown",desc: "Performance and lag by payer" },
];

const RPT_BENEFITS = [
  { icon: "inbox",   t: "No dashboard login required", b: "The numbers come to you. Owners and billers who never open the app still stay current; the report lands in their inbox on schedule." },
  { icon: "bell",    t: "Catch denials before they age", b: "Get flagged the day a claim is denied, not weeks later at month-end close. Every day of lag is cash sitting on the table." },
  { icon: "users",   t: "Keep everyone aligned", b: "Send the same source-of-truth numbers to clinic owners, billers, and accountants automatically, with no one re-keying figures into a spreadsheet." },
  { icon: "doc",     t: "An audit-ready paper trail", b: "Each scheduled report is timestamped and archived, giving you a running record of clinic performance over time." },
];

const fmtRecipients = (n) => (n === 1 ? "1 recipient" : `${n} recipients`);

function ReportEmailPreview({ freq, blocks }) {
  const f = RPT_FREQ.find((x) => x.key === freq) || RPT_FREQ[1];
  const cadence = f.label;
  return (
    <div className="rpt-mail">
      <div className="rpt-mail-bar">
        <div className="mini-dots"><span></span><span></span><span></span></div>
        <span className="rpt-mail-folder mono"><I.mail /> Inbox · DataMed Reports</span>
      </div>

      <div className="rpt-mail-head">
        <div className="rpt-avatar"><LogoMark size={22} /></div>
        <div className="rpt-mail-meta">
          <div className="rpt-mail-row">
            <span className="rpt-from">DataMed Reporting</span>
            <span className="rpt-time mono">{cadence === "Daily" ? "7:00 AM" : "now"}</span>
          </div>
          <div className="rpt-subject">Your {cadence.toLowerCase()} claims report: Riverside ABA</div>
          <div className="rpt-to mono">to billing@riverside-aba.com, owner@…</div>
        </div>
      </div>

      <div className="rpt-mail-body">
        {blocks.kpis && (
          <div className="rpt-kpis">
            {[
              { l: "Collected", v: "$128.4k", d: "+12.6%", up: true },
              { l: "Denial rate", v: "4.1%", d: "-1.3%", up: true },
              { l: "Days to pay", v: "18.4", d: "-3.1d", up: true },
            ].map((k) => (
              <div key={k.l} className="rpt-kpi">
                <span className="rpt-kpi-l">{k.l}</span>
                <span className="rpt-kpi-v">{k.v}</span>
                <span className="rpt-kpi-d up">{k.d}</span>
              </div>
            ))}
          </div>
        )}

        {blocks.denials && (
          <div className="rpt-line rpt-line-warn">
            <span className="rpt-line-ic"><I.bell /></span>
            <span><strong>2 new denials</strong> need attention: Wellpoint 97154, $70.00 total. <span className="rpt-link">Review →</span></span>
          </div>
        )}

        {blocks.aging && (
          <div className="rpt-aging">
            <span className="rpt-block-h mono">Aging</span>
            <div className="rpt-bars">
              {[["0–30", 64, "teal"], ["31–60", 22, "sky"], ["61–90", 9, "indigo"], ["90+", 5, "warn"]].map(([lb, w, c]) => (
                <div key={lb} className="rpt-bar-row">
                  <span className="rpt-bar-l mono">{lb}</span>
                  <span className="rpt-bar-track"><span className={`rpt-bar-fill ${c}`} style={{ width: `${w}%` }}></span></span>
                  <span className="rpt-bar-v mono">{w}%</span>
                </div>
              ))}
            </div>
          </div>
        )}

        {blocks.payers && (
          <div className="rpt-payers">
            <span className="rpt-block-h mono">Top payers</span>
            {[["Blue Cross TX", "$52.1k", "97%"], ["Aetna Better Health", "$31.4k", "94%"], ["Wellpoint", "$22.0k", "89%"]].map(([p, amt, rate]) => (
              <div key={p} className="rpt-payer-row">
                <span className="rpt-payer-n">{p}</span>
                <span className="rpt-payer-amt mono">{amt}</span>
                <span className="rpt-payer-rate mono">{rate} paid</span>
              </div>
            ))}
          </div>
        )}

        {!blocks.kpis && !blocks.denials && !blocks.aging && !blocks.payers && (
          <div className="rpt-empty">Pick at least one section to include in the report →</div>
        )}

        <div className="rpt-mail-foot mono">Sent automatically by DataMed · {cadence} · PHI-safe summary</div>
      </div>
    </div>
  );
}

function Reporting() {
  const [freq, setFreq] = useState("weekly");
  const [recips, setRecips] = useState(3);
  const [blocks, setBlocks] = useState({ kpis: true, denials: true, aging: true, payers: false });
  const toggle = (k) => setBlocks((b) => ({ ...b, [k]: !b[k] }));

  return (
    <section className="sec-pad reporting" id="reporting">
      <div className="wrap">
        <div className="sec-head sec-head-center">
          <Reveal><span className="eyebrow"><span className="dot"></span>Automated reporting</span></Reveal>
          <Reveal as="h2" delay={80} className="sec-title">The report writes and sends itself</Reveal>
          <Reveal as="p" delay={140} className="sec-sub">DataMed emails a clean performance summary to the people who need it, on the schedule you set, with exactly the sections you choose. Build the report once; it shows up in every inbox, every cycle, on its own.</Reveal>
        </div>

        <div className="rpt-grid">
          {/* ── Controls ── */}
          <Reveal className="rpt-config" delay={100}>
            <div className="rpt-config-head"><span className="rpt-cfg-ic"><I.sliders /></span><h3>Customize your report</h3></div>

            <div className="rpt-field">
              <span className="rpt-field-l"><I.calendar /> Frequency</span>
              <div className="rpt-seg">
                {RPT_FREQ.map((o) => (
                  <button key={o.key} className={`rpt-seg-btn ${freq === o.key ? "on" : ""}`} onClick={() => setFreq(o.key)}>
                    {o.label}
                  </button>
                ))}
              </div>
              <span className="rpt-field-hint mono">{(RPT_FREQ.find((x) => x.key === freq) || {}).sub}</span>
            </div>

            <div className="rpt-field">
              <span className="rpt-field-l"><I.users /> Recipients</span>
              <div className="rpt-stepper">
                <button onClick={() => setRecips((n) => Math.max(1, n - 1))} aria-label="Fewer recipients">−</button>
                <span className="rpt-stepper-v">{fmtRecipients(recips)}</span>
                <button onClick={() => setRecips((n) => Math.min(12, n + 1))} aria-label="More recipients">+</button>
              </div>
              <span className="rpt-field-hint mono">Owners, billers, accountants, anyone you choose</span>
            </div>

            <div className="rpt-field">
              <span className="rpt-field-l"><I.chart /> Sections to include</span>
              <div className="rpt-blocks">
                {RPT_BLOCKS.map((bl) => {
                  const Ico = I[bl.icon];
                  const on = blocks[bl.key];
                  return (
                    <button key={bl.key} className={`rpt-block ${on ? "on" : ""}`} onClick={() => toggle(bl.key)}>
                      <span className="rpt-block-ic"><Ico /></span>
                      <span className="rpt-block-tx">
                        <span className="rpt-block-t">{bl.label}</span>
                        <span className="rpt-block-d">{bl.desc}</span>
                      </span>
                      <span className={`rpt-switch ${on ? "on" : ""}`}><span></span></span>
                    </button>
                  );
                })}
              </div>
            </div>

            <div className="rpt-config-foot">
              <span className="mini-live"><span className="live-dot"></span>Next send scheduled</span>
              <span className="mono">{(RPT_FREQ.find((x) => x.key === freq) || {}).sub}</span>
            </div>
          </Reveal>

          {/* ── Live email preview ── */}
          <Reveal className="rpt-preview" delay={180}>
            <ReportEmailPreview freq={freq} blocks={blocks} />
            <div className="dash-reflect" aria-hidden="true"></div>
          </Reveal>
        </div>

        {/* ── Benefits ── */}
        <div className="rpt-benefits">
          {RPT_BENEFITS.map((bn, i) => {
            const Ico = I[bn.icon];
            return (
              <Reveal key={bn.t} className="rpt-benefit" delay={(i % 4) * 80}>
                <div className="rpt-benefit-ic"><Ico /></div>
                <h4 className="rpt-benefit-t">{bn.t}</h4>
                <p className="rpt-benefit-b">{bn.b}</p>
              </Reveal> 
            );
          })}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Reporting });