// ============================================================
// Página: Home / Briefing matinal
// ============================================================
function healthScore(a) {
  let s = a.progresso * 0.5;
  s += a.status==="Ativo" ? 32 : a.status==="Pausado" ? 0 : 15;
  s += a.plano==="Premium" ? 18 : 10;
  return Math.min(100, Math.round(s));
}

const PERFIL_LABEL_HOME = { 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' };

function PageHome({ alunos, tarefas, onNav }) {
  const hoje = "26 mai · quarta";
  const ativos = alunos.filter(a=>a.status==="Ativo");
  const mrr = ativos.reduce((s,a)=>s+a.mensalidade,0);
  const novosAlunosMes = 2;
  const cashPosicao = 38400;

  const [leadsReais, setLeadsReais] = useState([]);
  const [leadTotal, setLeadTotal] = useState(null);

  useEffect(() => {
    fetch('https://qghfeotwlulewqgyenwa.supabase.co/rest/v1/iuvenis_leads?select=nome,email,status,plano,perfil,wp_link,whatsapp&order=created_at.desc&limit=500', {
      headers: { apikey: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InFnaGZlb3R3bHVsZXdxZ3llbndhIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NzY1NjMwMTIsImV4cCI6MjA5MjEzOTAxMn0.6jk0N7yeSwZmvw1zN7DyLJP69mB-kwYMa5kaWOoTj-Q', Accept: 'application/json' }
    }).then(r => r.json()).then(rows => {
      if (!rows || rows.error) return;
      setLeadTotal(rows.length);
      setLeadsReais(rows.slice(0, 4));
    }).catch(() => {});
  }, []);

  const emRisco = alunos
    .map(a=>({ ...a, score: healthScore(a) }))
    .filter(a => a.score < 55)
    .sort((a,b)=>a.score-b.score)
    .slice(0, 4);

  const tarefasHoje = tarefas.filter(t=>t.col!=="done" && (t.prazo==="26/05" || t.prazo==="27/05" || t.prazo==="28/05")).slice(0,5);
  const proximosCal = DX.calendario.slice(0,5);
  const leadsQuentes = leadsReais.length > 0 ? leadsReais : DATA.pipeline.leads.filter(l=>["Proposta","Fechamento","Diagnóstico"].includes(l.estagio)).slice(0,4);
  const inboxNovas = DX.inbox.filter(m=>m.naoLida).slice(0,4);

  const receita7d = 7820;
  const gastoAds7d = 980;

  return (
    <div className="flex-col gap-4">
      {/* Saudação + KPIs principais */}
      <div className="card" style={{ padding:"24px 28px", background:"linear-gradient(135deg, #0B1530 0%, #1B274A 100%)", color:"white", border:"none" }}>
        <div className="row gap-4" style={{ alignItems:"flex-start", justifyContent:"space-between", flexWrap:"wrap" }}>
          <div>
            <div style={{ fontSize:12, opacity:0.6, textTransform:"uppercase", letterSpacing:"0.06em", fontWeight:500 }}>{hoje}</div>
            <div style={{ fontSize:28, fontWeight:600, marginTop:8, letterSpacing:"-0.02em" }}>
              Bom dia, <span style={{ fontFamily:"var(--font-serif)", fontStyle:"italic", fontWeight:400, color:"#B8C5E8" }}>Maria</span>
            </div>
            <div style={{ fontSize:14, opacity:0.7, marginTop:6, maxWidth:520, lineHeight:1.5 }}>
              {ativos.length} alunos ativos · {tarefas.filter(t=>t.col!=="done").length} tarefas em aberto · {inboxNovas.length} mensagens novas.
              Você fechou <strong style={{ color:"#fff" }}>{novosAlunosMes} matrículas</strong> esse mês ({fmtBRL(novosAlunosMes*1490)}).
            </div>
          </div>
          <div className="row gap-3" style={{ flexWrap:"wrap" }}>
            <div style={{ textAlign:"right" }}>
              <div style={{ fontSize:11, opacity:0.6 }}>MRR</div>
              <div className="num" style={{ fontSize:24, fontWeight:600 }}>{fmtBRL(mrr)}</div>
              <div style={{ fontSize:11, color:"#7ED4A8" }}>+8,4% vs mês passado</div>
            </div>
            <div style={{ width:1, background:"rgba(255,255,255,0.15)" }}></div>
            <div style={{ textAlign:"right" }}>
              <div style={{ fontSize:11, opacity:0.6 }}>Caixa</div>
              <div className="num" style={{ fontSize:24, fontWeight:600 }}>{fmtBRL(cashPosicao)}</div>
              <div style={{ fontSize:11, opacity:0.6 }}>~ 4,3 meses de runway</div>
            </div>
          </div>
        </div>
      </div>

      {/* Top KPIs cross-módulo */}
      <div className="grid g-4">
        <button className="card" style={{ textAlign:"left", cursor:"pointer" }} onClick={()=>onNav("alunos")}>
          <div className="stat-label">Saúde da base</div>
          <div className="row gap-3" style={{ alignItems:"baseline" }}>
            <div className="stat-value">{Math.round(alunos.reduce((s,a)=>s+healthScore(a),0)/alunos.length)}<span style={{ fontSize:16, color:"var(--text-3)" }}>/100</span></div>
            <Delta value={2.4}/>
          </div>
          <div className="text-3" style={{ fontSize:11, marginTop:6 }}>{emRisco.length} em risco · {ativos.filter(a=>healthScore(a)>80).length} promotores</div>
        </button>

        <button className="card" style={{ textAlign:"left", cursor:"pointer" }} onClick={()=>onNav("pipeline")}>
          <div className="stat-label">Pipeline · leads</div>
          <div className="row gap-3" style={{ alignItems:"baseline" }}>
            <div className="stat-value">{leadTotal !== null ? leadTotal : DATA.pipeline.estagios.reduce((s,e)=>s+e.count,0)}</div>
            <Delta value={12.4}/>
          </div>
          <div className="text-3" style={{ fontSize:11, marginTop:6 }}>
            {leadTotal !== null ? `${leadTotal} captados via quiz` : fmtBRL(DATA.pipeline.estagios.reduce((s,e)=>s+e.valor,0)) + ' em valor'}
          </div>
        </button>

        <button className="card" style={{ textAlign:"left", cursor:"pointer" }} onClick={()=>onNav("anuncios")}>
          <div className="stat-label">Ads · ROAS</div>
          <div className="row gap-3" style={{ alignItems:"baseline" }}>
            <div className="stat-value">{DX.ads.kpis.roas.value}<span style={{ fontSize:16, color:"var(--text-3)" }}>x</span></div>
            <Delta value={DX.ads.kpis.roas.delta}/>
          </div>
          <div className="text-3" style={{ fontSize:11, marginTop:6 }}>{fmtBRL(DX.ads.kpis.gastoMes.value)} investidos esse mês</div>
        </button>

        <button className="card" style={{ textAlign:"left", cursor:"pointer" }} onClick={()=>onNav("social")}>
          <div className="stat-label">Social · alcance 30d</div>
          <div className="row gap-3" style={{ alignItems:"baseline" }}>
            <div className="stat-value">{fmtCompact(DATA.social.kpis.alcance30d.value)}</div>
            <Delta value={DATA.social.kpis.alcance30d.delta}/>
          </div>
          <div className="text-3" style={{ fontSize:11, marginTop:6 }}>+{DATA.social.kpis.novos30d.value.toLocaleString("pt-BR")} novos seguidores</div>
        </button>
      </div>

      {/* Briefing rows */}
      <div className="grid g-2-1">
        {/* Esquerda: ações pra hoje + alunos em risco */}
        <div className="flex-col gap-4">
          {/* Ações pra hoje */}
          <div className="card">
            <div className="card-h">
              <div><div className="card-title">Foco do dia</div><div className="card-sub">O que mexe o ponteiro hoje</div></div>
              <button className="btn btn-ghost btn-sm" onClick={()=>onNav("tarefas")}>Ver tudo <I.arrow size={12}/></button>
            </div>
            <div className="flex-col gap-2">
              {tarefasHoje.map(t=>(
                <div key={t.id} className="row gap-3" style={{ padding:"10px 12px", border:"1px solid var(--border)", borderRadius:8 }}>
                  <span style={{ width:8, height:8, borderRadius:50, background: t.prio==="alta"?"var(--danger)":t.prio==="media"?"var(--warn)":"var(--text-3)", flexShrink:0 }}></span>
                  <div style={{ flex:1, minWidth:0 }}>
                    <div style={{ fontWeight:500, fontSize:13.5 }}>{t.titulo}</div>
                    <div className="row gap-2 text-3" style={{ fontSize:11, marginTop:2 }}>
                      <span className="mono">{t.prazo}</span>
                      <span>·</span>
                      <span>{t.tag}</span>
                    </div>
                  </div>
                  <span className={"tag " + (t.prio==="alta"?"danger":t.prio==="media"?"warn":"")}>{t.prio}</span>
                </div>
              ))}
            </div>
          </div>

          {/* Alunos em risco (health score) */}
          <div className="card">
            <div className="card-h">
              <div><div className="card-title">Alunos em risco</div><div className="card-sub">Health score abaixo de 55 · agir essa semana</div></div>
              <button className="btn btn-ghost btn-sm" onClick={()=>onNav("alunos")}>Abrir CRM <I.arrow size={12}/></button>
            </div>
            <table className="dt">
              <thead><tr>
                <th>Aluno</th><th>Etapa</th><th style={{ width:140 }}>Health</th><th style={{ width:120 }}>Sinal</th>
              </tr></thead>
              <tbody>
                {emRisco.map(a => (
                  <tr key={a.id} className="clickable" onClick={()=>{ onNav("alunos"); setTimeout(()=>window.dispatchEvent(new CustomEvent("iuvenis:openAluno",{detail:a.id})),50); }}>
                    <td><div className="row gap-2"><Avatar name={a.nome}/><div><div style={{ fontWeight:500 }}>{a.nome}</div><div className="text-3" style={{ fontSize:11 }}>{a.pais} · {a.programa}</div></div></div></td>
                    <td><span className="tag">{a.etapa}</span></td>
                    <td>
                      <div className="row gap-2">
                        <div className="bar" style={{ flex:1 }}><i style={{ width:a.score+"%", background: a.score<40?"var(--danger)":"var(--warn)" }}/></div>
                        <span className="num text-3" style={{ fontSize:11, minWidth:24 }}>{a.score}</span>
                      </div>
                    </td>
                    <td className="text-3" style={{ fontSize:11.5 }}>{a.status==="Pausado"?"Plano pausado":a.progresso<25?"Baixo engajamento":"Atraso na trilha"}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>

        {/* Direita: caixa de entrada + leads quentes + agenda */}
        <div className="flex-col gap-4">
          {/* Inbox novas */}
          <div className="card">
            <div className="card-h">
              <div><div className="card-title">Caixa de entrada</div><div className="card-sub">{inboxNovas.length} não lidas</div></div>
              <button className="btn btn-ghost btn-sm" onClick={()=>onNav("inbox")}>Abrir <I.arrow size={12}/></button>
            </div>
            <div className="flex-col gap-2">
              {inboxNovas.map(m=>(
                <div key={m.id} className="row gap-2" style={{ padding:"8px 10px", borderRadius:8 }} onMouseEnter={e=>e.currentTarget.style.background="var(--surface-2)"} onMouseLeave={e=>e.currentTarget.style.background="transparent"}>
                  <ChannelIcon canal={m.canal}/>
                  <div style={{ flex:1, minWidth:0 }}>
                    <div style={{ fontSize:12.5, fontWeight:600 }}>{m.de}</div>
                    <div className="text-3" style={{ fontSize:11.5, whiteSpace:"nowrap", overflow:"hidden", textOverflow:"ellipsis" }}>{m.pre}</div>
                  </div>
                  <span className="mono text-3" style={{ fontSize:10.5 }}>{m.quando}</span>
                </div>
              ))}
            </div>
          </div>

          {/* Leads recentes do quiz */}
          <div className="card">
            <div className="card-h">
              <div>
                <div className="card-title">Leads recentes</div>
                <div className="card-sub">{leadTotal !== null ? leadTotal + ' captados · quiz iuvenis' : 'Fechamento + Proposta'}</div>
              </div>
              <button className="btn btn-ghost btn-sm" onClick={()=>onNav("pipeline")}>Pipeline <I.arrow size={12}/></button>
            </div>
            <div className="flex-col gap-2">
              {leadsQuentes.map((l,i)=>(
                <div key={i} className="row gap-2" style={{ padding:"8px 10px", borderRadius:8, border:"1px solid var(--border)" }}>
                  <Avatar name={l.nome}/>
                  <div style={{ flex:1, minWidth:0 }}>
                    <div style={{ fontSize:12.5, fontWeight:600 }}>{l.nome}</div>
                    <div className="text-3" style={{ fontSize:11, whiteSpace:"nowrap", overflow:"hidden", textOverflow:"ellipsis" }}>
                      {l.email || l.prox || (l.pais && l.programa ? l.pais + ' · ' + l.programa : '')}
                    </div>
                  </div>
                  {l.status !== undefined
                    ? <span className={"tag " + (l.status==="Vendido"?"success":l.status==="Contatado"?"brand":"")}>{l.status||'Novo'}</span>
                    : <span className={"tag " + (l.estagio==="Fechamento"?"success":"warn")}>{l.estagio}</span>
                  }
                </div>
              ))}
            </div>
          </div>

          {/* Calendário próximos 5 */}
          <div className="card">
            <div className="card-h">
              <div><div className="card-title">Próximas publicações</div><div className="card-sub">Conteúdo + IuNews</div></div>
              <button className="btn btn-ghost btn-sm" onClick={()=>onNav("calendario")}>Calendário <I.arrow size={12}/></button>
            </div>
            <div className="flex-col gap-2">
              {proximosCal.map((c,i)=>(
                <div key={i} className="row gap-2" style={{ padding:"8px 10px", borderRadius:8 }}>
                  <CalTypeIcon item={c}/>
                  <div style={{ flex:1, minWidth:0 }}>
                    <div style={{ fontSize:12.5, fontWeight:500, whiteSpace:"nowrap", overflow:"hidden", textOverflow:"ellipsis" }}>{c.titulo}</div>
                    <div className="text-3" style={{ fontSize:11 }}>{fmtDateBR(c.data)} · {c.status}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

// ---------- Channel icon (inbox) ----------
function ChannelIcon({ canal, size=22 }) {
  const map = {
    instagram: { c:"linear-gradient(135deg, #F58529, #DD2A7B, #8134AF)", ico:<I.inst size={12}/> },
    whatsapp:  { c:"#25D366", ico:<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2"><path d="M3 20l1.5-4.5A8 8 0 1 1 8.5 19.5L3 20z"/></svg> },
    email:     { c:"var(--brand)", ico:<I.mail size={12}/> },
    tiktok:    { c:"#000", ico:<I.tt size={12}/> },
    youtube:   { c:"#FF0000", ico:<I.yt size={12}/> },
  };
  const m = map[canal];
  return <span style={{ width:size, height:size, borderRadius:6, background: m.c, display:"grid", placeItems:"center", color:"white", flexShrink:0 }}>{m.ico}</span>;
}

// ---------- Cal type icon ----------
function CalTypeIcon({ item, size=22 }) {
  if (item.tipo === "post") return <SocialIcon rede={item.rede} size={size}/>;
  if (item.tipo === "news") return <span style={{ width:size, height:size, borderRadius:6, background:"var(--brand)", display:"grid", placeItems:"center", color:"white" }}><I.mail size={12}/></span>;
  if (item.tipo === "aula") return <span style={{ width:size, height:size, borderRadius:6, background:"var(--purple)", display:"grid", placeItems:"center", color:"white" }}><I.play size={12}/></span>;
  return <span style={{ width:size, height:size, borderRadius:6, background:"var(--text-3)" }}></span>;
}

function fmtDateBR(iso) {
  const [y,m,d] = iso.split("-");
  const meses = ["jan","fev","mar","abr","mai","jun","jul","ago","set","out","nov","dez"];
  return `${parseInt(d)} ${meses[parseInt(m)-1]}`;
}

Object.assign(window, { PageHome, healthScore, ChannelIcon, CalTypeIcon, fmtDateBR });