/* app.jsx — root: state, appbar, filter rail, nav, footer, tweaks */
const { D, fmt, monthLabel, Icon, Ico, ICONS, aggregate, buildFilter } = window.RX;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "look": "dark",
  "accent": "#C2410C",
  "density": "comfy",
  "card": "elevated",
  "chart": "area",
  "layout": "sidebar"
}/*EDITMODE-END*/;

function useFilter() {
  const [raw, setRaw] = useLS("rx_filter_v3", {
    from: D.data_window.first, to: D.data_window.last, preset: "all",
    payers: D.payers.map((_, i) => i), lines: [...D.lines],
    products: D.drugs.map((_, i) => i), pbLens: "all",
  });
  const filter = useMemo(() => buildFilter(raw), [raw]);
  const set = (patch) => setRaw(r => ({
    ...r, ...patch,
    payers: patch.payers ? [...patch.payers] : r.payers,
    lines: patch.lines ? [...patch.lines] : r.lines,
    products: patch.products ? [...patch.products] : r.products,
  }));
  return [filter, set, raw];
}

function Footer() {
  return (
    <footer className="app-footer">
      <div className="lhs"><b>ExpressRx</b> Pharmacy & Medical Supplies · Refill Operations Dashboard · data through <b>{D.as_of}</b></div>
      <a className="dnd" href="https://dnddynamics.co" target="_blank" rel="noopener">
        <span className="dmark">DND</span>
        Built by <b>DND&nbsp;Dynamics</b> <span>· metrics.dnddynamics.co</span>
      </a>
    </footer>
  );
}

function FreshnessBanner() {
  const last = new Date(D.as_of + "T23:59:59");
  if (Date.now() - last.getTime() <= 24 * 3600 * 1000) return null;
  return <div className="banner-warn">Heads up: data is through <b>{window.RX.fmtDateY(D.as_of)}</b> — the latest day on file.</div>;
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [view, setView] = useLS("rx_view", "fold");   // Dashboard V2: land on the fold
  const [filter, setFilter, raw] = useFilter();

  useEffect(() => {
    const b = document.body;
    b.dataset.look = t.look; b.dataset.density = t.density; b.dataset.card = t.card;
    document.documentElement.style.setProperty("--accent", t.accent);
  }, [t.look, t.density, t.card, t.accent]);

  const cubeViews = view === "overview" || view === "mix";
  const agg = useMemo(() => aggregate(filter), [filter]);
  const railAgg = useMemo(() => aggregate(buildFilter({
    from: raw.from, to: raw.to, preset: raw.preset,
    payers: D.payers.map((_, i) => i), lines: [...D.lines], pbLens: raw.pbLens,
  })), [raw.from, raw.to, raw.pbLens]);

  const chartFilled = t.chart === "area";
  const sidebar = t.layout === "sidebar";
  const allDefault = raw.preset === "all" && raw.payers.length === D.payers.length && raw.lines.length === D.lines.length && raw.pbLens === "all" && raw.products.length === D.drugs.length;

  // Filter scope follows the Rx lifecycle: full rail on the patient/volume
  // views and the two INTAKE departments; date-only downstream (Shipping,
  // Fillers) — past intake, every script ships/fills/verifies regardless.
  const railMode = view === "fold" ? "none"
    : ["overview", "mix", "patients", "verification", "refill"].includes(view) ? "full"
    : ["shipping", "fillers"].includes(view) ? "date" : "none";
  const showRail = railMode !== "none";

  const views = {
    fold: <Fold setView={setView} />,
    overview: <Overview filter={filter} agg={agg} chartFilled={chartFilled} setView={setView} />,
    mix: <ProductMix filter={filter} agg={agg} chartFilled={chartFilled} />,
    patients: <Patients filter={filter} chartFilled={chartFilled} />,
    forecast: <Forecast filter={filter} chartFilled={chartFilled} />,
    verification: <Verification filter={filter} />,
    refill: <Refill filter={filter} />,
    shipping: <Shipping filter={filter} chartFilled={chartFilled} />,
    fillers: <Fillers filter={filter} />,
    projects: <Projects />,
  };

  return (
    <div className="app">
      <header className="appbar">
        <div className="brand">
          <span className="brand-mark"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M6 20V5a1 1 0 0 1 1-1h5a4 4 0 0 1 0 8H6" /><path d="M11 12l6 8" /></svg></span>
          ExpressRx <span className="sub">/ Refill Ops</span>
        </div>
        {!sidebar && <TopNav view={view} setView={setView} />}
        <div className="spacer" />
        <div className="app-meta">
          <span className="live"><span className="dot" /> Live</span>
          <span>·</span>
          <span>updated <b>{D.as_of}</b></span>
        </div>
      </header>

      <div className="body">
        {sidebar && <Sidebar view={view} setView={setView} tags={{}} />}
        <div className="main">
          {showRail &&
            <div className="rail">
              <span className="rl">Filter</span>
              <DateFilter raw={raw} onChange={p => setFilter(p)} />
              <span className="sep" />
              {railMode === "full" && <>
                <PayerSelect selected={filter.payers} onChange={p => setFilter({ payers: p })} counts={railAgg.byPayer} />
                <ProductSelect selected={filter.products} onChange={p => setFilter({ products: p })} counts={railAgg.byDrug} />
                <LineChips selected={filter.lines} onChange={l => setFilter({ lines: l })} counts={railAgg.byLine} />
                <span className="sep" />
                <PaperBillLens value={filter.pbLens} onChange={v => setFilter({ pbLens: v })} />
              </>}
              {!allDefault &&
                <button className="ctrl ghost" onClick={() => setFilter({ from: D.data_window.first, to: D.data_window.last, preset: "all", payers: new Set(D.payers.map((_, i) => i)), lines: new Set(D.lines), products: new Set(D.drugs.map((_, i) => i)), pbLens: "all" })}>
                  <Ico size={13} d={ICONS.reset} /> Reset
                </button>}
              <span className="spacer" />
              <span className="result">{railMode === "full"
                ? <><b>{fmt(agg.grand)}</b> fills in view</>
                : <>{window.RX.fmtDate(filter.from)} – {window.RX.fmtDate(filter.to)} · date filter only</>}</span>
            </div>}

          <div className="scroll">
            {<FreshnessBanner />}{views[view]}<Footer />
          </div>
        </div>
      </div>

      <TweaksPanel>
        <TweakSection label="Look" />
        <TweakRadio label="Theme" value={t.look} options={[{ value: "paper", label: "Paper" }, { value: "graphite", label: "Graphite" }, { value: "dark", label: "Dark" }]} onChange={v => setTweak("look", v)} />
        <TweakColor label="Accent" value={t.accent} options={["#5457E6", "#2E6FE6", "#7C5CE6", "#11936B", "#C2410C"]} onChange={v => setTweak("accent", v)} />
        <TweakSection label="Layout" />
        <TweakRadio label="Navigation" value={t.layout} options={[{ value: "sidebar", label: "Sidebar" }, { value: "topbar", label: "Top tabs" }]} onChange={v => setTweak("layout", v)} />
        <TweakRadio label="Density" value={t.density} options={["compact", "regular", "comfy"]} onChange={v => setTweak("density", v)} />
        <TweakSection label="Style" />
        <TweakRadio label="Cards" value={t.card} options={[{ value: "outlined", label: "Outlined" }, { value: "soft", label: "Soft" }, { value: "elevated", label: "Raised" }]} onChange={v => setTweak("card", v)} />
        <TweakRadio label="Charts" value={t.chart} options={[{ value: "area", label: "Filled" }, { value: "line", label: "Line" }]} onChange={v => setTweak("chart", v)} />
      </TweaksPanel>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);