// assets/screen_dashboard.jsx
function ScreenDashboard({ t, setTweak }) {
  const [window_, setWindow] = React.useState('24h');
  const [templateFilter, setTemplateFilter] = React.useState('all');
  const [appFilter, setAppFilter] = React.useState('all');

  const d = DASHBOARD;
  const variant = t.dashboardCharts; // default | sparkline | minimal

  const topSlow = [...SESSIONS].sort((a, b) => b.duration - a.duration).slice(0, 5);
  const topExp = [...SESSIONS].sort((a, b) => b.cost - a.cost).slice(0, 5);

  return (
    <div className="page">
      <div className="page-head">
        <h1>Overview</h1>
        <span className="page-sub">live · auto-refresh 30s</span>
        <div className="page-actions">
          <div className="segmented">
            {['1h', '24h', '7d', '30d'].map(w => (
              <button key={w} className={w === window_ ? 'active' : ''} onClick={() => setWindow(w)}>{w}</button>
            ))}
          </div>
          <select className="select" style={{ width: 'auto' }} value={templateFilter} onChange={e => setTemplateFilter(e.target.value)}>
            <option value="all">All templates</option>
            {TEMPLATE_KINDS.map(k => <option key={k.name}>{k.name}</option>)}
          </select>
          <select className="select" style={{ width: 'auto' }} value={appFilter} onChange={e => setAppFilter(e.target.value)}>
            <option value="all">All apps</option>
            {APPS.map(a => <option key={a}>{a}</option>)}
          </select>
          <button className="btn">
            <Icon name="refresh" size={13} /> Refresh
          </button>
        </div>
      </div>

      {/* KPIs */}
      <div className="grid cols-4" style={{ marginBottom: 14 }}>
        <KpiCard label="Sessions (24h)" value={d.kpi.sessions_24h.value} delta={d.kpi.sessions_24h.delta}
          sparkData={variant !== 'minimal' ? d.kpi.sessions_24h.spark : null} sparkColor="var(--chart-2)" icon="sessions" />
        <KpiCard label="Avg gen time" value={`${d.kpi.avg_gen_time.value_p50}m`} delta={d.kpi.avg_gen_time.delta} icon="cost"
          sparkData={variant !== 'minimal' ? d.kpi.avg_gen_time.spark : null} sparkColor="var(--chart-4)" />
        <KpiCard label="Publish success" value={`${d.kpi.publish_success.value}`} unit="%" delta={d.kpi.publish_success.delta} icon="deploy"
          sparkData={variant !== 'minimal' ? d.kpi.publish_success.spark : null} sparkColor="var(--chart-3)" />
        <KpiCard label="AI cost (24h)" value={`$${d.kpi.total_cost.value}`} delta={d.kpi.total_cost.delta} icon="zap"
          sparkData={variant !== 'minimal' ? d.kpi.total_cost.spark : null} sparkColor="var(--chart-1)" />
      </div>

      {/* Avg gen time subtitle (p50 / p95) below kpi */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12, marginTop: -12, marginBottom: 14, fontSize: 11, color: 'var(--text-tertiary)', fontFamily: 'var(--font-mono)' }}>
        <div style={{ padding: '0 16px' }}>resp time</div>
        <div style={{ padding: '0 16px' }}>p50 {d.kpi.avg_gen_time.value_p50}m · p95 {d.kpi.avg_gen_time.value_p95}m</div>
        <div style={{ padding: '0 16px' }}>87.2% · 24h trailing</div>
        <div style={{ padding: '0 16px' }}>cost / session $0.58 avg</div>
      </div>

      {/* Charts row */}
      <div className="grid" style={{ gridTemplateColumns: variant === 'minimal' ? '1.5fr 1fr' : '1.5fr 1fr 1fr', marginBottom: 14 }}>
        <div className="card">
          <div className="card-head">
            <h3>Sessions per hour</h3>
            <span className="sub">last 24h · split by template_kind</span>
            <div className="actions" style={{ display: 'flex', gap: 8 }}>
              {d.sessions_timeline.series.map(s => (
                <span key={s.name} style={{ fontSize: 11, color: 'var(--text-secondary)', display: 'flex', alignItems: 'center', gap: 4 }}>
                  <span style={{ width: 8, height: 8, borderRadius: 2, background: s.color }} /> {s.name}
                </span>
              ))}
            </div>
          </div>
          <div className="card-body">
            {variant === 'minimal'
              ? <LineChart series={d.sessions_timeline.series} labels={d.sessions_timeline.labels} height={180} />
              : <StackedBars data={d.sessions_timeline.labels.map((_, i) => {
                  const o = {}; d.sessions_timeline.series.forEach(s => o[s.name] = s.data[i]); return o;
                })} labels={d.sessions_timeline.labels}
                keys={d.sessions_timeline.series.map(s => s.name)}
                colors={d.sessions_timeline.series.map(s => s.color)} height={180} />
            }
          </div>
        </div>

        <div className="card">
          <div className="card-head">
            <h3>Failures by error type</h3>
            <span className="sub">top 10 · 24h</span>
          </div>
          <div className="card-body">
            <HBarChart data={d.failures} maxBars={10} color="var(--danger)" />
          </div>
        </div>

        {variant !== 'minimal' && (
          <div className="card">
            <div className="card-head">
              <h3>Cost trend</h3>
              <span className="sub">7d · by model</span>
              <div className="actions" style={{ display: 'flex', gap: 8 }}>
                {d.cost_trend.series.map(s => (
                  <span key={s.name} style={{ fontSize: 11, color: 'var(--text-secondary)', display: 'flex', alignItems: 'center', gap: 4 }}>
                    <span style={{ width: 8, height: 8, borderRadius: 2, background: s.color }} /> {s.name}
                  </span>
                ))}
              </div>
            </div>
            <div className="card-body">
              <LineChart series={d.cost_trend.series} labels={d.cost_trend.labels} height={180} kind="area" yFmt={v => '$' + Math.round(v)} />
            </div>
          </div>
        )}
      </div>

      {/* Tables */}
      <div className="grid cols-2">
        <div className="card">
          <div className="card-head">
            <h3>Top 5 slow sessions</h3>
            <span className="sub">duration desc · 24h</span>
            <div className="actions"><a href="#/sessions" className="btn xs ghost">View all <Icon name="arrowR" size={11} /></a></div>
          </div>
          <div className="card-body flush">
            <table className="tbl">
              <tbody>
                {topSlow.map(s => (
                  <tr key={s.id} className="clickable" onClick={() => location.hash = '/sessions/' + s.id}>
                    <td className="id">{shortId(s.id)}</td>
                    <td className="dim2">{s.project_name}</td>
                    <td><Badge kind="neutral">{s.template_kind}</Badge></td>
                    <td className="num text-danger">{formatDur(s.duration)}</td>
                    <td className="num"><Mono>${s.cost.toFixed(2)}</Mono></td>
                    <td><Icon name="chevron" size={12} style={{ color: 'var(--text-tertiary)' }} /></td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>

        <div className="card">
          <div className="card-head">
            <h3>Top 5 expensive sessions</h3>
            <span className="sub">cost desc · 24h</span>
            <div className="actions"><a href="#/cost" className="btn xs ghost">Cost view <Icon name="arrowR" size={11} /></a></div>
          </div>
          <div className="card-body flush">
            <table className="tbl">
              <tbody>
                {topExp.map(s => (
                  <tr key={s.id} className="clickable" onClick={() => location.hash = '/sessions/' + s.id}>
                    <td className="id">{shortId(s.id)}</td>
                    <td className="dim2">{s.project_name}</td>
                    <td className="dim"><Mono>{s.merchant.split('@')[0]}</Mono></td>
                    <td className="num text-danger" style={{ fontWeight: 600 }}><Mono>${s.cost.toFixed(2)}</Mono></td>
                    <td className="num dim"><Mono>{s.model}</Mono></td>
                    <td><Icon name="chevron" size={12} style={{ color: 'var(--text-tertiary)' }} /></td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { ScreenDashboard });