// Dashboard — visão consolidada

const DashboardPage = () => {
  const totalSemana = VENDAS_POR_DIA.reduce((s, d) => s + d.v, 0);
  return (
    <div className="page">
      <div className="page-head">
        <div>
          <span className="eyebrow"><span className="play"/>Hoje · 19 maio · 20:42</span>
          <h1 style={{marginTop:10}}>Boa noite, Marcela.</h1>
          <p className="lead">Live #48 está rolando agora. 47 pedidos registrados nos últimos 38 min.</p>
        </div>
        <div className="actions">
          <button className="btn ghost"><Ic name="download" size={13}/> Exportar</button>
          <button className="btn"><Ic name="plus" size={13}/> Nova venda</button>
          <button className="btn accent"><Ic name="live" size={13}/> Painel da live</button>
        </div>
      </div>

      <div className="stack">
        {/* Linha 1 — Hoje */}
        <div>
          <div className="t-mono-label mb-12">Hoje</div>
          <div className="stat-grid cols-4">
            <Stat glow="green" label="Faturamento" value={brl(6240.00)} delta={42.8} hint="vs. terça passada"/>
            <Stat label="Pedidos" value={47} delta={51.6}/>
            <Stat label="Ticket médio" value={brl(132.77)} delta={-5.6}/>
            <Stat label="Clientes novos" value={9} delta={28.5}/>
          </div>
        </div>

        {/* Linha 2 — Mês */}
        <div>
          <div className="t-mono-label mb-12 row" style={{justifyContent:'space-between'}}>
            <span>Mês de maio</span>
            <span className="t-3">Meta: {brl(180000)} · faltam 11 dias</span>
          </div>
          <div className="stat-grid cols-4">
            <Stat glow label="Faturamento mês" value={brlNoCents(142840)} delta={18.2}
              footer={<div className="mt-8"><div style={{height:5, background:'var(--bg-3)', borderRadius:3, overflow:'hidden'}}>
                <div style={{height:'100%', width:'79%', background:'linear-gradient(90deg, var(--accent), var(--green))'}}/>
              </div>
              <div className="t-mono-label mt-4" style={{letterSpacing:'0.08em', textTransform:'none'}}>79% da meta</div></div>}
            />
            <Stat label="Pedidos mês" value={892} delta={22.4}/>
            <Stat label="Clientes ativos" value={478} delta={11.3}/>
            <Stat label="Inadimplência" value="4.2" valueSuffix="%" delta={-1.8} glow="cyan"/>
          </div>
        </div>

        {/* Gráficos lado a lado */}
        <div style={{ display:'grid', gridTemplateColumns:'1fr 380px', gap:18 }}>
          <div className="card">
            <div className="card-head">
              <h3>Faturamento — últimos 14 dias</h3>
              <span className="meta">{brl(totalSemana)} no período</span>
            </div>
            <LineChart data={VENDAS_POR_DIA}/>
            <div className="row gap-16 mt-12" style={{fontSize:11, color:'var(--text-3)'}}>
              <span><span style={{display:'inline-block', width:8, height:8, background:'var(--accent)', borderRadius:2, marginRight:6}}/>Vendas diárias</span>
              <span><span style={{display:'inline-block', width:8, height:8, background:'var(--green)', borderRadius:2, marginRight:6}}/>Pico (dia de live)</span>
            </div>
          </div>

          <div className="card">
            <div className="card-head">
              <h3>Por canal · mês</h3>
              <span className="meta">{brlNoCents(142840)}</span>
            </div>
            <div className="row gap-16" style={{justifyContent:'center'}}>
              <Donut center="58%" label="Live" segments={[
                { value: 58, color: 'var(--accent)' },
                { value: 22, color: 'var(--cyan)' },
                { value: 14, color: 'var(--green)' },
                { value: 6, color: 'var(--purple)' },
              ]}/>
            </div>
            <div className="stack-tight mt-16">
              <div className="row" style={{justifyContent:'space-between', fontSize:12}}>
                <span className="row gap-6"><span style={{width:8, height:8, background:'var(--accent)', borderRadius:2}}/>Live</span>
                <span className="t-num">{brlNoCents(82847)} · 58%</span>
              </div>
              <div className="row" style={{justifyContent:'space-between', fontSize:12}}>
                <span className="row gap-6"><span style={{width:8, height:8, background:'var(--cyan)', borderRadius:2}}/>Loja física</span>
                <span className="t-num">{brlNoCents(31425)} · 22%</span>
              </div>
              <div className="row" style={{justifyContent:'space-between', fontSize:12}}>
                <span className="row gap-6"><span style={{width:8, height:8, background:'var(--green)', borderRadius:2}}/>Loja virtual</span>
                <span className="t-num">{brlNoCents(19998)} · 14%</span>
              </div>
              <div className="row" style={{justifyContent:'space-between', fontSize:12}}>
                <span className="row gap-6"><span style={{width:8, height:8, background:'var(--purple)', borderRadius:2}}/>WhatsApp</span>
                <span className="t-num">{brlNoCents(8570)} · 6%</span>
              </div>
            </div>
          </div>
        </div>

        {/* Alertas + Feed */}
        <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:18 }}>
          <div className="card">
            <div className="card-head">
              <h3>Alertas operacionais</h3>
              <Badge kind="amber" dot>7 itens</Badge>
            </div>
            <div className="stack-tight">
              <AlertRow icon="package" color="red" title="3 produtos sem estoque" desc="Saia Plissada Cinza · Blusa Tricot Bege +1" cta="Ver lista"/>
              <AlertRow icon="dollar" color="red" title="2 parcelas vencidas" desc="Camila Tavares e Fernanda Lima · total R$ 221,13" cta="Cobrar"/>
              <AlertRow icon="dollar" color="amber" title="4 parcelas vencendo em 3 dias" desc="R$ 392,30 a receber" cta="Lembretes"/>
              <AlertRow icon="truck" color="amber" title="5 pedidos parados há +2 dias" desc="Aguardando envio" cta="Gerar etiquetas"/>
              <AlertRow icon="cart" color="cyan" title="4 carrinhos abandonados" desc="R$ 1.539,40 em risco · últimas 24h" cta="Recuperar"/>
              <AlertRow icon="whatsapp" color="amber" title="Saldo de mensagens baixo" desc="R$ 28,40 restantes (≈ 142 envios)" cta="Recarregar"/>
            </div>
          </div>

          <div className="card">
            <div className="card-head">
              <h3>Atividade recente</h3>
              <a className="t-mono-label" style={{color:'var(--text-2)', cursor:'pointer', letterSpacing:'0.12em'}}>Ver tudo →</a>
            </div>
            <table className="tbl" style={{margin:'-4px 0'}}>
              <tbody>
                {PEDIDOS_LIVE.slice(0, 7).map(p => (
                  <tr key={p.nr}>
                    <td className="mono t-3" style={{width:36}}>{p.hora}</td>
                    <td><Badge kind="accent">LIVE</Badge></td>
                    <td className="strong">{p.instagram}</td>
                    <td className="t-3" style={{maxWidth:140, overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap'}}>{p.produto}</td>
                    <td className="num">{brl(p.valor)}</td>
                    <td><StatusBadge status={p.status}/></td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>

        {/* Status integrações */}
        <div className="card">
          <div className="card-head">
            <h3>Integrações</h3>
            <span className="meta">tudo online</span>
          </div>
          <div className="stat-grid cols-4">
            <IntegrationItem name="Mercado Pago" status="conectado" color="green"/>
            <IntegrationItem name="Correios SIGEP" status="online" color="green"/>
            <IntegrationItem name="WhatsApp Business" status="ativo · 28,40 saldo" color="amber"/>
            <IntegrationItem name="Bling NF-e" status="conectado · 218 emitidas/mês" color="green"/>
          </div>
        </div>
      </div>
    </div>
  );
};

const AlertRow = ({ icon, color, title, desc, cta }) => (
  <div className="row gap-12" style={{padding:'10px 0', borderBottom:'1px solid var(--line)'}}>
    <div style={{ width:32, height:32, borderRadius:7, background: `var(--bg-3)`, color:`var(--${color === 'red' ? 'red' : color === 'amber' ? 'accent' : 'cyan'})`, display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0 }}>
      <Ic name={icon} size={15}/>
    </div>
    <div style={{flex:1, minWidth:0}}>
      <div style={{fontSize:13, fontWeight:500}}>{title}</div>
      <div className="t-3" style={{fontSize:11.5}}>{desc}</div>
    </div>
    <button className="btn sm ghost">{cta}</button>
  </div>
);

const IntegrationItem = ({ name, status, color }) => (
  <div style={{ padding:'10px 12px', background:'var(--bg-3)', border:'1px solid var(--line)', borderRadius:8 }}>
    <div className="row gap-8 mb-8">
      <span style={{ width:7, height:7, borderRadius:'50%', background: `var(--${color})`, boxShadow: `0 0 8px var(--${color})` }}/>
      <div style={{fontSize:12.5, fontWeight:500}}>{name}</div>
    </div>
    <div className="t-3" style={{fontSize:11}}>{status}</div>
  </div>
);

Object.assign(window, { DashboardPage });