/* ============================================================
   ZERO — Dashboard screen. window.Screens.Dashboard
   ============================================================ */
(function () {
  const { useState, useEffect, useRef } = React;
  const I = window.Icon;
  const { Sparkline, AreaChart, Bars } = window.Charts;
  const { Card, SectionHead, StatusBadge, Badge } = window.UI;
  const D = window.DATA;

  function KpiCard({ k, i }) {
    return (
      <Card className="rise" style={{ animationDelay: i * 0.05 + 's', padding: 16, overflow: 'hidden' }}>
        <div className="row between" style={{ marginBottom: 10 }}>
          <span style={{ fontSize: 12, color: 'var(--tx-2)', fontWeight: 600 }}>{k.label}</span>
          <span className="badge" style={{ color: k.up ? 'var(--green)' : 'var(--rose)', borderColor: 'transparent',
            background: k.up ? 'var(--green-soft)' : 'var(--rose-soft)', fontSize: 10.5, padding: '2px 6px' }}>
            {k.up ? <I.arrowUp w={11} /> : <I.arrowDown w={11} />}{k.delta}
          </span>
        </div>
        <div className="row between" style={{ alignItems: 'flex-end' }}>
          <div>
            <div className="tnum" style={{ fontSize: 26, fontWeight: 800, letterSpacing: '-0.04em', lineHeight: 1 }}>{k.value}</div>
            <div style={{ fontSize: 10.5, color: 'var(--tx-3)', marginTop: 5 }}>{k.sub}</div>
          </div>
          <Sparkline data={k.spark} color={k.accent} w={84} h={34} />
        </div>
      </Card>
    );
  }

  function AgentStatusRow({ a }) {
    return (
      <div className="row gap10" style={{ padding: '9px 0' }}>
        <span className="avatar" style={{ width: 32, height: 32, background: a.hue }}>{a.name[0]}</span>
        <div className="grow" style={{ minWidth: 0 }}>
          <div className="row gap8">
            <span style={{ fontWeight: 700, fontSize: 13 }}>{a.name}</span>
            <span style={{ fontSize: 11, color: 'var(--tx-3)' }}>{a.role}</span>
          </div>
          <div className="ellipsis" style={{ fontSize: 11.5, color: 'var(--tx-2)', marginTop: 1 }}>{a.task}</div>
        </div>
        <StatusBadge status={a.status} />
      </div>
    );
  }

  function ActivityItem({ a }) {
    return (
      <div className="row gap10" style={{ padding: '10px 0', position: 'relative' }}>
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', flex: 'none', paddingTop: 4 }}>
          <span className="dot" style={{ background: a.dot, width: 8, height: 8 }} />
          <span style={{ flex: 1, width: 1, background: 'var(--line)', marginTop: 4 }} />
        </div>
        <div className="grow" style={{ minWidth: 0 }}>
          <div className="row gap6" style={{ marginBottom: 2 }}>
            <span style={{ fontWeight: 700, fontSize: 12.5, color: a.dot }}>{a.agent}</span>
            <Badge soft="oklch(1 0 0 /.05)" color="var(--tx-3)">{a.tag}</Badge>
            <span style={{ marginLeft: 'auto', fontSize: 11, color: 'var(--tx-3)' }} className="mono">{a.time}</span>
          </div>
          <div style={{ fontSize: 12.5, color: 'var(--tx-1)', lineHeight: 1.45 }}>{a.text}</div>
        </div>
      </div>
    );
  }

  function LogLine({ l }) {
    const c = { ok: 'var(--green)', run: 'var(--violet-2)', warn: 'var(--amber)', info: 'var(--teal)' }[l.lvl];
    return (
      <div className="row gap8 mono" style={{ fontSize: 11.5, padding: '3px 0', alignItems: 'flex-start' }}>
        <span style={{ color: 'var(--tx-3)' }}>{l.t}</span>
        <span style={{ color: c, fontWeight: 600, textTransform: 'uppercase', flex: 'none', width: 34 }}>{l.lvl}</span>
        <span style={{ color: 'var(--tx-1)' }}>{l.m}</span>
      </div>
    );
  }

  function Dashboard() {
    const [tab, setTab] = useState('Receita');
    const tabs = { Receita: { data: D.revenueSeries, color: 'var(--green)' },
                   Leads: { data: [8,11,9,14,16,15,19,22,21,26,28,31], color: 'var(--teal)' },
                   Tarefas: { data: [30,34,32,40,44,42,50,55,58,63,68,74], color: 'var(--violet)' } };
    const cur = tabs[tab];
    const totalRev = 'R$ 48,9 mil';

    return (
      <div className="page">
        {/* hero banner */}
        <div className="panel rise" style={{ padding: '18px 20px', marginBottom: 18, position: 'relative', overflow: 'hidden',
          background: 'linear-gradient(100deg, var(--violet-soft), transparent 60%), linear-gradient(180deg, oklch(0.20 0.016 265 /.7), oklch(0.175 0.014 265 /.7))' }}>
          <div className="row between wrap gap16">
            <div className="row gap12">
              <span style={{ display: 'grid', placeItems: 'center', width: 40, height: 40, borderRadius: 11, background: 'var(--violet-soft)', color: 'var(--violet-2)' }}><I.sparkle w={20} /></span>
              <div>
                <div className="row gap8"><span className="h3">Sua empresa rodou 1.284 tarefas enquanto você estava fora</span>
                  <span className="badge" style={{ color: 'var(--green)', background: 'var(--green-soft)', borderColor: 'transparent' }}><span className="dot dot-pulse" style={{ background: 'var(--green)', color: 'var(--green)' }} />Tudo no ar</span></div>
                <div style={{ fontSize: 12.5, color: 'var(--tx-2)', marginTop: 2 }}>6 agentes ativos · última sincronização há 12s · 0 incidentes · ~R$ 11 mil de receita recuperada durante a noite</div>
              </div>
            </div>
            <button className="btn btn-primary"><I.cpu w={16} /> Abrir Central de Comando</button>
          </div>
        </div>

        {/* KPI grid */}
        <div className="grid" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(190px, 1fr))', marginBottom: 18 }}>
          {D.kpis.map((k, i) => <KpiCard key={k.id} k={k} i={i} />)}
        </div>

        {/* main split */}
        <div className="grid" style={{ gridTemplateColumns: '1.6fr 1fr' }}>
          {/* chart */}
          <Card style={{ padding: 20 }}>
            <SectionHead title="Desempenho" sub="Últimos 12 meses" action={
              <div className="row gap4" style={{ background: 'var(--bg-1)', padding: 3, borderRadius: 9, border: '1px solid var(--line)' }}>
                {Object.keys(tabs).map(t => (
                  <button key={t} onClick={() => setTab(t)} style={{ padding: '5px 11px', borderRadius: 7, fontSize: 12, fontWeight: 600, cursor: 'pointer', border: 'none',
                    background: tab === t ? 'var(--bg-3)' : 'transparent', color: tab === t ? 'var(--tx-0)' : 'var(--tx-2)' }}>{t}</button>
                ))}
              </div>} />
            <div className="row gap16" style={{ marginBottom: 8 }}>
              <div><div className="tnum" style={{ fontSize: 28, fontWeight: 800, letterSpacing: '-0.04em', whiteSpace: 'nowrap' }}>{tab === 'Receita' ? totalRev : tab === 'Leads' ? '1.284' : '2.310'}</div>
                <div style={{ fontSize: 11.5, color: 'var(--tx-2)' }}>{tab} no período</div></div>
              <span className="badge" style={{ color: 'var(--green)', background: 'var(--green-soft)', borderColor: 'transparent', alignSelf: 'flex-start', marginTop: 4 }}><I.trend w={12} /> +18,4%</span>
            </div>
            <AreaChart data={cur.data} labels={D.revenueMonths} color={cur.color} color2="var(--teal)" h={210} />
          </Card>

          {/* agent status */}
          <Card style={{ padding: 18 }}>
            <SectionHead icon="cpu" title="Status dos Agentes" action={<Badge soft="var(--green-soft)" color="var(--green)" dot>5 ativos</Badge>} />
            <div>{D.agents.map(a => <AgentStatusRow key={a.id} a={a} />)}</div>
          </Card>

          {/* activity timeline */}
          <Card style={{ padding: 18 }}>
            <SectionHead icon="activity" title="Atividade Recente" action={<button className="btn btn-ghost btn-sm">Ver tudo <I.arrowRight w={13} /></button>} />
            <div style={{ maxHeight: 320, overflowY: 'auto', marginRight: -6, paddingRight: 6 }}>
              {D.activity.map((a, i) => <ActivityItem key={i} a={a} />)}
            </div>
          </Card>

          {/* AI logs */}
          <Card style={{ padding: 18, background: 'linear-gradient(180deg, oklch(0.18 0.015 265 /.8), oklch(0.155 0.012 265 /.9))' }}>
            <SectionHead icon="code" title="Log de Execução da IA" action={
              <span className="badge mono" style={{ color: 'var(--green)', background: 'var(--green-soft)', borderColor: 'transparent' }}><span className="dot blink" style={{ background: 'var(--green)' }} />ao vivo</span>} />
            <div style={{ background: 'oklch(0.12 0.01 265 /.6)', borderRadius: 10, border: '1px solid var(--line)', padding: '12px 14px', maxHeight: 300, overflowY: 'auto' }}>
              {D.aiLogs.map((l, i) => <LogLine key={i} l={l} />)}
              <div className="row gap8 mono" style={{ fontSize: 11.5, padding: '3px 0', color: 'var(--violet-2)' }}>
                <span style={{ color: 'var(--tx-3)' }}>14:02:13</span><span className="blink">▋</span>
              </div>
            </div>
          </Card>
        </div>
      </div>
    );
  }

  window.Screens = window.Screens || {};
  window.Screens.Dashboard = Dashboard;
})();