// ============================================================
// PAGE — Candidaturas à Mentoria
// ============================================================
function PageCandidaturas() {
  const [lista, setLista]     = React.useState([]);
  const [loading, setLoading] = React.useState(true);
  const [busca, setBusca]     = React.useState("");
  const [filtroR, setFiltroR] = React.useState("todos");
  const [filtroM, setFiltroM] = React.useState("todos");
  const [sel, setSel]         = React.useState(null);

  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 candidaturas = (data.leads || []).filter(l =>
        l.source === "candidatura" &&
        l.email && l.email.includes("@") &&
        !["marialuciarosiak@hotmail.com","mentoria.iuvenis@gmail.com","teste@iuvenis.com"].includes(l.email)
      ).map(l => ({
        nome:      l.name || l.email.split("@")[0],
        email:     l.email,
        whatsapp:  l.whatsapp || "",
        instagram: l.instagram || "",
        sobre:     l.sobre || "",
        momento:   l.momento || "",
        escola:    l.escola || "",
        motivacao: l.motivacao || "",
        tipos:     l.tipos || "",
        familia:   l.familia || "",
        renda:     l.renda || "",
        data:      (l.date || "").slice(0, 10),
      })).sort((a, b) => b.data.localeCompare(a.data));

      setLista(candidaturas);
      setLoading(false);
    })
    .catch(() => setLoading(false));
  }, []);

  const RENDA_LABEL = {
    ate2k:"Até R$2k", "2a5k":"R$2–5k", "5a10k":"R$5–10k",
    "10a20k":"R$10–20k", acima20k:"Acima R$20k"
  };
  const MOMENTO_LABEL = {
    fundamental:"Fundamental", medio:"Médio", gap:"Gap Year",
    graduacao:"Graduação", formado:"Formado", pos:"Pós em andamento",
    pos_concluido:"Pós concluída", profissional:"Profissional"
  };
  const RENDA_COR = {
    ate2k:"#6b7280", "2a5k":"#6b7280", "5a10k":"#b45309",
    "10a20k":"#C9A84C", acima20k:"#16a34a"
  };

  const rendas = ["todos", "5a10k", "10a20k", "acima20k"];
  const momentos = ["todos", ...Object.keys(MOMENTO_LABEL)];

  const filtradas = lista.filter(c => {
    const q = busca.toLowerCase();
    const matchQ = !q || c.nome.toLowerCase().includes(q) || c.email.toLowerCase().includes(q);
    const matchR = filtroR === "todos" || c.renda === filtroR;
    const matchM = filtroM === "todos" || c.momento === filtroM;
    return matchQ && matchR && matchM;
  });

  const waLink = (wa) => {
    const num = (wa || "").replace(/\D/g, "");
    if (!num) return null;
    const msg = encodeURIComponent(`Oi ${wa}, recebi sua candidatura à mentoria Iuvenis e adoraria conversar! Você tem disponibilidade para uma call rápida essa semana?`);
    return `https://wa.me/${num}?text=${msg}`;
  };

  if (loading) return (
    <div style={{padding:"60px 24px", textAlign:"center", color:"var(--text-2)"}}>
      Carregando candidaturas...
    </div>
  );

  return (
    <div style={{padding:"0 0 80px"}}>
      {/* KPIs */}
      <div style={{display:"grid", gridTemplateColumns:"repeat(auto-fit,minmax(140px,1fr))", gap:16, marginBottom:28}}>
        {[
          { label:"Total",      val: lista.length,                                          cor:"var(--accent)" },
          { label:"Alta renda", val: lista.filter(c=>["10a20k","acima20k"].includes(c.renda)).length, cor:"#C9A84C" },
          { label:">R$20k",     val: lista.filter(c=>c.renda==="acima20k").length,           cor:"#16a34a" },
          { label:"Hoje",       val: lista.filter(c=>c.data===new Date().toISOString().slice(0,10)).length, cor:"var(--text-1)" },
        ].map(k => (
          <div key={k.label} style={{background:"var(--surface)",border:"1px solid var(--border)",borderRadius:10,padding:"16px 20px"}}>
            <div style={{fontSize:28,fontWeight:700,color:k.cor,fontFamily:"'Cormorant Garamond',serif"}}>{k.val}</div>
            <div style={{fontSize:12,color:"var(--text-2)",marginTop:4}}>{k.label}</div>
          </div>
        ))}
      </div>

      {/* Filtros */}
      <div style={{display:"flex",gap:10,flexWrap:"wrap",marginBottom:20}}>
        <input
          value={busca} onChange={e=>setBusca(e.target.value)}
          placeholder="Buscar por nome ou email..."
          style={{flex:1,minWidth:200,padding:"9px 14px",borderRadius:8,border:"1px solid var(--border)",background:"var(--surface)",color:"var(--text-1)",fontSize:13,outline:"none"}}
        />
        <select value={filtroR} onChange={e=>setFiltroR(e.target.value)}
          style={{padding:"9px 12px",borderRadius:8,border:"1px solid var(--border)",background:"var(--surface)",color:"var(--text-1)",fontSize:13}}>
          <option value="todos">Todas as rendas</option>
          {rendas.slice(1).map(r=><option key={r} value={r}>{RENDA_LABEL[r]||r}</option>)}
        </select>
        <select value={filtroM} onChange={e=>setFiltroM(e.target.value)}
          style={{padding:"9px 12px",borderRadius:8,border:"1px solid var(--border)",background:"var(--surface)",color:"var(--text-1)",fontSize:13}}>
          <option value="todos">Todos os momentos</option>
          {momentos.slice(1).map(m=><option key={m} value={m}>{MOMENTO_LABEL[m]||m}</option>)}
        </select>
      </div>

      {/* Tabela */}
      <div style={{background:"var(--surface)",border:"1px solid var(--border)",borderRadius:12,overflow:"hidden"}}>
        {filtradas.length === 0 ? (
          <div style={{padding:"48px 24px",textAlign:"center",color:"var(--text-2)"}}>
            {lista.length === 0 ? "Nenhuma candidatura recebida ainda." : "Nenhuma candidatura encontrada com esses filtros."}
          </div>
        ) : (
          <table style={{width:"100%",borderCollapse:"collapse"}}>
            <thead>
              <tr style={{borderBottom:"1px solid var(--border)"}}>
                {["Nome","Momento","Renda","Data","Ações"].map(h=>(
                  <th key={h} style={{padding:"11px 16px",textAlign:"left",fontSize:11,fontWeight:700,textTransform:"uppercase",letterSpacing:".1em",color:"var(--text-2)"}}>{h}</th>
                ))}
              </tr>
            </thead>
            <tbody>
              {filtradas.map((c, i) => (
                <tr key={c.email + i}
                    style={{borderBottom:"1px solid var(--border)",cursor:"pointer",transition:"background .15s"}}
                    onMouseEnter={e=>e.currentTarget.style.background="var(--surface-2)"}
                    onMouseLeave={e=>e.currentTarget.style.background=""}
                    onClick={()=>setSel(sel?.email===c.email?null:c)}>
                  <td style={{padding:"13px 16px"}}>
                    <div style={{fontWeight:600,fontSize:14,color:"var(--text-1)"}}>{c.nome}</div>
                    <div style={{fontSize:12,color:"var(--text-2)"}}>{c.email}</div>
                  </td>
                  <td style={{padding:"13px 16px",fontSize:13,color:"var(--text-2)"}}>{MOMENTO_LABEL[c.momento]||c.momento||"—"}</td>
                  <td style={{padding:"13px 16px"}}>
                    <span style={{fontSize:12,fontWeight:600,color:RENDA_COR[c.renda]||"var(--text-2)",background:`${RENDA_COR[c.renda]||"#888"}18`,padding:"3px 10px",borderRadius:20}}>
                      {RENDA_LABEL[c.renda]||c.renda||"—"}
                    </span>
                  </td>
                  <td style={{padding:"13px 16px",fontSize:13,color:"var(--text-2)"}}>{c.data||"—"}</td>
                  <td style={{padding:"13px 16px"}}>
                    <div style={{display:"flex",gap:8}}>
                      {waLink(c.whatsapp) && (
                        <a href={waLink(c.whatsapp)} target="_blank"
                           onClick={e=>e.stopPropagation()}
                           style={{fontSize:12,fontWeight:600,color:"#16a34a",background:"rgba(22,163,74,.1)",padding:"5px 12px",borderRadius:6,textDecoration:"none"}}>
                          WA
                        </a>
                      )}
                      <button onClick={e=>{e.stopPropagation();setSel(sel?.email===c.email?null:c)}}
                              style={{fontSize:12,fontWeight:600,color:"var(--accent)",background:"rgba(0,158,219,.1)",padding:"5px 12px",borderRadius:6,border:"none",cursor:"pointer"}}>
                        Ver
                      </button>
                    </div>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        )}
      </div>

      {/* Painel lateral de detalhe */}
      {sel && (
        <div style={{position:"fixed",top:0,right:0,bottom:0,width:420,background:"var(--surface)",borderLeft:"1px solid var(--border)",boxShadow:"-4px 0 24px rgba(0,0,0,.12)",overflowY:"auto",zIndex:200,padding:0}}>
          <div style={{padding:"20px 24px",borderBottom:"1px solid var(--border)",display:"flex",alignItems:"center",justifyContent:"space-between",position:"sticky",top:0,background:"var(--surface)",zIndex:1}}>
            <span style={{fontWeight:700,fontSize:15,color:"var(--text-1)"}}>Candidatura</span>
            <button onClick={()=>setSel(null)} style={{background:"none",border:"none",cursor:"pointer",color:"var(--text-2)",fontSize:18}}>&#x2715;</button>
          </div>
          <div style={{padding:"24px"}}>
            <div style={{marginBottom:24}}>
              <div style={{fontFamily:"'Cormorant Garamond',serif",fontSize:26,fontWeight:600,color:"var(--text-1)",marginBottom:4}}>{sel.nome}</div>
              <div style={{fontSize:13,color:"var(--text-2)",marginBottom:2}}>{sel.email}</div>
              {sel.whatsapp && <div style={{fontSize:13,color:"var(--text-2)",marginBottom:2}}>{sel.whatsapp}</div>}
              {sel.instagram && <div style={{fontSize:13,color:"var(--text-2)"}}>{sel.instagram}</div>}
            </div>

            {/* Badges */}
            <div style={{display:"flex",gap:8,flexWrap:"wrap",marginBottom:24}}>
              {sel.momento && <span style={{fontSize:12,fontWeight:600,background:"var(--surface-2)",color:"var(--text-2)",padding:"4px 12px",borderRadius:20}}>{MOMENTO_LABEL[sel.momento]||sel.momento}</span>}
              {sel.renda   && <span style={{fontSize:12,fontWeight:600,color:RENDA_COR[sel.renda],background:`${RENDA_COR[sel.renda]}18`,padding:"4px 12px",borderRadius:20}}>{RENDA_LABEL[sel.renda]||sel.renda}</span>}
              {sel.escola  && <span style={{fontSize:12,background:"var(--surface-2)",color:"var(--text-2)",padding:"4px 12px",borderRadius:20}}>{sel.escola}</span>}
            </div>

            {/* Campos */}
            {[
              {label:"Sobre a pessoa",     val: sel.sobre},
              {label:"Motivação",          val: sel.motivacao},
              {label:"Tipos de experiência", val: sel.tipos},
              {label:"Apoio da família",   val: sel.familia},
            ].filter(f=>f.val).map(f=>(
              <div key={f.label} style={{marginBottom:20}}>
                <div style={{fontSize:10,fontWeight:700,letterSpacing:".15em",textTransform:"uppercase",color:"var(--text-2)",marginBottom:6}}>{f.label}</div>
                <div style={{fontSize:13,color:"var(--text-1)",lineHeight:1.7,background:"var(--surface-2)",padding:"12px 14px",borderRadius:8}}>{f.val}</div>
              </div>
            ))}

            {/* Ações */}
            <div style={{marginTop:28,display:"flex",flexDirection:"column",gap:10}}>
              {waLink(sel.whatsapp) && (
                <a href={waLink(sel.whatsapp)} target="_blank"
                   style={{display:"block",textAlign:"center",background:"#16a34a",color:"#fff",borderRadius:8,padding:"13px",fontSize:14,fontWeight:600,textDecoration:"none"}}>
                  Chamar no WhatsApp
                </a>
              )}
              <a href={`mailto:${sel.email}?subject=Sua candidatura à mentoria Iuvenis`}
                 style={{display:"block",textAlign:"center",background:"var(--surface-2)",color:"var(--text-1)",borderRadius:8,padding:"13px",fontSize:14,fontWeight:600,textDecoration:"none"}}>
                Enviar email
              </a>
            </div>

            <div style={{marginTop:16,fontSize:11,color:"var(--text-2)",textAlign:"center"}}>Recebido em {sel.data}</div>
          </div>
        </div>
      )}
    </div>
  );
}

Object.assign(window, { PageCandidaturas });