// CEO Dashboard — Olie's org-wide rollup
function Dashboard({ persona, aiOn }) {
  const isMobile = useMedia('(max-width: 760px)');
  const isTablet = useMedia('(max-width: 1024px)');
  const week = window.NORWILL_DATA.CURRENT_WEEK_IDX; // rolling: rightmost slot is the current week
  const metricsWithStatus = METRICS.map(m => {
    const current = HISTORY[m.id]?.[week] ?? null;
    const prev = HISTORY[m.id]?.[week - 1] ?? null;
    const status = metricStatus(m, current);
    return { ...m, current, prev, status };
  });
  const reds = metricsWithStatus.filter(m => m.status === 'bad');
  const warns = metricsWithStatus.filter(m => m.status === 'warn');
  const goods = metricsWithStatus.filter(m => m.status === 'good');
  const reported = metricsWithStatus.filter(m => m.current != null);
  const pctGreen = reported.length ? Math.round(goods.length / reported.length * 100) : 0;
  const cashM = METRICS.find(m => m.id === 'cash');
  const hoursM = METRICS.find(m => m.id === 'hours');
  const activeCgM = METRICS.find(m => m.id === 'active_cg');
  const cashVal = HISTORY.cash?.[week] ?? null;
  const hoursVal = HISTORY.hours?.[week] ?? null;
  const activeCgVal = HISTORY.active_cg?.[week] ?? null;

  // Entry compliance by person — empty until Firestore wires in
  const entryComplete = {};
  PEOPLE.forEach(p => { entryComplete[p.id] = 0; });

  // AI panel hides on mobile entirely (perf + composition).
  // On tablet, the AI panel column would crowd the main content, so hide it there too.
  const showAi = aiOn && !isTablet;

  const kpiCols = isMobile ? 'repeat(2, 1fr)' : isTablet ? 'repeat(2, 1fr)' : 'repeat(4, 1fr)';
  const splitCols = isTablet ? '1fr' : '1.2fr 1fr';
  const rocksCols = isMobile ? '1fr' : isTablet ? 'repeat(2, 1fr)' : 'repeat(3, 1fr)';

  return (
    <div style={{
      padding: isMobile ? '20px 16px 32px' : 28,
      display: 'grid', gap: isMobile ? 16 : 20,
      gridTemplateColumns: showAi ? '1fr 340px' : '1fr',
      width: '100%', maxWidth: '100%', minWidth: 0,
    }}>
      {/* LEFT COLUMN */}
      <div style={{ display: 'flex', flexDirection: 'column', gap: isMobile ? 16 : 20, minWidth: 0 }}>
        {/* Greeting */}
        <div>
          <div className="eyebrow">
            {isMobile ? `Q${window.NORWILL_DATA.currentQuarter().quarter} · Week ${window.NORWILL_DATA.weekOfQuarter()}`
                      : `${window.NORWILL_DATA.quarterDateLabel()} · Q${window.NORWILL_DATA.currentQuarter().quarter} Week ${window.NORWILL_DATA.weekOfQuarter()}`}
          </div>
          <h1 className="display" style={{ margin: '6px 0 2px', fontSize: isMobile ? 26 : 30, lineHeight: 1.15 }}>
            Good morning, {persona.name.split(' ')[0]}.
          </h1>
          <div style={{ color: 'var(--ink-600)', fontSize: isMobile ? 13 : 14 }}>
            <span className="numeric" style={{ fontWeight: 600, color: reds.length ? 'var(--slip)' : 'var(--ink-700)' }}>{reds.length}</span> off pace ·{' '}
            <span className="numeric" style={{ fontWeight: 600 }}>{warns.length}</span> at risk ·{' '}
            <span className="numeric" style={{ fontWeight: 600 }}>{reported.length}</span> of <span className="numeric">{METRICS.length}</span> reported
          </div>
        </div>

        {/* KPI strip */}
        <div style={{ display: 'grid', gridTemplateColumns: kpiCols, gap: isMobile ? 10 : 14 }}>
          <KpiTile label="Scorecard Health" value={pctGreen + '%'} sub="metrics on target"
            big accent={pctGreen >= 70 ? 'good' : pctGreen >= 50 ? 'warn' : 'bad'}
            chart={<MiniRing pct={pctGreen}/>} />
          <KpiTile label={isMobile ? 'Cash this week' : 'Cash collected · this week'} value={fmtNum(cashVal, cashM)} sub={window.scorecardTarget(cashM) != null ? `of ${fmtNum(window.scorecardTarget(cashM), cashM)} goal` : 'goal not set'}
            chart={<Spark data={HISTORY.cash} width={isMobile ? 80 : 100} height={28} target={window.scorecardTarget(cashM)} dir=">=" />} />
          <KpiTile label={isMobile ? 'Hours this week' : 'Hours delivered · this week'} value={fmtNum(hoursVal, hoursM)} sub={`of ${fmtNum(window.scorecardTarget(hoursM), hoursM)} goal`}
            chart={<Spark data={HISTORY.hours} width={isMobile ? 80 : 100} height={28} target={window.scorecardTarget(hoursM)} dir=">=" />} />
          <KpiTile label="Active caregivers" value={fmtNum(activeCgVal, activeCgM)} sub={`target ${fmtNum(window.scorecardTarget(activeCgM), activeCgM)}`}
            chart={<Spark data={HISTORY.active_cg} width={isMobile ? 80 : 100} height={28} target={window.scorecardTarget(activeCgM)} dir=">=" />} />
        </div>

        {/* Entry heat + Red metrics */}
        <div style={{ display: 'grid', gridTemplateColumns: splitCols, gap: 14 }}>
          <div className="card" style={{ padding: isMobile ? 16 : 20 }}>
            <CardHead title="Who's entered today" sub="Live compliance across the team"/>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginTop: 14 }}>
              {PEOPLE.map(p => (
                <EntryRow key={p.id} person={p} pct={entryComplete[p.id]} />
              ))}
            </div>
          </div>
          <div className="card" style={{ padding: isMobile ? 16 : 20 }}>
            <CardHead title={`Red this week (${reds.length})`} sub="Auto-flagged, feeds L10"
              cta="View all"/>
            <div style={{ display: 'flex', flexDirection: 'column', marginTop: 8 }}>
              {reds.slice(0, 5).map((m, i) => {
                const owner = PEOPLE.find(p => p.id === m.ownerId);
                return (
                  <div key={m.id} style={{
                    display: 'flex', alignItems: 'center', gap: 10,
                    padding: '10px 0', borderBottom: i < Math.min(reds.length, 5) - 1 ? '1px solid var(--hairline)' : 'none',
                  }}>
                    <StatusDot status="bad"/>
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div style={{ fontSize: 13, fontWeight: 500, color: 'var(--ink-900)',
                        whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{m.label}</div>
                      <div style={{ fontSize: 11, color: 'var(--ink-500)' }}>
                        {owner?.name.split(' ')[0]} · target <span className="numeric">{fmtNum(window.scorecardTarget(m), m)}</span> · actual <span className="numeric">{fmtNum(m.current, m)}</span>
                      </div>
                    </div>
                    {!isMobile && <Spark data={(HISTORY[m.id] || []).slice(-6)} width={50} height={20} target={window.scorecardTarget(m)} dir={m.dir} fill={false}/>}
                  </div>
                );
              })}
              {reds.length === 0 && (
                <div style={{ padding: '14px 0', fontSize: 13, color: 'var(--ink-500)' }}>
                  No off-pace metrics this week.
                </div>
              )}
            </div>
          </div>
        </div>

        {/* Rocks rollup */}
        <div className="card" style={{ padding: isMobile ? 16 : 20 }}>
          <CardHead title={`${window.NORWILL_DATA.currentQuarter().label} Rocks`} sub={`${ROCKS.length} total · ${ROCKS.filter(r => r.status==='behind').length} off track`}/>
          <div style={{ display: 'grid', gridTemplateColumns: rocksCols, gap: 12, marginTop: 14 }}>
            {ROCKS.map(rock => {
              const owner = PEOPLE.find(p => p.id === rock.ownerId);
              const statusColor = { 'on-track': 'good', 'at-risk': 'warn', 'behind': 'bad', 'done': 'good' }[rock.status] || 'bad';
              return (
                <div key={rock.id} style={{
                  padding: 14, borderRadius: 10, border: '1px solid var(--hairline)',
                  background: 'var(--surface-sunk)',
                }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 6 }}>
                    <StatusDot status={statusColor}/>
                    <span className={'chip ' + (statusColor === 'good' ? 'good' : statusColor === 'warn' ? 'warn' : 'bad')} style={{ height: 18, fontSize: 10.5, padding: '0 7px' }}>
                      {({ 'on-track':'On track', 'at-risk':'At risk', 'behind':'Off track', 'done':'Done' })[rock.status] || rock.status}
                    </span>
                    <span style={{ flex: 1 }}/>
                    <Avatar person={owner} size={20}/>
                  </div>
                  <div style={{ fontSize: 13.5, fontWeight: 600, lineHeight: 1.25, marginBottom: 10 }}>
                    {rock.title}
                  </div>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                    <div style={{ flex: 1, height: 5, background: 'var(--forest-mist)', borderRadius: 99, overflow: 'hidden' }}>
                      <div style={{ width: rock.pct + '%', height: '100%',
                        background: rock.pct >= 75 ? 'var(--amber)' : 'var(--norwill-leaf)' }}/>
                    </div>
                    <span className="numeric" style={{ fontSize: 11.5, fontWeight: 600, color: 'var(--ink-700)' }}>{rock.pct}%</span>
                  </div>
                  <div style={{ fontSize: 10.5, color: 'var(--ink-500)', marginTop: 8 }}>
                    Due {new Date(rock.due).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })} · <span className="numeric">{rock.linked.length}</span> linked metrics
                  </div>
                </div>
              );
            })}
          </div>
        </div>

        {/* Function grid — all metrics compact */}
        <FunctionGrid metricsWithStatus={metricsWithStatus} isMobile={isMobile} isTablet={isTablet}/>
      </div>

      {/* RIGHT — AI panel (hidden on tablet & mobile) */}
      {showAi && <AiPanel/>}
    </div>
  );
}

function KpiTile({ label, value, sub, delta, deltaGood, chart, big, accent }) {
  return (
    <div className="card" style={{ padding: 16, position: 'relative' }}>
      <div style={{ fontSize: 11.5, color: 'var(--ink-500)', letterSpacing: 0.04,
        textTransform: 'uppercase', fontWeight: 600 }}>{label}</div>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginTop: 6 }}>
        <div style={{ fontSize: 26, fontWeight: 700, letterSpacing: -0.5,
          color: accent === 'bad' ? 'var(--bad)' : accent === 'warn' ? 'var(--warn)' : 'var(--ink-900)' }}>
          {value}
        </div>
        {delta != null && <Delta value={delta} good={deltaGood}/>}
      </div>
      <div style={{ fontSize: 11.5, color: 'var(--ink-500)', marginTop: 2 }}>{sub}</div>
      <div style={{ marginTop: 10, display: 'flex', justifyContent: 'flex-end' }}>{chart}</div>
    </div>
  );
}

function MiniRing({ pct }) {
  const r = 14, c = 2 * Math.PI * r;
  const dash = (pct / 100) * c;
  const color = pct >= 70 ? 'var(--good)' : pct >= 50 ? 'var(--warn)' : 'var(--bad)';
  return (
    <svg width="36" height="36" viewBox="0 0 36 36">
      <circle cx="18" cy="18" r={r} fill="none" stroke="var(--ink-100)" strokeWidth="3.5"/>
      <circle cx="18" cy="18" r={r} fill="none" stroke={color} strokeWidth="3.5"
        strokeDasharray={`${dash} ${c}`} strokeDashoffset="0"
        transform="rotate(-90 18 18)" strokeLinecap="round"/>
    </svg>
  );
}

function CardHead({ title, sub, cta }) {
  return (
    <div style={{ display: 'flex', alignItems: 'baseline', gap: 10 }}>
      <div>
        <div style={{ fontSize: 14, fontWeight: 600, letterSpacing: -0.1 }}>{title}</div>
        {sub && <div style={{ fontSize: 11.5, color: 'var(--ink-500)', marginTop: 2 }}>{sub}</div>}
      </div>
      <div style={{ flex: 1 }}/>
      {cta && <button style={{
        background: 'none', border: 'none', color: 'var(--brand-700)',
        fontSize: 12, fontWeight: 600, cursor: 'pointer',
      }}>{cta} →</button>}
    </div>
  );
}

function EntryRow({ person, pct }) {
  const status = pct >= 80 ? 'good' : pct >= 40 ? 'warn' : 'bad';
  const color = status === 'good' ? 'var(--good)' : status === 'warn' ? 'var(--warn)' : 'var(--bad)';
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
      <Avatar person={person} size={28}/>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontSize: 12.5, fontWeight: 600, color: 'var(--ink-800)' }}>{person.name}</div>
        <div style={{ fontSize: 10.5, color: 'var(--ink-500)' }}>{person.role}</div>
      </div>
      <div style={{ flex: 1.5, maxWidth: 180, height: 6, background: 'var(--ink-100)', borderRadius: 99, overflow: 'hidden' }}>
        <div style={{ width: pct + '%', height: '100%', background: color, transition: 'width 0.4s' }}/>
      </div>
      <span className="mono tnum" style={{ fontSize: 11.5, fontWeight: 600,
        color: 'var(--ink-700)', width: 34, textAlign: 'right' }}>{pct}%</span>
      {pct < 40 && <button style={{
        background: 'var(--brand-700)', color: '#fff', border: 'none',
        fontSize: 10.5, padding: '3px 8px', borderRadius: 6, fontWeight: 600,
      }}>Nudge</button>}
    </div>
  );
}

function FunctionGrid({ metricsWithStatus, isMobile, isTablet }) {
  const byFn = {};
  metricsWithStatus.forEach(m => {
    byFn[m.fn] = byFn[m.fn] || [];
    byFn[m.fn].push(m);
  });
  const funcs = Object.keys(byFn);
  const cols = isMobile ? '1fr' : isTablet ? 'repeat(2, 1fr)' : 'repeat(3, 1fr)';
  return (
    <div className="card" style={{ padding: isMobile ? 16 : 20 }}>
      <CardHead title="All metrics" sub="Grouped by function — click to drill in"/>
      <div style={{ display: 'grid', gridTemplateColumns: cols, gap: 14, marginTop: 14 }}>
        {funcs.map(fn => (
          <div key={fn} style={{ border: '1px solid var(--line)', borderRadius: 10, overflow: 'hidden' }}>
            <div style={{ padding: '8px 12px', fontSize: 11, fontWeight: 700, letterSpacing: 0.06,
              textTransform: 'uppercase', color: 'var(--ink-600)', background: 'var(--ink-50)',
              borderBottom: '1px solid var(--line)' }}>{fn}</div>
            {byFn[fn].map((m, i) => {
              const owner = PEOPLE.find(p => p.id === m.ownerId);
              return (
                <div key={m.id} style={{ display: 'flex', alignItems: 'center', gap: 8,
                  padding: '8px 12px', fontSize: 12, borderBottom: i < byFn[fn].length - 1 ? '1px solid var(--line)' : 'none' }}>
                  <StatusDot status={m.status} size={7}/>
                  <div style={{ flex: 1, minWidth: 0, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', color: 'var(--ink-800)' }}>{m.label}</div>
                  <div className="mono tnum" style={{ fontSize: 11.5, color: 'var(--ink-700)', fontWeight: 600, minWidth: 50, textAlign: 'right' }}>{fmtNum(m.current, m)}</div>
                </div>
              );
            })}
          </div>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { Dashboard });