// Módulo MARKETING — Campanhas + Automações + Templates

const MarketingPage = () => {
  const [tab, setTab] = React.useState("campanhas");
  return (
    <div className="page">
      <div className="page-head">
        <div>
          <span className="eyebrow"><span className="play"/>Comunicação segmentada</span>
          <h1 style={{marginTop:10}}>Marketing</h1>
          <p className="lead">Campanhas WhatsApp/voz · automações por gatilho · templates com variáveis dinâmicas.</p>
        </div>
        <div className="actions">
          <div style={{padding:'6px 10px', background:'var(--bg-2)', border:'1px solid var(--line)', borderRadius:7, fontSize:11}} className="row gap-8">
            <span className="t-3 mono" style={{letterSpacing:'0.1em'}}>SALDO WHATSAPP</span>
            <span className="t-accent mono" style={{fontWeight:600}}>R$ 28,40</span>
            <span className="t-3">·</span>
            <a className="t-2 mono" style={{cursor:'pointer', fontSize:11}}>recarregar</a>
          </div>
          <button className="btn primary"><Ic name="plus" size={13}/> Nova campanha</button>
        </div>
      </div>

      <Tabs active={tab} onChange={setTab} tabs={[
        { id: "campanhas", label: "Campanhas", count: CAMPANHAS.length },
        { id: "automacoes", label: "Automações", count: AUTOMACOES.length },
        { id: "templates", label: "Templates" },
        { id: "listas", label: "Listas salvas" },
        { id: "historico", label: "Histórico" },
      ]}/>

      {tab === "campanhas" && <CampanhasView/>}
      {tab === "automacoes" && <AutomacoesView/>}
      {tab === "templates" && <TemplatesView/>}
      {(tab === "listas" || tab === "historico") && <Empty icon="megaphone" title="Disponível no produto final"/>}
    </div>
  );
};

const CampanhasView = () => (
  <div className="stack">
    <div className="stat-grid cols-4">
      <Stat label="Mensagens · 30d" value="3.847" delta={22.4}/>
      <Stat glow="green" label="Taxa de entrega" value="94.2%" delta={0.8}/>
      <Stat label="Conversões atribuídas" value={brl(8420.30)} hint="campanhas → pedidos"/>
      <Stat glow="cyan" label="ROI campanhas · 30d" value="14.8×" delta={3.2}/>
    </div>

    <div className="card">
      <div className="card-head"><h3>Próximas campanhas + histórico</h3>
        <div className="row gap-6">
          <button className="btn sm ghost"><Ic name="filter" size={11}/></button>
          <button className="btn sm"><Ic name="plus" size={11}/> Nova</button>
        </div>
      </div>
      <table className="tbl">
        <thead>
          <tr><th>Nome</th><th>Canal</th><th>Destinatários</th><th>Enviados</th><th>Falhas</th><th>Data</th><th>Status</th><th></th></tr>
        </thead>
        <tbody>
          {CAMPANHAS.map((c, i) => (
            <tr key={i}>
              <td className="strong">{c.nome}</td>
              <td><Badge kind={c.canal === "WhatsApp" ? "green" : "purple"} dot>{c.canal}</Badge></td>
              <td className="num">{numFmt(c.destinatarios)}</td>
              <td className="num">{numFmt(c.enviados)}</td>
              <td className="num t-red">{c.falhas > 0 ? c.falhas : "—"}</td>
              <td className="mono t-3">{c.data}</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>
                {c.status === "Agendada" && <button className="btn sm danger"><Ic name="x" size={11}/></button>}
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>

    <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:18}}>
      <div className="card">
        <div className="card-head">
          <h3>Composer · nova campanha WhatsApp</h3>
          <Badge kind="accent" dot>Rascunho</Badge>
        </div>
        <div className="stack-tight">
          <div>
            <div className="t-mono-label mb-8">Template</div>
            <select className="input" style={{width:'100%'}}><option>Convite Live #48 — Aviso 2h antes</option><option>Aniversariantes do mês</option><option>Personalizado</option></select>
          </div>
          <div>
            <div className="t-mono-label mb-8">Mensagem</div>
            <textarea
              defaultValue={"Oi {primeiro_nome}! 💛 Hoje tem live exclusiva às 20h — peças de Verão 26 com preços só de live. Te espero!\n\n👉 Avise-me lá: {link_live}"}
              style={{width:'100%', minHeight:120, background:'var(--bg-3)', border:'1px solid var(--line)', borderRadius:7, padding:10, color:'var(--text)', fontFamily:'var(--font)', fontSize:13, resize:'vertical', outline:'none'}}/>
            <div className="t-3 row gap-8 mt-8" style={{fontSize:10.5, flexWrap:'wrap'}}>
              <span className="mono">{`{primeiro_nome}`}</span>
              <span className="mono">{`{nome}`}</span>
              <span className="mono">{`{instagram}`}</span>
              <span className="mono">{`{valor_cashback}`}</span>
              <span className="mono">{`{link_live}`}</span>
              <span className="mono">{`{link_carrinho}`}</span>
            </div>
          </div>
          <div>
            <div className="t-mono-label mb-8">Segmentação</div>
            <div className="row" style={{flexWrap:'wrap', gap:6}}>
              <Badge kind="green">Champions + Leais</Badge>
              <Badge kind="cyan">Compra na Live últimos 60d</Badge>
              <Badge>Fone verificado</Badge>
              <Badge kind="muted">+ filtro</Badge>
            </div>
            <div className="t-3 mt-12 row gap-12" style={{fontSize:11.5}}>
              <span>Estimado: <b className="t-accent">2.418 destinatários</b></span>
              <span>·</span>
              <span>Custo: <b className="t-2">{brl(120.90)}</b></span>
              <span>·</span>
              <span>Tempo de envio: <b className="t-2">~10 min</b></span>
            </div>
          </div>
          <div className="row gap-8 mt-12">
            <button className="btn ghost grow">Agendar para 20/05 18:00</button>
            <button className="btn primary grow"><Ic name="send" size={12}/> Enviar agora</button>
          </div>
        </div>
      </div>

      <div className="card">
        <div className="card-head"><h3>Preview no celular</h3><span className="meta">como Beatriz vai ver</span></div>
        <div style={{background:'#075E54', borderRadius:10, padding:14, paddingBottom:24}}>
          <div className="row gap-8 mb-12">
            <div style={{width:28, height:28, borderRadius:'50%', background:'var(--accent)', display:'flex', alignItems:'center', justifyContent:'center', fontSize:12, fontWeight:700, color:'white'}}>EA</div>
            <div>
              <div style={{fontSize:12.5, fontWeight:600, color:'white'}}>Estúdio Aurora</div>
              <div style={{fontSize:10, color:'rgba(255,255,255,0.7)'}}>oficial · respondendo agora</div>
            </div>
          </div>
          <div style={{background:'white', color:'#222', padding:'10px 12px', borderRadius:'12px 12px 12px 4px', fontSize:13, lineHeight:1.45, maxWidth:280, fontFamily:'system-ui'}}>
            Oi Bia! 💛 Hoje tem live exclusiva às 20h — peças de Verão 26 com preços só de live. Te espero!<br/><br/>
            👉 Avise-me lá: <span style={{color:'#1976d2', textDecoration:'underline'}}>vendanalive.com/aurora</span>
          </div>
          <div style={{fontSize:10, color:'rgba(255,255,255,0.6)', textAlign:'right', marginTop:4}}>20:42 ✓✓</div>
        </div>
      </div>
    </div>
  </div>
);

const AutomacoesView = () => (
  <div className="stack">
    <div className="stat-grid cols-3 mb-12">
      <Stat glow="green" label="Automações ativas" value="8" hint="de 9 disponíveis"/>
      <Stat label="Disparos · 30d" value="599" delta={18.4}/>
      <Stat label="Conversão atribuída · 30d" value={brl(12480.50)}/>
    </div>

    <div className="card">
      <div className="card-head"><h3>Automações configuradas</h3></div>
      <div className="tbl-wrap" style={{border:'none'}}>
        <table className="tbl">
          <thead>
            <tr><th>Automação</th><th>Gatilho</th><th>Espera</th><th>Disparos 30d</th><th>Status</th><th></th></tr>
          </thead>
          <tbody>
            {AUTOMACOES.map((a, i) => (
              <tr key={i}>
                <td className="row gap-8">
                  <div style={{width:28, height:28, background:'var(--bg-3)', borderRadius:6, display:'flex', alignItems:'center', justifyContent:'center', color: a.ativa ? 'var(--accent)' : 'var(--text-4)'}}>
                    <Ic name={["plus","cake","cart","bell","dollar","dollar","refresh","sparkles","flame"][i] || "megaphone"} size={14}/>
                  </div>
                  <span className="strong">{a.nome}</span>
                </td>
                <td className="t-3">{a.gatilho}</td>
                <td className="mono">{a.espera}</td>
                <td className="num">{a.disparos30d}</td>
                <td><Badge kind={a.ativa ? "green" : "muted"} dot>{a.ativa ? "Ativa" : "Pausada"}</Badge></td>
                <td className="row-action row gap-6" style={{justifyContent:'flex-end'}}>
                  <button className="btn sm ghost"><Ic name="edit" size={11}/></button>
                  <Toggle on={a.ativa}/>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  </div>
);

const TemplatesView = () => (
  <div style={{display:'grid', gridTemplateColumns:'repeat(auto-fill, minmax(280px, 1fr))', gap:12}}>
    {[
      { cat: "Aniversário", nome: "Parabéns + cashback", icon: "cake", body: "Feliz aniversário, {primeiro_nome}! 🎂 De presente, R$ 30 de cashback liberado: {link_loja}" },
      { cat: "Carrinho", nome: "Recuperação 2h", icon: "cart", body: "Você esqueceu {valor_carrinho} no carrinho! Volta lá: {link_carrinho}" },
      { cat: "Live", nome: "Convite live 1h antes", icon: "live", body: "Daqui 1h tem live com lançamentos exclusivos! Bota o despertador: {link_live}" },
      { cat: "Cobrança", nome: "Parcela D-3", icon: "dollar", body: "Oi {primeiro_nome}! Sua parcela de {parcela_valor} vence em 3 dias ({parcela_vencimento})." },
      { cat: "Boas-vindas", nome: "Boas-vindas + Instagram", icon: "user", body: "Que bom te ter por aqui, {primeiro_nome}! Acompanha nossas lives: @estudio.aurora" },
      { cat: "Promoção", nome: "Cashback expirando", icon: "sparkles", body: "Você tem {valor_cashback} de cashback expirando em 10 dias. Usa antes! {link_loja}" },
    ].map((t, i) => (
      <div key={i} className="card tight">
        <div className="row gap-8 mb-8">
          <div style={{width:24, height:24, background:'var(--bg-3)', borderRadius:5, display:'flex', alignItems:'center', justifyContent:'center', color:'var(--accent)'}}>
            <Ic name={t.icon} size={12}/>
          </div>
          <span className="t-mono-label" style={{letterSpacing:'0.14em'}}>{t.cat}</span>
        </div>
        <div style={{fontSize:13, fontWeight:500, marginBottom:8}}>{t.nome}</div>
        <p className="t-3" style={{fontSize:11.5, padding:8, background:'var(--bg-3)', borderRadius:5, margin:0, lineHeight:1.4}}>{t.body}</p>
        <div className="row gap-4 mt-12" style={{justifyContent:'flex-end'}}>
          <button className="btn sm ghost"><Ic name="edit" size={11}/></button>
          <button className="btn sm">Usar</button>
        </div>
      </div>
    ))}
  </div>
);

Object.assign(window, { MarketingPage });