// ============================================================
// Páginas: IuNews, Pipeline, Conteúdo, Tarefas
// ============================================================

// ---------- IuNews ----------
function PageIuNews() {
  const [n, setN] = useState(DATA.iunews);
  const [openEd, setOpenEd] = useState(null);

  useEffect(() => {
    const SUPA = 'https://qghfeotwlulewqgyenwa.supabase.co';
    const KEY  = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InFnaGZlb3R3bHVsZXdxZ3llbndhIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NzY1NjMwMTIsImV4cCI6MjA5MjEzOTAxMn0.6jk0N7yeSwZmvw1zN7DyLJP69mB-kwYMa5kaWOoTj-Q';
    const h    = { apikey: KEY, Authorization: `Bearer ${KEY}`, Accept: 'application/json' };

    Promise.all([
      fetch('/api/iunews').then(r => r.ok ? r.json() : null).catch(() => null),
      fetch(`${SUPA}/rest/v1/iuvenis_cache?key=eq.iunews_growth&select=data`, { headers: h })
        .then(r => r.json()).catch(() => []),
    ]).then(([brevo, cache]) => {
      setN(prev => {
        const growth = cache[0]?.data?.serie || [];
        const serieAssin = growth.length > 1 ? growth.map(p => p.n) : prev.serieAssin;
        return {
          ...prev,
          assinantes: brevo?.assinantes ?? prev.assinantes,
          openRate:   brevo?.openRate   ?? prev.openRate,
          ctr:        brevo?.ctr        ?? prev.ctr,
          serieAssin,
          edicoes: brevo?.edicoes?.length > 0
            ? brevo.edicoes.map((e, i) => ({ ...e, num: brevo.edicoes.length - i, open: e.openRate }))
            : prev.edicoes,
        };
      });
    });
  }, []);

  return (
    <div className="flex-col gap-4">
      <div className="grid g-4">
        <StatCard label="Assinantes"   value={n.assinantes.toLocaleString("pt-BR")} delta={n.deltaAssin} spark={n.serieAssin} accent="var(--brand-accent)"/>
        <StatCard label="Open rate"    value={n.openRate} unit="%" delta={2.4} spark={[42,44,43,46,48,47,49,48,49]} accent="var(--success)"/>
        <StatCard label="CTR médio"    value={n.ctr} unit="%" delta={0.8} spark={[5.8,6.2,6.4,6.8,7.0,7.1,7.2,7.0,7.2]} accent="var(--purple)"/>
        <StatCard label="Edições"      value={n.edicoes.filter(e=>e.status==="Enviada").length+" · ativas"} delta={0}/>
      </div>

      <div className="grid g-2-1">
        <div className="card">
          <div className="card-h">
            <div>
              <div className="card-title">Edições da IuNews</div>
              <div className="card-sub">Histórico de envios semanais</div>
            </div>
            <button className="btn btn-primary"><I.plus size={14}/> Nova edição</button>
          </div>
          <table className="dt">
            <thead><tr><th>#</th><th>Título</th><th>Data</th><th className="num" style={{ textAlign:"right" }}>Enviados</th><th className="num" style={{ textAlign:"right" }}>Open</th><th className="num" style={{ textAlign:"right" }}>CTR</th><th>Status</th></tr></thead>
            <tbody>
              {n.edicoes.map(e=>(
                <tr key={e.num} className="clickable" onClick={()=>setOpenEd(e)}>
                  <td className="mono text-3">#{e.num}</td>
                  <td style={{ fontWeight:500, maxWidth:320 }}>{e.titulo}</td>
                  <td className="mono text-3" style={{ fontSize:12 }}>{e.data}</td>
                  <td className="num" style={{ textAlign:"right" }}>{e.enviados?e.enviados.toLocaleString("pt-BR"):"—"}</td>
                  <td className="num" style={{ textAlign:"right", color: e.open>50?"var(--success)":"inherit" }}>{e.open?e.open+"%":"—"}</td>
                  <td className="num" style={{ textAlign:"right" }}>{e.ctr?e.ctr+"%":"—"}</td>
                  <td><span className={"tag " + (e.status==="Enviada"?"success":"warn")}><span className="dot"></span>{e.status}</span></td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>

        <div className="flex-col gap-4">
          <div className="card">
            <div className="card-h"><div className="card-title">Crescimento da base</div></div>
            <LineChart data={n.serieAssin.map((v,i)=>({ v, label: i===n.serieAssin.length-1?"hoje":"" }))} height={160} color="var(--brand-accent)" gradientId="news-grad" showXLabels={false}/>
            <div className="row gap-2 mt-3 text-3" style={{ fontSize:12, justifyContent:"space-between" }}>
              <span>+1.600 em 12 sem.</span>
              <span className="num" style={{ color:"var(--success)" }}>+24,8%</span>
            </div>
          </div>

          <div className="card">
            <div className="card-h"><div className="card-title">Origem dos novos assinantes</div></div>
            <div className="flex-col gap-2">
              {[["Instagram bio",42],["Site / landing",28],["Indicação",14],["Lead magnet",9],["Outros",7]].map(([l,p])=>(
                <div key={l}>
                  <div className="row gap-2" style={{ justifyContent:"space-between", fontSize:12.5 }}>
                    <span>{l}</span>
                    <span className="num text-3">{p}%</span>
                  </div>
                  <div className="bar mt-2"><i style={{ width:p+"%" }}/></div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>

      {openEd && <Modal title={openEd.titulo} sub={"IuNews #"+openEd.num+" · "+openEd.data} onClose={()=>setOpenEd(null)} wide
        footer={<>
          <button className="btn btn-ghost" onClick={()=>setOpenEd(null)}>Fechar</button>
          <button className="btn">Duplicar</button>
          <button className="btn btn-primary">Abrir no Beehiiv <I.ext size={12}/></button>
        </>}>
        <div className="grid g-4 mb-4">
          <div><div className="stat-label">Enviados</div><div className="stat-value">{openEd.enviados?openEd.enviados.toLocaleString("pt-BR"):"—"}</div></div>
          <div><div className="stat-label">Open rate</div><div className="stat-value">{openEd.open?openEd.open+"%":"—"}</div></div>
          <div><div className="stat-label">CTR</div><div className="stat-value">{openEd.ctr?openEd.ctr+"%":"—"}</div></div>
          <div><div className="stat-label">Status</div><span className={"tag " + (openEd.status==="Enviada"?"success":"warn")}>{openEd.status}</span></div>
        </div>
        <div className="text-2" style={{ fontSize:13.5, lineHeight:1.7 }}>
          <p style={{ marginTop:0 }}><strong>Resumo da edição:</strong> abordagem sobre {openEd.titulo.toLowerCase()}, com 3 seções principais — contexto, estudo de caso e checklist prático.</p>
          <p>Performou {openEd.open>50?"acima":"em linha com"} da média histórica de 48,6% de abertura. {openEd.ctr>7.5 ? "CTR forte indica boa relevância do CTA." : ""}</p>
        </div>
      </Modal>}
    </div>
  );
}

// ---------- Pipeline (dados reais do Supabase) ----------
const SUPA_URL = 'https://qghfeotwlulewqgyenwa.supabase.co';
const SUPA_KEY = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InFnaGZlb3R3bHVsZXdxZ3llbndhIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NzY1NjMwMTIsImV4cCI6MjA5MjEzOTAxMn0.6jk0N7yeSwZmvw1zN7DyLJP69mB-kwYMa5kaWOoTj-Q';

const PERFIL_LABEL = { G:'Mestrado',H:'Doutorado',J:'Liderança',D:'Graduação',E:'Intercâmbio',F:'Pesquisa',I:'Voluntariado',A:'Fund.',B:'Médio',C:'Gap Year' };
const MOMENTO_LABEL = { fundamental:'Fund.',medio:'Médio',gap:'Gap Year',graduacao:'Graduação',formado:'Formado',pos:'Pós',pos_concluido:'Pós concluído',profissional:'Profissional' };

function supaFetch(path) {
  return fetch(`${SUPA_URL}/rest/v1/${path}`, {
    headers: { apikey: SUPA_KEY, Authorization: `Bearer ${SUPA_KEY}`, Accept: 'application/json' }
  }).then(r => r.json());
}

function supaUpdateStatus(email, status) {
  return fetch(`${SUPA_URL}/rest/v1/iuvenis_leads?email=eq.${encodeURIComponent(email)}`, {
    method: 'PATCH',
    headers: { apikey: SUPA_KEY, Authorization: `Bearer ${SUPA_KEY}`, 'Content-Type': 'application/json', Prefer: 'return=minimal' },
    body: JSON.stringify({ status })
  });
}

function fmtDateShort(str) {
  if (!str) return '—';
  try { return new Date(str).toLocaleDateString('pt-BR',{day:'2-digit',month:'2-digit',year:'2-digit'}); } catch { return str.slice(0,10); }
}

function PagePipeline() {
  const [leads, setLeads]   = useState([]);
  const [vendas, setVendas] = useState([]);
  const [loading, setLoading] = useState(true);
  const [filtro, setFiltro]   = useState('todos');
  const [search, setSearch]   = useState('');
  const [openLead, setOpenLead] = useState(null);

  useEffect(()=>{
    Promise.all([
      supaFetch('iuvenis_leads?order=created_at.desc&limit=500'),
      supaFetch('iuvenis_vendas?order=data.desc&limit=200'),
    ]).then(([l, v])=>{
      setLeads(Array.isArray(l) ? l : []);
      setVendas(Array.isArray(v) ? v : []);
      setLoading(false);
    }).catch(()=>setLoading(false));
  },[]);

  const filtrados = leads.filter(l => {
    if (filtro === 'sem_email') return !l.email_enviado;
    if (filtro !== 'todos') return l.status === filtro;
    return true;
  }).filter(l => {
    if (!search) return true;
    return (l.nome||'').toLowerCase().includes(search.toLowerCase()) ||
           (l.email||'').toLowerCase().includes(search.toLowerCase());
  });

  const novos      = leads.filter(l => l.status === 'Novo').length;
  const contatados = leads.filter(l => l.status === 'Contatado').length;
  const vendidos   = leads.filter(l => l.status === 'Vendido').length;
  const comEmail   = leads.filter(l => l.email_enviado).length;
  const mrr        = vendas.reduce((s,v) => s + parseFloat(v.valor||0), 0);

  const estagios = [
    { nome:'Quiz respondido', count: leads.length,  cor:'var(--brand)' },
    { nome:'Proposta enviada', count: comEmail,       cor:'var(--brand-accent)' },
    { nome:'Em contato',       count: contatados,     cor:'var(--warn)' },
    { nome:'Vendido',          count: vendidos,        cor:'var(--success)' },
  ];

  const handleStatus = async (email, newStatus) => {
    await supaUpdateStatus(email, newStatus);
    setLeads(prev => prev.map(l => l.email === email ? { ...l, status: newStatus } : l));
    if (openLead && openLead.email === email) setOpenLead(prev => ({ ...prev, status: newStatus }));
  };

  const filterBtns = [
    { k:'todos',    label:'Todos' },
    { k:'Novo',     label:'Novos' },
    { k:'Contatado',label:'Contatados' },
    { k:'Vendido',  label:'Vendidos' },
    { k:'sem_email',label:'Sem proposta' },
  ];

  return (
    <div className="flex-col gap-4">
      <div className="grid g-4">
        <StatCard label="Total leads"      value={leads.length}  delta={0} accent="var(--brand)"/>
        <StatCard label="Propostas enviadas" value={comEmail}    delta={0} accent="var(--brand-accent)"/>
        <StatCard label="Vendidos"         value={vendidos}       delta={0} accent="var(--success)"/>
        <StatCard label="MRR registrado"   value={mrr > 0 ? 'R$'+mrr.toLocaleString('pt-BR',{minimumFractionDigits:0}) : 'R$0'} delta={0} accent="var(--success)"/>
      </div>

      <div className="card">
        <div className="card-h">
          <div><div className="card-title">Funil de leads</div><div className="card-sub">Leads do quiz por estágio</div></div>
        </div>
        <div className="row gap-3" style={{ alignItems:"stretch", padding:"0 20px 20px" }}>
          {estagios.map((e,i)=>{
            const ratio = leads.length ? e.count / leads.length : 0;
            return (
              <div key={i} style={{ flex:1, padding:"14px 12px", border:"1px solid var(--border)", borderRadius:10, background:"var(--surface-2)", position:"relative", overflow:"hidden" }}>
                <div style={{ position:"absolute", left:0, top:0, bottom:0, width:(ratio*100)+"%", background:e.cor, opacity:0.08 }}/>
                <div style={{ position:"relative" }}>
                  <div className="row gap-2" style={{ fontSize:11, color:"var(--text-3)", textTransform:"uppercase", letterSpacing:"0.04em", fontWeight:600 }}>
                    <span style={{ width:8, height:8, borderRadius:2, background:e.cor }}></span>
                    {e.nome}
                  </div>
                  <div className="stat-value mt-2" style={{ fontSize:28 }}>{e.count}</div>
                </div>
              </div>
            );
          })}
        </div>
      </div>

      <div className="card" style={{ padding:0 }}>
        <div style={{ padding:"16px 20px", borderBottom:"1px solid var(--border)", display:"flex", alignItems:"center", justifyContent:"space-between", gap:12, flexWrap:"wrap" }}>
          <div className="pill-group">
            {filterBtns.map(({k,label})=>(
              <button key={k} className={"pill " + (filtro===k?"active":"")} onClick={()=>setFiltro(k)}>
                {label} <span style={{ marginLeft:4, opacity:0.6 }}>
                  {k==='todos'?leads.length:k==='Novo'?novos:k==='Contatado'?contatados:k==='Vendido'?vendidos:leads.filter(l=>!l.email_enviado).length}
                </span>
              </button>
            ))}
          </div>
          <div className="row gap-2" style={{ background:"var(--surface-2)", border:"1px solid var(--border)", padding:"6px 10px", borderRadius:8, fontSize:13 }}>
            <I.search size={14} className="text-3"/>
            <input style={{ background:"transparent", border:"none", outline:"none", width:180 }} placeholder="Buscar nome ou email…" value={search} onChange={e=>setSearch(e.target.value)}/>
          </div>
        </div>

        {loading ? (
          <div style={{ padding:32, textAlign:"center", color:"var(--text-3)" }}>Carregando leads do Supabase…</div>
        ) : (
          <table className="dt">
            <thead><tr>
              <th>Lead</th><th>Perfil</th><th>Momento</th><th>Barreira</th>
              <th>Data</th><th>Proposta</th><th>Email</th><th>D+3</th><th>Status</th>
            </tr></thead>
            <tbody>
              {filtrados.map((l,i)=>(
                <tr key={i} className="clickable" onClick={()=>setOpenLead(l)}>
                  <td>
                    <div className="row gap-2">
                      <Avatar name={l.nome||'?'}/>
                      <div>
                        <div style={{ fontWeight:500 }}>{l.nome||'—'}</div>
                        <div className="text-3" style={{ fontSize:11.5 }}>{l.email||'—'}</div>
                      </div>
                    </div>
                  </td>
                  <td><span className="tag brand">{PERFIL_LABEL[l.perfil]||l.perfil||'—'}</span></td>
                  <td className="text-2" style={{ fontSize:12 }}>{MOMENTO_LABEL[l.momento]||l.momento||'—'}</td>
                  <td className="text-2" style={{ fontSize:12, maxWidth:130, overflow:"hidden", textOverflow:"ellipsis", whiteSpace:"nowrap" }} title={l.barreira||''}>{l.barreira||'—'}</td>
                  <td className="mono text-3" style={{ fontSize:11.5 }}>{fmtDateShort(l.data)}</td>
                  <td>
                    {l.wp_link ? <a href={l.wp_link} target="_blank" onClick={e=>e.stopPropagation()} style={{ color:"var(--brand)", fontSize:12, fontWeight:500 }}>Ver →</a> : <span className="text-3">—</span>}
                  </td>
                  <td>
                    <span style={{ width:8,height:8,borderRadius:'50%',display:'inline-block',marginRight:4,background:l.email_enviado?'var(--success)':'var(--border-strong)' }}></span>
                    <span className="text-3" style={{ fontSize:11 }}>{l.email_enviado ? fmtDateShort(l.email_enviado_em) : 'Pendente'}</span>
                  </td>
                  <td>
                    <span style={{ width:8,height:8,borderRadius:'50%',display:'inline-block',marginRight:4,background:l.followup_d3?'var(--success)':'var(--border-strong)' }}></span>
                    <span className="text-3" style={{ fontSize:11 }}>{l.followup_d3 ? fmtDateShort(l.followup_d3) : (l.email_enviado?'Aguardando':'—')}</span>
                  </td>
                  <td onClick={e=>e.stopPropagation()}>
                    <select
                      style={{ fontSize:12, border:"1px solid var(--border)", borderRadius:6, padding:"3px 6px", background:"var(--surface)", cursor:"pointer", outline:"none" }}
                      value={l.status||'Novo'}
                      onChange={e=>handleStatus(l.email, e.target.value)}>
                      <option>Novo</option>
                      <option>Contatado</option>
                      <option>Vendido</option>
                    </select>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        )}
      </div>

      {/* Vendas TheMembers */}
      {vendas.length > 0 && (
        <div className="card" style={{ padding:0 }}>
          <div style={{ padding:"16px 20px", borderBottom:"1px solid var(--border)" }}>
            <div className="card-title">Vendas registradas (TheMembers)</div>
            <div className="card-sub">{vendas.length} venda(s) · MRR R${mrr.toLocaleString('pt-BR',{minimumFractionDigits:0})}</div>
          </div>
          <table className="dt">
            <thead><tr><th>Data</th><th>Nome</th><th>Email</th><th>Plano</th><th className="num" style={{ textAlign:"right" }}>Valor</th></tr></thead>
            <tbody>
              {vendas.map((v,i)=>(
                <tr key={i}>
                  <td className="mono text-3" style={{ fontSize:12 }}>{fmtDateShort(v.data)}</td>
                  <td style={{ fontWeight:500 }}>{v.nome||'—'}</td>
                  <td className="text-3" style={{ fontSize:12 }}>{v.email||'—'}</td>
                  <td><span className="tag">{v.plano||'—'}</span></td>
                  <td className="num" style={{ textAlign:"right", fontWeight:700, color:"var(--success)" }}>
                    {v.valor ? parseFloat(v.valor).toLocaleString('pt-BR',{style:'currency',currency:v.moeda||'BRL'}) : '—'}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}

      {openLead && (
        <Modal title={openLead.nome||'Lead'} sub={(openLead.email||'') + ' · Quiz ' + fmtDateShort(openLead.data)} onClose={()=>setOpenLead(null)} wide
          footer={<>
            <button className="btn btn-ghost" onClick={()=>setOpenLead(null)}>Fechar</button>
            {openLead.whatsapp && <a href={'https://wa.me/'+(openLead.whatsapp||'').replace(/\D/g,'')} target="_blank" className="btn">WhatsApp</a>}
            {openLead.wp_link && <a href={openLead.wp_link} target="_blank" className="btn btn-primary">Ver proposta <I.ext size={12}/></a>}
          </>}>
          <div className="grid g-3 mb-4">
            <div><div className="stat-label">Perfil</div><span className="tag brand">{PERFIL_LABEL[openLead.perfil]||openLead.perfil||'—'}</span></div>
            <div><div className="stat-label">Momento</div><span className="tag">{MOMENTO_LABEL[openLead.momento]||openLead.momento||'—'}</span></div>
            <div><div className="stat-label">Status</div>
              <select style={{ fontSize:13, border:"1px solid var(--border)", borderRadius:6, padding:"4px 8px", background:"var(--surface)", cursor:"pointer", outline:"none" }}
                value={openLead.status||'Novo'} onChange={e=>handleStatus(openLead.email, e.target.value)}>
                <option>Novo</option><option>Contatado</option><option>Vendido</option>
              </select>
            </div>
          </div>
          <div className="grid g-2 gap-4">
            <div>
              <div className="stat-label">Email</div>
              <div style={{ fontSize:13, marginTop:4 }}>{openLead.email||'—'}</div>
            </div>
            <div>
              <div className="stat-label">WhatsApp</div>
              <div style={{ fontSize:13, marginTop:4 }}>{openLead.whatsapp||'—'}</div>
            </div>
            <div>
              <div className="stat-label">Barreira</div>
              <div style={{ fontSize:13, marginTop:4, lineHeight:1.5 }}>{openLead.barreira||'—'}</div>
            </div>
            <div>
              <div className="stat-label">Renda familiar</div>
              <div style={{ fontSize:13, marginTop:4 }}>{openLead.renda||'—'}</div>
            </div>
          </div>
          <div className="mt-4">
            <div className="stat-label">Funil de email</div>
            <div className="row gap-3 mt-3">
              {[
                { label:'Email inicial', done: openLead.email_enviado, date: openLead.email_enviado_em },
                { label:'Follow-up D+3', done: !!openLead.followup_d3, date: openLead.followup_d3 },
                { label:'Follow-up D+7', done: !!openLead.followup_d7, date: openLead.followup_d7 },
              ].map((s,i)=>(
                <div key={i} style={{ flex:1, padding:"10px 14px", border:"1px solid var(--border)", borderRadius:8, background: s.done?"rgba(34,197,94,.06)":"var(--surface-2)" }}>
                  <div style={{ fontSize:11, fontWeight:600, color: s.done?"var(--success)":"var(--text-3)", textTransform:"uppercase", letterSpacing:".04em" }}>{s.done?"Enviado":"Pendente"}</div>
                  <div style={{ fontSize:13, fontWeight:500, marginTop:4 }}>{s.label}</div>
                  <div style={{ fontSize:11, color:"var(--text-3)", marginTop:2 }}>{s.done ? fmtDateShort(s.date) : '—'}</div>
                </div>
              ))}
            </div>
          </div>
        </Modal>
      )}
    </div>
  );
}

// ---------- Conteúdo ----------
function PageConteudo() {
  const c = DATA.conteudo;
  return (
    <div className="flex-col gap-4">
      <div className="grid g-4">
        <StatCard label="Aulas totais"      value={c.aulasCount} delta={4.0}/>
        <StatCard label="Publicadas"        value={c.aulasPublicadas} delta={9.2} accent="var(--success)"/>
        <StatCard label="Horas de conteúdo" value={c.horasTotal} unit="h" delta={6.4} accent="var(--brand-accent)"/>
        <StatCard label="Conclusão média"   value={Math.round(c.modulos.reduce((s,m)=>s+m.conclusao,0)/c.modulos.length)} unit="%" delta={3.6} accent="var(--purple)"/>
      </div>

      <div className="grid g-2-1">
        <div className="card">
          <div className="card-h">
            <div><div className="card-title">Módulos da plataforma</div><div className="card-sub">Trilha completa de jornada do aluno</div></div>
          </div>
          <table className="dt">
            <thead><tr><th>Módulo</th><th className="num" style={{ textAlign:"right" }}>Aulas</th><th style={{ width:200 }}>Conclusão média</th></tr></thead>
            <tbody>
              {c.modulos.map((m,i)=>(
                <tr key={i} className="clickable">
                  <td style={{ fontWeight:500 }}>{m.nome}</td>
                  <td className="num" style={{ textAlign:"right" }}>{m.aulas}</td>
                  <td>
                    <div className="row gap-2">
                      <div className="bar" style={{ flex:1 }}><i style={{ width:m.conclusao+"%", background: m.conclusao>70?"var(--success)":m.conclusao<40?"var(--warn)":"var(--brand)" }}/></div>
                      <span className="num text-3" style={{ minWidth:30 }}>{m.conclusao}%</span>
                    </div>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>

        <div className="card">
          <div className="card-h"><div className="card-title">Próximas produções</div><button className="btn btn-ghost btn-sm"><I.plus size={12}/></button></div>
          <div className="flex-col gap-3">
            {c.proximas.map((p,i)=>(
              <div key={i} style={{ padding:"10px 12px", border:"1px solid var(--border)", borderRadius:8 }}>
                <div className="row gap-2" style={{ justifyContent:"space-between" }}>
                  <span className="tag">{p.tipo}</span>
                  <span className="mono text-3" style={{ fontSize:11 }}>{p.data}</span>
                </div>
                <div className="mt-2" style={{ fontSize:13, fontWeight:500 }}>{p.titulo}</div>
                <div className="row gap-2 mt-2" style={{ fontSize:11.5, color:"var(--text-3)", justifyContent:"space-between" }}>
                  <span>· {p.responsavel}</span>
                  <span className={"tag " + (p.status==="Em gravação"?"warn":p.status==="Em dev"?"purple":p.status==="Agendada"?"brand":"")}><span className="dot"></span>{p.status}</span>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

// ---------- Tarefas / Kanban ----------
function PageTarefas({ tarefas, setTarefas }) {
  const cols = [
    { id:"todo",   label:"A Fazer",     cor:"var(--text-3)" },
    { id:"doing",  label:"Em Progresso",cor:"var(--brand)" },
    { id:"review", label:"Em Revisão",  cor:"var(--warn)" },
    { id:"done",   label:"Concluído",   cor:"var(--success)" },
  ];
  const [drag, setDrag] = useState(null);
  const [overCol, setOverCol] = useState(null);
  const [showNew, setShowNew] = useState(false);
  const [openT, setOpenT] = useState(null);

  useEffect(()=>{
    const h = ()=>setShowNew(true);
    window.addEventListener("iuvenis:newTask", h);
    return ()=>window.removeEventListener("iuvenis:newTask", h);
  },[]);

  // Load from Supabase on mount; seed if empty
  useEffect(()=>{
    supaFetch('iuvenis_tarefas?order=created_at.asc')
      .then(rows => {
        if (rows && rows.length > 0) {
          setTarefas(rows);
        } else {
          const seeds = DATA.tarefas.map(t => ({
            id: t.id, titulo: t.titulo, col: t.col,
            prio: t.prio || 'media', tag: t.tag || 'Geral', prazo: t.prazo || '', responsavel: 'BA',
          }));
          fetch(`${SUPA_URL}/rest/v1/iuvenis_tarefas`, {
            method: 'POST',
            headers: { apikey: SUPA_KEY, Authorization: `Bearer ${SUPA_KEY}`, 'Content-Type': 'application/json', Prefer: 'resolution=merge-duplicates,return=minimal' },
            body: JSON.stringify(seeds),
          }).catch(()=>{});
        }
      })
      .catch(()=>{});
  },[]);

  const supaTarefaPatch = (id, updates) => {
    fetch(`${SUPA_URL}/rest/v1/iuvenis_tarefas?id=eq.${encodeURIComponent(id)}`, {
      method: 'PATCH',
      headers: { apikey: SUPA_KEY, Authorization: `Bearer ${SUPA_KEY}`, 'Content-Type': 'application/json', Prefer: 'return=minimal' },
      body: JSON.stringify({ ...updates, updated_at: new Date().toISOString() }),
    }).catch(()=>{});
  };

  const onDrop = (colId) => {
    if (!drag) return;
    setTarefas(prev => prev.map(t => t.id===drag ? {...t, col: colId} : t));
    supaTarefaPatch(drag, { col: colId });
    setDrag(null); setOverCol(null);
  };
  const toggleDone = id => {
    setTarefas(prev => {
      const updated = prev.map(t => t.id===id ? {...t, col: t.col==="done"?"todo":"done"} : t);
      const t = updated.find(x => x.id===id);
      if (t) supaTarefaPatch(id, { col: t.col });
      return updated;
    });
  };
  const addTask = (data) => {
    const id = "T" + Date.now();
    const newTask = { id, col:"todo", responsavel:"BA", ...data };
    setTarefas(prev => [newTask, ...prev]);
    fetch(`${SUPA_URL}/rest/v1/iuvenis_tarefas`, {
      method: 'POST',
      headers: { apikey: SUPA_KEY, Authorization: `Bearer ${SUPA_KEY}`, 'Content-Type': 'application/json', Prefer: 'resolution=merge-duplicates,return=minimal' },
      body: JSON.stringify(newTask),
    }).catch(()=>{});
    setShowNew(false);
  };

  return (
    <div className="flex-col gap-4">
      <div className="grid g-4">
        <StatCard label="Total"        value={tarefas.length}/>
        <StatCard label="Em progresso" value={tarefas.filter(t=>t.col==="doing").length} accent="var(--brand-accent)"/>
        <StatCard label="Concluídas · sem." value={tarefas.filter(t=>t.col==="done").length} accent="var(--success)"/>
        <StatCard label="Atrasadas"    value={2} accent="var(--danger)"/>
      </div>

      <div className="card">
        <div className="card-h">
          <div><div className="card-title">Kanban de demandas</div><div className="card-sub">Arraste para mover entre colunas · clique para abrir</div></div>
          <button className="btn btn-primary" onClick={()=>setShowNew(true)}><I.plus size={14}/> Nova tarefa</button>
        </div>
        <div className="kanban">
          {cols.map(c => {
            const list = tarefas.filter(t=>t.col===c.id);
            return (
              <div key={c.id} className="kcol"
                onDragOver={e=>{ e.preventDefault(); setOverCol(c.id); }}
                onDragLeave={()=>setOverCol(null)}
                onDrop={()=>onDrop(c.id)}
                style={{ outline: overCol===c.id ? "2px dashed var(--brand)" : "none", outlineOffset:-4 }}>
                <div className="kcol-h">
                  <span style={{ width:8, height:8, borderRadius:2, background:c.cor }}></span>
                  <span className="name">{c.label}</span>
                  <span className="count">{list.length}</span>
                </div>
                {list.map(t => (
                  <div key={t.id} className={"kcard " + (drag===t.id?"drag":"")}
                    draggable
                    onDragStart={()=>setDrag(t.id)}
                    onDragEnd={()=>setDrag(null)}
                    onClick={()=>setOpenT(t)}>
                    <div className="row gap-2" style={{ marginBottom:6, justifyContent:"space-between" }}>
                      <span className={"tag " + (t.prio==="alta"?"danger":t.prio==="media"?"warn":"")}>{t.tag}</span>
                      <button className="icon-btn" style={{ width:20, height:20 }} onClick={(e)=>{ e.stopPropagation(); toggleDone(t.id); }} title="Marcar concluída">
                        <span style={{ width:14, height:14, borderRadius:50, border:"1.5px solid var(--border-strong)", display:"grid", placeItems:"center", background: t.col==="done"?"var(--success)":"transparent" }}>
                          {t.col==="done" && <I.check size={10} style={{ color:"white" }}/>}
                        </span>
                      </button>
                    </div>
                    <div className="kcard-title" style={{ textDecoration: t.col==="done"?"line-through":"none", color: t.col==="done"?"var(--text-3)":"var(--text)" }}>{t.titulo}</div>
                    <div className="kcard-meta">
                      <I.cal size={12}/> <span className="mono">{t.prazo}</span>
                      <span style={{ marginLeft:"auto" }}><Avatar name={DATA.meta.user.name}/></span>
                    </div>
                  </div>
                ))}
                {list.length===0 && <div style={{ fontSize:12, color:"var(--text-3)", padding:"12px 4px", textAlign:"center" }}>Vazio</div>}
              </div>
            );
          })}
        </div>
      </div>

      {showNew && <ModalNovaTask onClose={()=>setShowNew(false)} onSave={addTask}/>}
      {openT && <Modal title={openT.titulo} sub={openT.tag+" · prazo "+openT.prazo} onClose={()=>setOpenT(null)}
        footer={<>
          <button className="btn btn-ghost" onClick={()=>setOpenT(null)}>Fechar</button>
          <button className="btn" onClick={()=>{ toggleDone(openT.id); setOpenT(null); }}>{openT.col==="done"?"Reabrir":"Marcar concluída"}</button>
        </>}>
        <div className="grid g-2 mb-4">
          <div><div className="stat-label">Prioridade</div><span className={"tag " + (openT.prio==="alta"?"danger":openT.prio==="media"?"warn":"")}>{openT.prio}</span></div>
          <div><div className="stat-label">Status</div><span className="tag brand">{openT.col}</span></div>
        </div>
        <div className="stat-label">Descrição</div>
        <textarea className="textarea mt-2" defaultValue={"Detalhes da tarefa: " + openT.titulo + ".\nResponsável: " + DATA.meta.user.name + "."}/>
      </Modal>}
    </div>
  );
}

function ModalNovaTask({ onClose, onSave }) {
  const [f, setF] = useState({ titulo:"", prio:"media", prazo:"30/05", tag:"Conteúdo" });
  return (
    <Modal title="Nova tarefa" sub="Adicionar à coluna 'A Fazer'" onClose={onClose}
      footer={<>
        <button className="btn btn-ghost" onClick={onClose}>Cancelar</button>
        <button className="btn btn-primary" onClick={()=>f.titulo && onSave(f)}>Adicionar</button>
      </>}>
      <div className="form-row"><label className="form-label">Título</label><input className="input" autoFocus value={f.titulo} onChange={e=>setF({...f, titulo:e.target.value})} placeholder="Ex: Revisar copy da landing"/></div>
      <div className="grid g-3">
        <div className="form-row"><label className="form-label">Prioridade</label>
          <div className="pill-group">
            {["baixa","media","alta"].map(p=><button key={p} className={"pill " + (f.prio===p?"active":"")} onClick={()=>setF({...f, prio:p})}>{p}</button>)}
          </div>
        </div>
        <div className="form-row"><label className="form-label">Categoria</label>
          <select className="select" value={f.tag} onChange={e=>setF({...f, tag:e.target.value})}>
            {["Vendas","Conteúdo","Site","IuNews","Alunos","Financeiro","Social"].map(t=><option key={t}>{t}</option>)}
          </select>
        </div>
        <div className="form-row"><label className="form-label">Prazo</label><input className="input" value={f.prazo} onChange={e=>setF({...f, prazo:e.target.value})}/></div>
      </div>
    </Modal>
  );
}

Object.assign(window, { PageIuNews, PagePipeline, PageConteudo, PageTarefas });