// ============================================================
// PAGE — Leads do Quiz
// ============================================================
function PageLeadsQuiz() {
  const [leads, setLeads]       = React.useState([]);
  const [loading, setLoading]   = React.useState(true);
  const [erro, setErro]         = React.useState(null);
  const [busca, setBusca]       = React.useState("");
  const [filtroP, setFiltroP]   = React.useState("todos");
  const [filtroE, setFiltroE]   = React.useState("todos");

  React.useEffect(() => {
    fetch("https://iuvenisoficial.com/wp-json/iuvenis/v1/leads", {
      headers: {
        "Authorization": "Basic " + btoa("admin:U2pk ccFr ETvX 9n1U vnG9 akBc"),
        "Accept": "*/*",
      }
    })
    .then(r => r.json())
    .then(data => {
      const todos = (data.leads || []).filter(l =>
        l.perfil && l.email && l.email.includes("@") &&
        !["teste@iuvenis.com","teste.claude.quiz@iuvenis.com","diag.quiz.2@iuvenis.com",
          "teste.final.quiz@iuvenis.com","gehsud@hotmail.com","beddame@gmail.com",
          "marialuciarosiak@hotmail.com","mentoria.iuvenis@gmail.com",
          "teste.renda.delete@iuvenis.com","teste.v13.delete@iuvenis.com",
        ].includes(l.email) &&
        !["hehsjsje","djkfnkj","nshsh","teste","delete","test"].some(p =>
          (l.name || "").toLowerCase().includes(p)
        )
      );
      // Enriquece com dado do log local via data-extra.js se disponivel
      const logLeads = (window.LEADS_LOG || []);
      const logMap = {};
      logLeads.forEach(p => { if (p.email) logMap[p.email.toLowerCase()] = p; });

      const enriquecidos = todos.map(l => {
        const logEntry = logMap[(l.email || "").toLowerCase()] || {};
        return {
          nome:          l.name || l.email.split("@")[0],
          email:         l.email,
          whatsapp:      l.whatsapp || "",
          perfil:        l.perfil,
          momento:       l.momento || "",
          renda:         l.renda || "",
          ingles:        l.ingles || "",
          barreira:      l.barreira || "",
          data:          (l.date || "").slice(0,10),
          wp_link:       logEntry.wp_link || null,
          email_enviado: !!logEntry.email_enviado,
          d3:            !!logEntry.followup_d3,
          d7:            !!logEntry.followup_d7,
        };
      });
      enriquecidos.sort((a,b) => (b.data||"").localeCompare(a.data||""));
      setLeads(enriquecidos);
      setLoading(false);
    })
    .catch(e => { setErro(String(e)); setLoading(false); });
  }, []);

  const PERFIL_LABEL = {
    G:"Mestrado", H:"Doutorado/PhD", J:"Liderança Global", D:"Graduação",
    E:"Intercâmbio", F:"Pesquisa", I:"Voluntariado", A:"Fund.", B:"Ensino Médio", C:"Gap Year",
  };
  const RENDA_LABEL = {
    alta:"Alta", media_alta:"Média-Alta", media:"Média", baixa:"Baixa",
  };

  const perfis = ["todos",...new Set(leads.map(l=>l.perfil))].filter(Boolean);

  const filtrados = leads.filter(l => {
    const q = busca.toLowerCase();
    const matchQ = !q || (l.nome||"").toLowerCase().includes(q) || (l.email||"").includes(q);
    const matchP = filtroP === "todos" || l.perfil === filtroP;
    const matchE = filtroE === "todos"
      || (filtroE === "enviado" && l.email_enviado)
      || (filtroE === "nao_enviado" && !l.email_enviado)
      || (filtroE === "sem_proposta" && !l.wp_link);
    return matchQ && matchP && matchE;
  });

  const stats = {
    total:       leads.length,
    enviados:    leads.filter(l => l.email_enviado).length,
    com_proposta:leads.filter(l => l.wp_link).length,
    sem_proposta:leads.filter(l => !l.wp_link).length,
    alta_renda:  leads.filter(l => l.renda === "alta" || l.renda === "media_alta").length,
  };

  if (loading) return (
    <div style={{padding:48,textAlign:"center",color:"var(--text-3)"}}>
      Carregando leads do quiz...
    </div>
  );
  if (erro) return (
    <div style={{padding:48,textAlign:"center",color:"#e53e3e"}}>
      Erro: {erro}
    </div>
  );

  return (
    <div>
      {/* Stats */}
      <div className="kpi-grid" style={{marginBottom:24}}>
        {[
          {l:"Total do quiz",  v:stats.total,        sub:"leads reais"},
          {l:"Email enviado",  v:stats.enviados,      sub:"receberam o email"},
          {l:"Com proposta",   v:stats.com_proposta,  sub:"link gerado"},
          {l:"Sem proposta",   v:stats.sem_proposta,  sub:"gerando..."},
          {l:"Renda 5k+",      v:stats.alta_renda,    sub:"alta ou média-alta"},
        ].map((k,i) => (
          <div key={i} className="kpi-card">
            <div className="kpi-label">{k.l}</div>
            <div className="kpi-value">{k.v}</div>
            <div className="kpi-sub">{k.sub}</div>
          </div>
        ))}
      </div>

      {/* Filtros */}
      <div className="row gap-2" style={{marginBottom:16,flexWrap:"wrap"}}>
        <input
          className="input"
          placeholder="Buscar por nome ou email..."
          value={busca}
          onChange={e => setBusca(e.target.value)}
          style={{minWidth:240,flex:1}}
        />
        <select className="input" value={filtroP} onChange={e=>setFiltroP(e.target.value)} style={{minWidth:160}}>
          <option value="todos">Todos os perfis</option>
          {perfis.filter(p=>p!=="todos").map(p=>(
            <option key={p} value={p}>{PERFIL_LABEL[p]||p}</option>
          ))}
        </select>
        <select className="input" value={filtroE} onChange={e=>setFiltroE(e.target.value)} style={{minWidth:180}}>
          <option value="todos">Todos os status</option>
          <option value="enviado">Email enviado ✓</option>
          <option value="nao_enviado">Aguardando envio</option>
          <option value="sem_proposta">Sem proposta</option>
        </select>
        <span className="text-3" style={{fontSize:12,alignSelf:"center"}}>
          {filtrados.length} de {leads.length}
        </span>
      </div>

      {/* Tabela */}
      <div style={{overflowX:"auto",borderRadius:10,border:"1px solid var(--border)"}}>
        <table style={{width:"100%",borderCollapse:"collapse",fontSize:13}}>
          <thead>
            <tr style={{background:"var(--surface-2)"}}>
              {["Nome","Email","Perfil","Inglês","Renda","Data","Proposta","Email","D+3","D+7"].map(h => (
                <th key={h} style={{
                  padding:"10px 14px",textAlign:"left",fontWeight:600,
                  color:"var(--text-2)",fontSize:11,letterSpacing:"0.06em",
                  textTransform:"uppercase",borderBottom:"1px solid var(--border)",
                  whiteSpace:"nowrap",
                }}>{h}</th>
              ))}
            </tr>
          </thead>
          <tbody>
            {filtrados.map((l, i) => (
              <tr key={i} style={{
                borderBottom:"1px solid var(--border)",
                background: i%2===0 ? "var(--surface)" : "var(--surface-2)",
              }}>
                <td style={{padding:"9px 14px",fontWeight:500,maxWidth:180,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}}>
                  {l.nome}
                </td>
                <td style={{padding:"9px 14px",color:"var(--text-2)",fontSize:12,maxWidth:200,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}}>
                  {l.email}
                </td>
                <td style={{padding:"9px 14px"}}>
                  <span style={{
                    display:"inline-block",padding:"2px 8px",borderRadius:4,
                    fontSize:11,fontWeight:600,
                    background:"var(--gold-10, rgba(201,168,76,0.12))",
                    color:"var(--gold, #C9A84C)",
                  }}>
                    {PERFIL_LABEL[l.perfil]||l.perfil}
                  </span>
                </td>
                <td style={{padding:"9px 14px",color:"var(--text-3)",fontSize:12,textTransform:"capitalize"}}>
                  {l.ingles||"–"}
                </td>
                <td style={{padding:"9px 14px",fontSize:12}}>
                  {l.renda
                    ? <span style={{color: l.renda==="alta"||l.renda==="media_alta" ? "#38a169" : l.renda==="baixa" ? "#e53e3e" : "var(--text-2)"}}>
                        {RENDA_LABEL[l.renda]||l.renda}
                      </span>
                    : <span style={{color:"var(--text-3)"}}>–</span>
                  }
                </td>
                <td style={{padding:"9px 14px",color:"var(--text-3)",fontSize:12,whiteSpace:"nowrap"}}>
                  {l.data||"–"}
                </td>
                <td style={{padding:"9px 14px",textAlign:"center"}}>
                  {l.wp_link
                    ? <a href={l.wp_link} target="_blank" rel="noopener" style={{color:"var(--gold)",textDecoration:"none",fontSize:12}}>
                        Ver
                      </a>
                    : <span style={{color:"var(--text-3)",fontSize:11}}>gerando</span>
                  }
                </td>
                <td style={{padding:"9px 14px",textAlign:"center",fontSize:16}}>
                  {l.email_enviado ? "✅" : <span style={{color:"var(--text-3)",fontSize:11}}>–</span>}
                </td>
                <td style={{padding:"9px 14px",textAlign:"center",fontSize:16}}>
                  {l.d3 ? "✅" : <span style={{color:"var(--text-3)",fontSize:11}}>–</span>}
                </td>
                <td style={{padding:"9px 14px",textAlign:"center",fontSize:16}}>
                  {l.d7 ? "✅" : <span style={{color:"var(--text-3)",fontSize:11}}>–</span>}
                </td>
              </tr>
            ))}
          </tbody>
        </table>
        {filtrados.length === 0 && (
          <div style={{padding:32,textAlign:"center",color:"var(--text-3)"}}>
            Nenhum lead encontrado com os filtros atuais.
          </div>
        )}
      </div>
    </div>
  );
}