// Módulo SITE — Pedidos e-com + Carrinhos abandonados

const SitePedidosPage = () => (
  <div className="page">
    <div className="page-head">
      <div>
        <span className="eyebrow"><span className="play"/>Loja virtual · estudioaurora.com.br</span>
        <h1 style={{marginTop:10}}>Pedidos da loja virtual</h1>
        <p className="lead">Pedidos do e-commerce · status, rastreio, gestão de envio.</p>
      </div>
      <div className="actions">
        <button className="btn ghost"><Ic name="download" size={13}/> Exportar</button>
        <button className="btn"><Ic name="truck" size={13}/> Gerar etiquetas (3)</button>
        <button className="btn primary"><Ic name="whatsapp" size={13}/> Notificar selecionados</button>
      </div>
    </div>

    <div className="stat-grid cols-4 mb-24">
      <Stat glow="green" label="Faturado hoje" value={brl(2890.40)} delta={14.2}/>
      <Stat label="Aguardando pgto" value="3" hint={brl(689.60)}/>
      <Stat label="Em separação" value="5" hint="prazo médio 1.8d"/>
      <Stat label="Em trânsito" value="14" hint="rastreio ativo"/>
    </div>

    <div className="filter-row">
      <div className="input search">
        <Ic name="search" size={13} className="t-3"/>
        <input placeholder="Nº pedido, cliente, rastreio…"/>
      </div>
      <select className="input"><option>Todos status</option><option>Pendente</option><option>Pago</option><option>Enviado</option></select>
      <select className="input"><option>Último 30 dias</option><option>Hoje</option><option>Esta semana</option></select>
      <select className="input"><option>Todos pagamentos</option><option>Pix</option><option>Cartão</option></select>
      <button className="btn ghost sm"><Ic name="filter" size={12}/> Mais filtros</button>
    </div>

    <div className="tbl-wrap">
      <table className="tbl">
        <thead>
          <tr>
            <th style={{width:30}}><input type="checkbox" style={{accentColor:'var(--accent)'}}/></th>
            <th>Nº</th><th>Cliente</th><th>Data</th><th>Itens</th><th style={{textAlign:'right'}}>Valor</th><th>Pagamento</th><th>Status</th><th>Rastreio</th><th></th>
          </tr>
        </thead>
        <tbody>
          {PEDIDOS_SITE.map(p => (
            <tr key={p.nr}>
              <td><input type="checkbox" style={{accentColor:'var(--accent)'}}/></td>
              <td className="mono t-3">{p.nr}</td>
              <td className="strong">{p.cliente}</td>
              <td className="mono t-3">{p.data}</td>
              <td className="num">{p.itens}</td>
              <td className="num">{brl(p.valor)}</td>
              <td><Badge kind={p.pagamento.includes("Pix") ? "accent" : "cyan"} dot>{p.pagamento}</Badge></td>
              <td><StatusBadge status={p.status}/></td>
              <td className="mono t-3" style={{fontSize:11}}>{p.rastreio}</td>
              <td className="row-action"><div className="menu-dot">⋯</div></td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>

    {/* Detalhe expandido — exemplo */}
    <div className="card mt-24">
      <div className="card-head">
        <div className="row gap-12">
          <Ic name="package" size={16} className="t-accent"/>
          <h3>Pedido <span className="mono t-3">S-12845</span></h3>
          <StatusBadge status="Enviado"/>
          <span className="mono t-3" style={{fontSize:11}}>· 19/05 · 09:41</span>
        </div>
        <div className="row gap-6">
          <button className="btn sm ghost"><Ic name="whatsapp" size={11}/> Notificar</button>
          <button className="btn sm ghost"><Ic name="print" size={11}/> Imprimir</button>
          <button className="btn sm">Alterar status</button>
        </div>
      </div>

      <div style={{display:'grid', gridTemplateColumns:'1.4fr 1fr', gap:24}}>
        <div>
          <div className="t-mono-label mb-12">Itens do pedido</div>
          <div className="stack-tight">
            {PRODUTOS.slice(0,3).map(p => (
              <div key={p.id} className="row gap-12" style={{padding:'10px 12px', background:'var(--bg-3)', borderRadius:8, border:'1px solid var(--line)'}}>
                <div className="product-thumb">{p.foto}</div>
                <div style={{flex:1}}>
                  <div style={{fontSize:13, fontWeight:500}}>{p.nome}</div>
                  <div className="t-3 mono" style={{fontSize:11}}>{p.id} · Tam {Object.keys(p.tamanhos)[1]} · qtd 1</div>
                </div>
                <div className="mono" style={{fontSize:13, fontWeight:500}}>{brl(p.preco)}</div>
              </div>
            ))}
          </div>

          <div className="t-mono-label mt-16 mb-12">Linha do tempo</div>
          <div className="stack-tight">
            <Timeline event="Pedido criado" hora="19/05 09:41" done/>
            <Timeline event="Pagamento confirmado (Pix)" hora="19/05 09:42" done/>
            <Timeline event="Em separação" hora="19/05 11:18" done/>
            <Timeline event="Etiqueta gerada · BR3829471" hora="19/05 14:30" done/>
            <Timeline event="Enviado · Sedex" hora="19/05 17:00" done current/>
            <Timeline event="Em trânsito · Goiânia → BH" hora="prev. 22/05"/>
            <Timeline event="Entregue" hora="—"/>
          </div>
        </div>

        <div>
          <div className="t-mono-label mb-12">Cliente</div>
          <div className="row gap-10 mb-16">
            <ClientAvatar name="Renata Pacheco" size="lg"/>
            <div>
              <div style={{fontSize:14, fontWeight:500}}>Renata Pacheco</div>
              <div className="t-3 mono" style={{fontSize:11}}>@re.pacheco · Nível 11</div>
            </div>
          </div>
          <dl className="kv">
            <dt>Telefone</dt><dd className="mono" style={{fontSize:12}}>(31) 9 8876-1190</dd>
            <dt>Email</dt><dd className="mono" style={{fontSize:12}}>re.pacheco@email.com</dd>
            <dt>Endereço</dt><dd style={{fontSize:12, lineHeight:1.4}}>Rua dos Aimorés, 1842<br/>apto 502 · Funcionários<br/>Belo Horizonte/MG · 30140-070</dd>
            <dt>Pagamento</dt><dd><Badge kind="accent" dot>Pix instantâneo</Badge> {brl(689.70)}</dd>
            <dt>Frete</dt><dd>Sedex · {brl(34.90)}</dd>
            <dt>Rastreio</dt><dd className="mono" style={{fontSize:12}}>BR3829471BR <a className="t-accent" style={{cursor:'pointer'}}>copiar</a></dd>
          </dl>
        </div>
      </div>
    </div>
  </div>
);

const Timeline = ({ event, hora, done, current }) => (
  <div className="row gap-12" style={{padding:'6px 0'}}>
    <div style={{width:14, height:14, borderRadius:'50%', background: done ? (current ? 'var(--accent)' : 'var(--green)') : 'var(--bg-3)', border: '2px solid ' + (done ? (current ? 'var(--accent)' : 'var(--green)') : 'var(--line-2)'), display:'flex', alignItems:'center', justifyContent:'center', boxShadow: current ? '0 0 0 4px var(--accent-soft)' : 'none'}}>
      {done && !current && <Ic name="check" size={8} style={{color:'#0a1a02', strokeWidth:3}}/>}
    </div>
    <div style={{flex:1, fontSize:12.5, color: done ? 'var(--text)' : 'var(--text-3)', fontWeight: current ? 500 : 400}}>{event}</div>
    <div className="mono t-3" style={{fontSize:11}}>{hora}</div>
  </div>
);

// ---------- CARRINHOS ABANDONADOS ----------
const SiteCarrinhosPage = () => (
  <div className="page">
    <div className="page-head">
      <div>
        <span className="eyebrow"><span className="play"/>Recuperação automática</span>
        <h1 style={{marginTop:10}}>Carrinhos abandonados</h1>
        <p className="lead">Quem deixou itens no carrinho sem finalizar. Lembrete WhatsApp automático após 2h.</p>
      </div>
      <div className="actions">
        <button className="btn ghost"><Ic name="settings" size={13}/> Regras de recuperação</button>
        <button className="btn primary"><Ic name="whatsapp" size={13}/> Disparar lembrete agora</button>
      </div>
    </div>

    <div className="stat-grid cols-4 mb-24">
      <Stat glow="cyan" label="Em aberto · 24h" value="4" hint={brl(1539.40)}/>
      <Stat label="Mensagens enviadas" value="32" hint="últimos 7 dias"/>
      <Stat glow="green" label="Recuperados · 7d" value="9" hint={brl(2814.30)}/>
      <Stat label="Taxa recuperação" value="28%" delta={6.4}/>
    </div>

    <div className="filter-row">
      <div className="input search">
        <Ic name="search" size={13} className="t-3"/>
        <input placeholder="Cliente, @…"/>
      </div>
      <select className="input"><option>Todos status</option><option>Pendente</option><option>Mensagem enviada</option><option>Recuperado</option></select>
      <select className="input"><option>Últimas 48h</option><option>Última semana</option></select>
    </div>

    <div className="tbl-wrap">
      <table className="tbl">
        <thead>
          <tr><th>Cliente</th><th>@</th><th>Itens</th><th style={{textAlign:'right'}}>Valor</th><th>Abandonado há</th><th>Status</th><th></th></tr>
        </thead>
        <tbody>
          {CARRINHOS_ABANDONADOS.map((c, i) => (
            <tr key={i}>
              <td className="row gap-8"><ClientAvatar name={c.cliente}/> <span className="strong">{c.cliente}</span></td>
              <td className="t-3 mono">{c.instagram}</td>
              <td className="t-2" style={{fontSize:11.5, maxWidth:280}}>{c.itens.join(", ")}</td>
              <td className="num">{brl(c.valor)}</td>
              <td className="mono">{c.abandonado}</td>
              <td><StatusBadge status={c.status}/></td>
              <td className="row-action row gap-4" style={{justifyContent:'flex-end'}}>
                <button className="btn sm ghost"><Ic name="eye" size={11}/></button>
                <button className="btn sm primary"><Ic name="whatsapp" size={11}/> Recuperar</button>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>

    <div className="card mt-24">
      <div className="card-head"><h3>Fluxo de recuperação · 3 etapas</h3><Toggle on/></div>
      <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:12}}>
        <RecoveryStep step="01" hora="+ 2h" canal="WhatsApp" msg="Oi {primeiro_nome}! Você deixou {valor_carrinho} no carrinho 🛒 Volta lá: {link_carrinho}" disparados={218} taxa="28%"/>
        <RecoveryStep step="02" hora="+ 12h" canal="WhatsApp" msg="Última chamada: seu carrinho expira em 24h. Frete grátis no Pix 👀" disparados={84} taxa="14%"/>
        <RecoveryStep step="03" hora="+ 36h" canal="WhatsApp" msg="Saudades de você! Cupom AURORA10 (-10%) válido por 48h: {link_loja}" disparados={42} taxa="9%"/>
      </div>
    </div>
  </div>
);

const RecoveryStep = ({ step, hora, canal, msg, disparados, taxa }) => (
  <div style={{padding:14, background:'var(--bg-3)', border:'1px solid var(--line)', borderRadius:10}}>
    <div className="row gap-8 mb-12">
      <div style={{fontFamily:'var(--mono)', fontSize:18, fontWeight:600, color:'var(--accent)'}}>{step}</div>
      <Badge kind="cyan">{hora}</Badge>
      <Badge kind="green" dot>{canal}</Badge>
    </div>
    <p className="t-2" style={{fontSize:12, lineHeight:1.4, padding:10, background:'var(--bg)', border:'1px solid var(--line)', borderRadius:6, margin:'0 0 12px'}}>"{msg}"</p>
    <div className="row" style={{justifyContent:'space-between', fontSize:11}}>
      <span className="t-3">{disparados} disparados · 30d</span>
      <span className="t-green mono">recup. {taxa}</span>
    </div>
  </div>
);

Object.assign(window, { SitePedidosPage, SiteCarrinhosPage });