/* page-dashboards.jsx — inline-section role dashboards (03-ui §2). IIFE-scoped; exports via window.
   Architecture (no tabs): one stateful StatPanel (role-seeded preset) + a vertical stack of
   <SectionLabel> headers, each followed by snapshot StatCards then ChartCards. Every view is
   derived from SCOPE (country_id / area_id / outlet_id), not role alone (v2.11.1 lesson).
   Multi-day time-series charts (line / cross-period bar trend) hide in date mode; snapshot
   visuals (donut, ranked-list, progress, geo-map, hourly-within-today bar) always render. */
(function(){
const { useState, useMemo } = React;

// Role → initial StatPanel preset. Seeds the dashboard's OWN state; never mutates the shared
// STAT_PANEL_DEFAULT_STATE. GA→Quarter (id "QTD") · CM→MTD · AM→7D · outlet/OM→date/today.
function _seedPanelState({ role, outletId, areaId }) {
  if (outletId) return { ...STAT_PANEL_DEFAULT_STATE, mode: "date", date: { preset: "today" } };
  if (role === "AM" || areaId) return { ...STAT_PANEL_DEFAULT_STATE, mode: "range", range: { preset: "7D" } };
  if (role === "GA") return { ...STAT_PANEL_DEFAULT_STATE, mode: "range", range: { preset: "QTD" } };
  return { ...STAT_PANEL_DEFAULT_STATE, mode: "range", range: { preset: "MTD" } }; // CM
}

const _STAFF_DAYS = ["mon", "tue", "wed", "thu", "fri", "sat", "sun"];

/**
 * @spec GA-010 — Global dashboard (US-070).
 * GA-only, global scope. Inline sections: Network · Flagships · Brand quality · Customers.
 * Investor metrics (SSG, expansion, MAU/PF/R0/downloads) are folded into Network + Customers
 * (no Admin/Investor toggle). Country-scope Select sits above the sections via StatPanel.scopeSelect.
 */
function GADashboard({ role = "GA", scope = {} }) {
  const [panelState, setPanelState] = useState(() => _seedPanelState({ role: "GA" }));
  const [country, setCountry] = useState(scope.country_id || "");
  const isDateMode = panelState.mode === "date";
  const setCountryScope = (v) => setCountry(v || "");

  // Scoped totals — single country swaps in country numbers; else network rollup.
  const data = country
    ? ({ SG: { gmv: "S$ 1.42M", orders: "41,820", aov: "S$ 33.9", appKiosk: "58 : 42", refunded: "324", voided: "88" },
         PH: { gmv: "₱ 8.9M",   orders: "18,104", aov: "₱ 491",  appKiosk: "41 : 59", refunded: "156", voided: "43" } }[country]
        || { gmv: "—", orders: "—", aov: "—", appKiosk: "—", refunded: "—", voided: "—" })
    : { gmv: "S$ 2.31M", orders: "59,924", aov: "S$ 38.6", appKiosk: "52 : 48", refunded: "480", voided: "131" };

  // Live network counts (scope-aware) — Countries + Outlets header stats (v3 GA Network mockup).
  const liveOutlets = SB3_OUTLETS.filter(o => o.status === "active" && (!country || o.country_id === country));
  const liveCountryIds = country ? [country] : [...new Set(SB3_OUTLETS.filter(o => o.status === "active").map(o => o.country_id))];

  const ssgRows = useMemo(() => (country ? SB_DASH_SSG_BY_COUNTRY.filter(r => r.country_id === country) : SB_DASH_SSG_BY_COUNTRY), [country]);
  const pipelineRows = useMemo(() => (country ? SB_DASH_EXPANSION_PIPELINE.filter(r => r.country_id === country) : SB_DASH_EXPANSION_PIPELINE), [country]);
  const gmvShareDonut = SB_DASH_GMV_SHARE.map((s, i) => ({
    label: SB2_COUNTRY_BY_ID[s.country_id]?.country_name || s.country_id, value: s.value,
    color: ["--forest", "--orange", "--mint", "--moss"][i] || "--forest",
  }));

  const countryOpts = [{ value: "", label: "All countries" },
    ...SB2_COUNTRIES.map(c => ({ value: c.country_id, label: `${c.flag} ${c.country_name}` }))];

  return (
    <div className="page-inner">
      <PageHead title="Global performance"/>
      {role !== "GA" && (
        <InlineAlert kind="warn">This dashboard is Global-Admin-only. Your scope may not match the figures below.</InlineAlert>
      )}

      <SectionLabel>Network</SectionLabel>
      <StatPanel state={panelState} onChange={setPanelState}
        scopeSelect={<Select value={country} onChange={setCountryScope} options={countryOpts}/>}>
        <StatCard label="Network GMV"  value={data.gmv}      delta="+8.4%"  deltaDir="up"   deltaBasis={statPanelDeltaBasis(panelState)} sub="total sales"/>
        <StatCard label="Countries"    value={String(liveCountryIds.length)} sub={liveCountryIds.join(" · ")}/>
        <StatCard label="Outlets"      value={String(liveOutlets.length)}    sub="live outlets"/>
        <StatCard label="Orders"       value={data.orders}   delta="+12.1%" deltaDir="up"   deltaBasis={statPanelDeltaBasis(panelState)} sub="completed orders"/>
        <StatCard label="AOV"          value={data.aov}      delta="-0.6%"  deltaDir="down" deltaBasis={statPanelDeltaBasis(panelState)} sub="avg order value"/>
        <StatCard label="App : Kiosk"  value={data.appKiosk}                                                     sub="order channel split"/>
        <StatCard label="Refunded"     value={data.refunded}                                                     sub="refunded order count"/>
        <StatCard label="Voided"       value={data.voided}                                                       sub="cancelled / voided"/>
        <StatCard label="Expansion"    value={String(pipelineRows.length)}                                       sub="signed-not-yet-open outlets"/>
        <StatCard label="SSG"          value={(ssgRows[0] ? `+${(ssgRows.reduce((s, r) => s + r.ssg, 0) / ssgRows.length).toFixed(1)}%` : "—")} sub="same-store sales growth · YoY"/>
      </StatPanel>
      <ChartCard title="Country mix" subtitle="Share of network GMV" kind="donut" data={gmvShareDonut} height={200}/>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
        <ChartCard title="GMV per outlet" subtitle="Normalised by outlet count" kind="bar" data={SB_DASH_GMV_PER_OUTLET} height={200}/>
        <ChartCard title="Promo dependency" subtitle="% of GMV from promotions · ref 5%" kind="bar" data={SB_DASH_PROMO_DEPENDENCY} height={200}/>
      </div>
      {!isDateMode && (
        <ChartCard title="Cross-country AOV" subtitle="3-month rolling" kind="line" data={SB_DASH_AOV_TREND.values} height={180}/>
      )}
      {!isDateMode && (
        <ChartCard title="Same-store sales growth" subtitle="Network rolling · last 12 months" kind="line" data={SB_DASH_SSG_TREND} height={180}/>
      )}
      <FormSection title="Expansion pipeline">
        <Table emptyText="No outlets in pipeline."
          columns={[
            { label: "Outlet",      sortable: true, sortKey: "name",        render: r => <span style={{ ...T.primary() }}>{r.name}</span> },
            { label: "Country",     width: 120, sortable: true, sortKey: "country_id",  render: r => <span style={{ ...T_MUTED }}>{_countryLabel(r.country_id)}</span> },
            { label: "Stage",       width: 130, sortable: true, sortKey: "stage",       render: r => <span style={{ ...T_MUTED }}>{r.stage}</span> },
            { label: "Target open", width: 130, sortable: true, sortKey: "open_target", render: r => <span style={{ ...T_MUTED }}>{r.open_target}</span> },
            { label: "Onboarding",  width: 180, sortable: true, sortKey: "progress",    render: r => (
              <div className="row ai-c" style={{ gap: 10, minWidth: 160 }}>
                <ProgressBar value={r.progress}/>
                <span style={{ ...T.amount, minWidth: 36, textAlign: "right" }}>{r.progress}%</span>
              </div>
            ) },
          ]}
          rows={pipelineRows}/>
      </FormSection>

      <SectionLabel>Flagships</SectionLabel>
      <ChartCard title="Flagship vs SG benchmark" subtitle="PH flagship indexed to SG = 100" kind="bar" data={SB_DASH_FLAGSHIP_VS_SG} height={200}/>

      <SectionLabel>Brand quality</SectionLabel>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
        <ChartCard title="Refund rate by country" subtitle="% of txns · SG threshold 0.8%" kind="bar" data={SB_DASH_REFUND_RATE_BY_COUNTRY} height={200}/>
        <ChartCard title="AI-Companion engagement" subtitle="Nudge-open + re-order rate" kind="bar" data={SB_DASH_AI_ENGAGEMENT} height={200}/>
      </div>

      <SectionLabel>Customers</SectionLabel>
      <StatPanel cols={4}>
        <StatCard label="Member growth"   value="+6.7%"  sub="net new members · vs prior"/>
        <StatCard label="MAU"             value="82,140" sub="users with ≥1 order / month"/>
        <StatCard label="Purchase freq."  value="3.1"    sub="orders / active user / month"/>
        <StatCard label="Registered, never ordered" value="11.6%" sub="R0 · 27% (7d) · 46% (30d) convert"/>
        <StatCard label="App downloads"   value="—"      sub="Phase 2.x · App Store + Play API"/>
      </StatPanel>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
        <ChartCard title="Member growth by country" subtitle="New loyalty members this month" kind="bar" data={SB_DASH_MEMBER_GROWTH_BY_COUNTRY} height={200}/>
        <ChartCard title="Loyalty redemption rate" subtitle="% app orders with redemption · by country" kind="bar" data={SB_DASH_LOYALTY_REDEMPTION_BY_COUNTRY} height={200}/>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "1fr", gap: 12 }}>
        <ChartCard title="Order density" subtitle="Cross-country GPS heatmap" kind="heatmap" points={SB_DASH_GA_GPS_POINTS} height={200}/>
      </div>
    </div>
  );
}

/**
 * @spec CM-010 · AM-010 · OM-010 — Scope-derived dashboard BODY (reusable).
 * Returns ONLY the dashboard body (no PageHead / page-inner) so it renders inside a detail-page
 * Performance tab. View is derived from SCOPE: outlet_id → OM "Today" set · area_id → AM area set ·
 * country_id (or CM role) → CM country set. Accepts both snake_case spec keys and the shell's
 * camelCase. The 3 detail-page consumers (countries/areas/outlets) pass {scope} unchanged.
 */
function PerformanceDashboardContent({ scope = {}, role = "CM" }) {
  // ── ALL hooks first, above any scope-derived early return (Rules-of-Hooks). ──
  const outletId = scope.outlet_id || scope.outletId || null;
  const rawArea  = scope.area_id || scope.areaId || null;
  const isCM = role !== "AM" && !rawArea && !outletId;
  const [panelState, setPanelState] = useState(() => _seedPanelState({ role, outletId, areaId: rawArea }));
  const [rankMode, setRankMode] = useState("total"); // CM outlet-ranking data toggle
  const isDateMode = panelState.mode === "date";

  // ── Outlet scope → OM "Today" metric set (regardless of viewer role). ──
  if (outletId) {
    const o = SB3_OUTLET_BY_ID[outletId];
    if (!o) return <FormSection title="Outlet"><Table columns={[{ label: "Outlet" }]} rows={[]} emptyText="No outlet data."/></FormSection>;
    const live = o.status === "active";
    const refundCount = live ? SB_DASH_OM_REFUND_LOG.length : 0;
    const bonusTarget = o.monthly_bonus_target || 0;
    const bonusGmv = live ? Math.round(bonusTarget * 0.62) : 0;
    const ccy = (o.gmv_today || "").split(" ")[0] || "₱";
    const bonusData = [{ label: "Monthly bonus", value: bonusGmv, target: bonusTarget,
      valueLabel: `${ccy} ${(bonusGmv / 1000).toFixed(0)}K`, targetLabel: `${ccy} ${(bonusTarget / 1000).toFixed(0)}K` }];
    return (
      <>
        <SectionLabel>Today</SectionLabel>
        <StatPanel state={panelState} onChange={setPanelState}>
          <StatCard label="GMV"            value={o.gmv_today}            delta="+3.1%" deltaDir="up" deltaBasis={statPanelDeltaBasis(panelState)} sub="total sales"/>
          <StatCard label="Orders"         value={String(o.orders_today)} delta="+4.2%" deltaDir="up" deltaBasis={statPanelDeltaBasis(panelState)} sub="completed orders"/>
          <StatCard label="App : Kiosk"    value={live ? "44 : 56" : "—"}                                                   sub="order channel split"/>
          <StatCard label="AOV"            value={o.aov_today}            delta="+1.4%" deltaDir="up" deltaBasis={statPanelDeltaBasis(panelState)} sub="avg order value"/>
          <StatCard label="Avg prep time"  value={live ? "8 min" : "—"}                                                     sub="mean order placed to ready"/>
          <StatCard label="Members ordering" value={live ? "62%" : "—"} delta="+3%" deltaDir="up" deltaBasis={statPanelDeltaBasis(panelState)} sub="of total orders"/>
          <StatCard label="Loyalty points" value={live ? "4,120" : "0"} delta="+5%" deltaDir="up" deltaBasis={statPanelDeltaBasis(panelState)} sub="points earned"/>
          <StatCard label="Redemptions"    value={live ? String(Math.round(o.orders_today * 0.15)) : "0"} delta="+8%" deltaDir="up" deltaBasis={statPanelDeltaBasis(panelState)} sub="reward redemptions"/>
        </StatPanel>
        <ChartCard title="Bonus progress" subtitle="GMV vs GA-set monthly bonus target" kind="progress" data={bonusData}/>
        <ChartCard title="Transactions per hour" subtitle="Today · peak highlighted" kind="bar" data={SB_DASH_OM_HOURLY_TXNS} height={200}/>
        {refundCount > 0 && (
          <InlineAlert kind="warn">{refundCount} refunds today — top reason: {SB_DASH_OM_REFUND_LOG[0].reason}.</InlineAlert>
        )}

        <SectionLabel>Shifts</SectionLabel>
        <FormSection title="Staff on shift today">
          <Table emptyText="No staff clocked in."
            columns={[
              { label: "Staff",     sortable: true, sortKey: "staff", render: r => <span style={{ ...T.primary() }}>{r.staff}</span> },
              { label: "Role",      width: 130, sortable: true, sortKey: "role", render: r => <span style={{ ...T_MUTED }}>{r.role}</span> },
              { label: "Clock-in",  width: 120, sortable: true, sortKey: "clocked_in", render: r => <span style={{ ...T_MUTED, fontFeatureSettings: '"tnum"' }}>{r.clocked_in || "—"}</span> },
              { label: "Status",    width: 120, sortable: true, sortKey: "status", render: r => <StatusPill status={r.status === "on_shift" ? "active" : "inactive"} kind="user"/> },
            ]}
            rows={SB_DASH_OM_STAFF_TODAY}/>
        </FormSection>

        <SectionLabel>Items</SectionLabel>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
          <ChartCard title="Top 5 today"   subtitle="By units sold" kind="ranked-list" data={SB_DASH_OM_ITEMS.top5}/>
          <ChartCard title="Slow movers"   subtitle="< 3 units today" kind="ranked-list" data={SB_DASH_OM_ITEMS.slow}/>
        </div>
        {SB_DASH_OM_ITEMS.unavailable.length > 0 && (
          <FormSection title="Unavailable products">
            <Table emptyText="All products available."
              columns={[{ label: "Product", render: r => <span style={{ ...T.primary() }}>{r.label}</span> },
                        { label: "Status", width: 130, render: () => <StatusPill status="unavailable" kind="avail"/> }]}
              rows={SB_DASH_OM_ITEMS.unavailable}/>
          </FormSection>
        )}

        <SectionLabel>Quality</SectionLabel>
        <StatPanel cols={2}>
          <StatCard label="Refund rate" value={live ? "1.2%" : "—"} sub="% of transactions"/>
          <StatCard label="Refunds"     value={String(refundCount)} sub="count"/>
        </StatPanel>
        <FormSection title="Refund log today">
          <Table emptyText="No refunds today."
            columns={[
              { label: "Order ID", width: 150, sortable: true, sortKey: "order_id", render: r => <span style={{ ...T.mono, fontSize: 12, color: "var(--forest)" }}>{r.order_id}</span> },
              { label: "Amount",   width: 110, sortable: true, sortKey: "amount", render: r => <span style={{ ...T.amount }}>{r.amount}</span> },
              { label: "Reason",   sortable: true, sortKey: "reason", render: r => <span style={{ ...T_MUTED }}>{r.reason}</span> },
              { label: "Time",     width: 100, sortable: true, sortKey: "time", render: r => <span style={{ ...T_MUTED, fontFeatureSettings: '"tnum"' }}>{r.time}</span> },
            ]}
            rows={SB_DASH_OM_REFUND_LOG}/>
        </FormSection>
      </>
    );
  }

  // ── Area / country scope derivation. ──
  const scopeArea = rawArea
    ? (SB3_AREA_BY_ID[rawArea] || SB3_AREAS.find(a => AREA_LABEL[rawArea] === a.name) || null)
    : null;
  const areaId = isCM ? null : (scopeArea?.id || AM_AREA_ID);
  const resolvedArea = scopeArea || (areaId ? SB3_AREA_BY_ID[areaId] : null);
  const countryId = scope.country_id || scope.countryId || resolvedArea?.country_id || "PH";
  const country = SB2_COUNTRY_BY_ID[countryId];
  const countryName = country?.country_name || countryId;
  const scopedOutlets = areaId
    ? SB3_OUTLETS.filter(o => o.area_id === areaId)
    : SB3_OUTLETS.filter(o => o.country_id === countryId);

  if (isCM) {
    const _sgRefund = SB_DASH_REFUND_RATE_BY_COUNTRY.values[SB_DASH_REFUND_RATE_BY_COUNTRY.labels.indexOf("SG")];
    return (
      <>
        <SectionLabel>Performance</SectionLabel>
        <StatPanel state={panelState} onChange={setPanelState}>
          <StatCard label="Country GMV"        value="₱ 1.82M" delta="+11.4%" deltaDir="up" deltaBasis={statPanelDeltaBasis(panelState)} sub="total sales"/>
          <StatCard label="Orders"             value="146"     delta="+8.2%"  deltaDir="up" deltaBasis={statPanelDeltaBasis(panelState)} sub="completed orders"/>
          <StatCard label="AOV"                value="₱ 458"   delta="+2.1%"  deltaDir="up" deltaBasis={statPanelDeltaBasis(panelState)} sub="avg order value"/>
          <StatCard label="Refund rate"        value="1.4%"    sub={`% txns · vs SG ${_sgRefund}%`}/>
        </StatPanel>
        <ChartCard title="GMV vs target" subtitle="Month-to-date · target & last month" kind="progress"
          data={[{ label: "Country GMV", value: 1820000, target: 2000000, valueLabel: "₱ 1.82M", targetLabel: "₱ 2.0M" }]} height={120}/>
        <ChartCard title="Outlet ranking" subtitle="Top 3 + Bottom 3 · this month" kind="ranked-list"
          data={SB_DASH_CM_OUTLET_RANKING[rankMode]}
          actions={<SegToggle ariaLabel="Ranking metric" value={rankMode} onChange={setRankMode}
            options={[{ value: "total", label: "Total sales" }, { value: "sqft", label: "Per sqft" }]}/>}/>
        {!isDateMode && (
          <ChartCard title="AOV trend" subtitle={`${countryName} · 3-month rolling`} kind="line" data={SB_DASH_CM_AOV_TREND.values} height={180}/>
        )}

        <SectionLabel>Loyalty</SectionLabel>
        <StatPanel cols={2}>
          <StatCard label="New members" value="312" delta="+9.4%" deltaDir="up" deltaBasis={statPanelDeltaBasis(panelState)} sub="new members"/>
          <StatCard label="Member-AOV gap" value="₱ 71" sub="member − non-member AOV"/>
        </StatPanel>
        {!isDateMode && (
          <ChartCard title="Redemption-rate trend" subtitle="3-month rolling" kind="line" data={SB_DASH_CM_REDEMPTION_TREND.values} height={180}/>
        )}

        <SectionLabel>Marketing</SectionLabel>
        <StatPanel cols={2}>
          <StatCard label="Promo dependency" value="6.8%" sub="% of GMV from promos · ref 5%"/>
          <StatCard label="Active promos"    value="3"    sub="currently running"/>
        </StatPanel>
        {!isDateMode && (
          <ChartCard title="Promo ROI" subtitle="Redemption rate vs AOV" kind="dual-axis" data={SB_DASH_PROMO_ROI} height={220}/>
        )}

        <SectionLabel>Customers</SectionLabel>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
          <ChartCard title="New vs returning" subtitle="Share of orders" kind="donut" data={SB_DASH_NEW_VS_RETURNING} height={200}/>
          <ChartCard title="Order density" subtitle="GPS heatmap" kind="heatmap" points={SB_DASH_GA_GPS_POINTS} height={200}/>
        </div>
      </>
    );
  }

  // ── AM (area scope). ──
  const activeOutlets = scopedOutlets.filter(o => o.status === "active").length;
  const ordersToday = scopedOutlets.reduce((s, o) => s + (o.orders_today || 0), 0);
  return (
    <>
      <SectionLabel>Performance</SectionLabel>
      <StatPanel state={panelState} onChange={setPanelState}>
        <StatCard label="Area GMV"      value="₱ 820K" delta="+9.2%" deltaDir="up" deltaBasis={statPanelDeltaBasis(panelState)} sub="total sales"/>
        <StatCard label="Area AOV"      value="₱ 441"  delta="+1.8%" deltaDir="up" deltaBasis={statPanelDeltaBasis(panelState)} sub="avg order value"/>
        <StatCard label="Orders"        value={String(ordersToday)} sub="real-time · all outlets"/>
        <StatCard label="Outlets active" value={`${activeOutlets} / ${scopedOutlets.length}`} sub={resolvedArea?.name || "area"}/>
        <StatCard label="POS sync"      value={`${scopedOutlets.filter(o => o.pos_sync === "ok").length} ok`} sub="real-time sync health"/>
      </StatPanel>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
        <ChartCard title="Outlet health ranking" subtitle="Composite score · bottom flagged" kind="ranked-list" data={SB_DASH_AM_OUTLET_HEALTH}/>
        <ChartCard title="GMV per outlet WoW" subtitle="Week-over-week trend" kind="ranked-list" data={SB_DASH_AM_GMV_WOW}/>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
        <ChartCard title="AOV per outlet WoW" subtitle="Week-over-week trend" kind="ranked-list" data={SB_DASH_AM_AOV_WOW}/>
        <ChartCard title="Member-vs-guest mix" subtitle="App-member share per outlet" kind="ranked-list" data={SB_DASH_AM_MEMBER_MIX}/>
      </div>
      <ChartCard title="Hourly heatmap — all outlets" subtitle="Transactions by hour · this week · dark = high volume" kind="matrix-heatmap" data={SB_DASH_AM_HOURLY_MATRIX}/>

      <SectionLabel>Staffing</SectionLabel>
      <FormSection title="Staff count per outlet · this week">
        <Table emptyText="No staff data."
          columns={[
            { label: "Outlet", render: r => <span style={{ ...T.primary() }}>{r.outlet}</span> },
            ..._STAFF_DAYS.map(d => ({ label: d[0].toUpperCase() + d.slice(1), width: 56,
              render: r => <span style={{ ...T_MUTED, fontFeatureSettings: '"tnum"' }}>{r[d] == null ? "—" : r[d]}</span> })),
          ]}
          rows={SB_DASH_AM_STAFF_COUNT}/>
      </FormSection>
      {SB_DASH_AM_STAFF_COUNT.some(r => r.flag) && (
        <InlineAlert kind="warn">One outlet has no staff count for 3+ days — ask the OM to record shift counts.</InlineAlert>
      )}

      <SectionLabel>Quality</SectionLabel>
      <ChartCard title="Refund rate per outlet" subtitle="% of txns · > 2% flagged" kind="ranked-list" data={SB_DASH_AM_REFUND_RATE}/>
      {SB_DASH_AM_REFUND_RATE.some(r => r.value > 2) && (
        <InlineAlert kind="error">Greenbelt 5 refund rate above 2% — 4 "Wrong order" refunds detected (same-reason pattern).</InlineAlert>
      )}

      <SectionLabel>Items</SectionLabel>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
        <ChartCard title="Top products" subtitle="Cross-outlet · units sold" kind="ranked-list" data={SB_DASH_AM_TOP_PRODUCTS}/>
        <ChartCard title="Bottom products" subtitle="Cross-outlet · units sold" kind="ranked-list" data={SB_DASH_AM_BOTTOM_PRODUCTS}/>
      </div>
      <FormSection title="Top 3 SKUs per outlet · this week">
        <Table emptyText="No item data."
          columns={[
            { label: "Outlet", sortable: true, sortKey: "outlet", render: r => <span style={{ ...T.primary() }}>{r.outlet}</span> },
            { label: "#1", render: r => <span style={{ ...T_MUTED }}>{r.skus[0] || "—"}</span> },
            { label: "#2", render: r => <span style={{ ...T_MUTED }}>{r.skus[1] || "—"}</span> },
            { label: "#3", render: r => <span style={{ ...T_MUTED }}>{r.skus[2] || "—"}</span> },
          ]}
          rows={SB_DASH_AM_SKU_BY_OUTLET}/>
      </FormSection>
    </>
  );
}

/**
 * @spec CM-010 · AM-010 — Scope-derived dashboard (page).
 * Thin wrapper: PageHead (title from resolved scope, not hardcoded) + scoped body.
 */
function Dashboard({ role = "CM", scope = {} }) {
  if (!["CM", "AM"].includes(role)) return _notAuthorised;
  const isCM = role === "CM";
  const countryId = scope.country_id || scope.countryId || "PH";
  const countryName = SB2_COUNTRY_BY_ID[countryId]?.country_name || countryId;
  const rawArea = scope.area_id || scope.areaId || null;
  const resolvedArea = rawArea
    ? (SB3_AREA_BY_ID[rawArea] || SB3_AREAS.find(a => AREA_LABEL[rawArea] === a.name) || SB3_AREA_BY_ID[AM_AREA_ID])
    : SB3_AREA_BY_ID[AM_AREA_ID];
  const title = isCM ? `${countryName} performance` : `Area performance — ${resolvedArea?.name || "Area"}`;
  return (
    <div className="page-inner">
      <PageHead title={title}/>
      <PerformanceDashboardContent role={role} scope={scope}/>
    </div>
  );
}

/** @spec OM-010 — Own-outlet dashboard. Body = the outlet-scoped PerformanceDashboardContent. */
function OMDashboard({ role = "OM" }) {
  if (!["OM"].includes(role)) return _notAuthorised;
  const o = SB3_OUTLET_BY_ID[OM_OUTLET_ID];
  return (
    <div className="page-inner">
      <PageHead title={`${o?.name || "Outlet"} · Performance`}/>
      <PerformanceDashboardContent role="OM" scope={{ outlet_id: OM_OUTLET_ID }}/>
    </div>
  );
}

Object.assign(window, { GADashboard, Dashboard, OMDashboard, PerformanceDashboardContent });
})();