// ============================================================
// Página: Site / SEO (iuvenisoficial.com)
// ============================================================
function PageSite({ period, setPeriod }) {
  const [st, setSt] = useState(DATA.site);

  useEffect(() => {
    fetch('/api/site')
      .then(r => r.ok ? r.json() : null)
      .then(d => {
        if (!d) return;
        setSt(prev => ({
          ...prev,
          kpis: {
            visitantes: d.kpis.visitantes ?? prev.kpis.visitantes,
            sessoes:    d.kpis.sessoes    ?? prev.kpis.sessoes,
            conversao:  d.kpis.conversao.value != null ? d.kpis.conversao : prev.kpis.conversao,
            tempoMedio: d.kpis.tempoMedio.value ? d.kpis.tempoMedio : prev.kpis.tempoMedio,
          },
          serieVisitantes: d.serieVisitantes?.length > 1 ? d.serieVisitantes : prev.serieVisitantes,
          fontes:     d.fontes?.length     ? d.fontes     : prev.fontes,
          topPaginas: d.topPaginas?.length ? d.topPaginas : prev.topPaginas,
        }));
      })
      .catch(() => {});
  }, []);

  const days = period==="7d"?7 : period==="30d"?30 : period==="90d"?30 : 30;
  const serie = st.serieVisitantes.slice(-days).map((v,i,arr)=>({
    v, label: i===0?"":(i===arr.length-1?"hoje":"d-"+(arr.length-1-i))
  }));

  const totalFontes = st.fontes.reduce((s,f)=>s+f.v,0);
  const segs = st.fontes.map(f=>({ value:f.v, color:f.cor, label:f.nome }));

  const vitalStatus = (metric, good, ok, value) => {
    if (value <= good) return { c:"var(--success)", l:"Bom" };
    if (value <= ok)   return { c:"var(--warn)",    l:"Aceitável" };
    return { c:"var(--danger)", l:"Ruim" };
  };
  const lcp = vitalStatus("lcp", 2.5, 4.0, st.webVitals.lcp);
  const cls = vitalStatus("cls", 0.10, 0.25, st.webVitals.cls);
  const inp = vitalStatus("inp", 200, 500, st.webVitals.inp);

  return (
    <div className="flex-col gap-4">
      {/* Site header / domain bar */}
      <div className="card" style={{ padding:"14px 18px", display:"flex", alignItems:"center", gap:14 }}>
        <div style={{ width:36, height:36, borderRadius:8, background:"#0B1530", display:"grid", placeItems:"center", color:"white", fontFamily:"var(--font-serif)", fontStyle:"italic", fontSize:18 }}>I</div>
        <div>
          <div style={{ fontSize:14, fontWeight:600 }}>{st.dominio}</div>
          <div className="row gap-2 text-3" style={{ fontSize:11.5, marginTop:2 }}>
            <span>Indexada · {st.paginasIndexadas} páginas</span>
            <span>•</span>
            <span>{st.backlinks.total} backlinks de {st.backlinks.dominios} domínios</span>
            <span className="tag success" style={{ marginLeft:4 }}><span className="dot"></span>Online</span>
          </div>
        </div>
        <div className="row gap-2" style={{ marginLeft:"auto" }}>
          <button className="btn btn-ghost btn-sm"><I.ext size={12}/> Abrir site</button>
          <PeriodFilter value={period} onChange={setPeriod}/>
        </div>
      </div>

      {/* KPIs */}
      <div className="grid g-4">
        <StatCard label="Visitantes únicos" value={st.kpis.visitantes.value.toLocaleString("pt-BR")} delta={st.kpis.visitantes.delta} spark={st.serieVisitantes.slice(-12)} accent="var(--brand-accent)"/>
        <StatCard label="Sessões"           value={st.kpis.sessoes.value.toLocaleString("pt-BR")} delta={st.kpis.sessoes.delta} spark={st.serieVisitantes.slice(-12).map(v=>Math.round(v*1.44))} accent="var(--teal)"/>
        <StatCard label="Conversão"         value={st.kpis.conversao.value} unit="%" delta={st.kpis.conversao.delta} spark={[2.6,2.8,2.9,3.0,3.1,3.2,3.3,3.4,3.4]} accent="var(--success)"/>
        <StatCard label="Tempo médio · sessão" value={st.kpis.tempoMedio.value} delta={st.kpis.tempoMedio.delta} accent="var(--purple)"/>
      </div>

      {/* Traffic chart + Sources */}
      <div className="grid g-2-1">
        <div className="card">
          <div className="card-h">
            <div>
              <div className="card-title">Tráfego do site</div>
              <div className="card-sub">Visitantes únicos por dia</div>
            </div>
            <div className="row gap-2" style={{ fontSize:11, color:"var(--text-3)" }}>
              <span style={{ width:8, height:8, borderRadius:2, background:"var(--brand-accent)" }}></span>
              <span>Visitantes</span>
            </div>
          </div>
          <LineChart data={serie} height={240} color="var(--brand-accent)" gradientId="site-grad"/>
        </div>

        <div className="card">
          <div className="card-h">
            <div className="card-title">Fontes de tráfego</div>
            <div className="card-sub">Distribuição no período</div>
          </div>
          <div className="row gap-4" style={{ alignItems:"center" }}>
            <Donut segments={segs} centerLabel={fmtCompact(totalFontes)} centerSub="visitas"/>
            <div className="flex-col gap-2" style={{ flex:1, minWidth:0 }}>
              {st.fontes.map((f,i)=>(
                <div key={i} className="row gap-2" style={{ fontSize:12.5, justifyContent:"space-between" }}>
                  <div className="row gap-2" style={{ minWidth:0 }}>
                    <span style={{ width:8, height:8, borderRadius:2, background: f.cor, flexShrink:0 }}></span>
                    <span style={{ whiteSpace:"nowrap", overflow:"hidden", textOverflow:"ellipsis" }}>{f.nome}</span>
                  </div>
                  <span className="num text-3">{Math.round(f.v/totalFontes*100)}%</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>

      {/* Top pages + Devices + Web Vitals */}
      <div className="grid g-2-1">
        <div className="card">
          <div className="card-h">
            <div><div className="card-title">Páginas mais acessadas</div></div>
            <button className="btn btn-ghost btn-sm">Ver tudo <I.arrow size={12}/></button>
          </div>
          <table className="dt">
            <thead><tr>
              <th>URL</th>
              <th className="num" style={{ textAlign:"right" }}>Views</th>
              <th className="num" style={{ textAlign:"right" }}>Tempo médio</th>
              <th className="num" style={{ textAlign:"right" }}>Conversão</th>
            </tr></thead>
            <tbody>
              {st.topPaginas.map((p,i)=>(
                <tr key={i} className="clickable">
                  <td className="mono" style={{ fontSize:12.5, color:"var(--text)" }}>{p.url}</td>
                  <td className="num" style={{ textAlign:"right" }}>{p.views.toLocaleString("pt-BR")}</td>
                  <td className="num text-3" style={{ textAlign:"right", fontSize:12 }}>{p.tempo}</td>
                  <td className="num" style={{ textAlign:"right", color: p.taxa>5?"var(--success)": p.taxa<3?"var(--text-3)":"inherit", fontWeight: p.taxa>5?500:400 }}>{p.taxa}%</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>

        <div className="flex-col gap-4">
          <div className="card">
            <div className="card-h">
              <div><div className="card-title">Core Web Vitals</div><div className="card-sub">Performance · campo</div></div>
              <div className="num" style={{ fontSize:20, fontWeight:600, color:"var(--success)" }}>{st.webVitals.score}<span style={{ fontSize:12, color:"var(--text-3)" }}>/100</span></div>
            </div>
            <div className="flex-col gap-3">
              {[
                { name:"LCP", val: st.webVitals.lcp+"s", desc:"Largest Contentful Paint", status: lcp },
                { name:"CLS", val: st.webVitals.cls,      desc:"Cumulative Layout Shift", status: cls },
                { name:"INP", val: st.webVitals.inp+"ms", desc:"Interaction to Next Paint",status: inp },
              ].map((m,i)=>(
                <div key={i} className="row gap-3" style={{ justifyContent:"space-between" }}>
                  <div>
                    <div style={{ fontSize:12.5, fontWeight:600 }}>{m.name}</div>
                    <div className="text-3" style={{ fontSize:11 }}>{m.desc}</div>
                  </div>
                  <div className="row gap-2">
                    <span className="num" style={{ fontWeight:500 }}>{m.val}</span>
                    <span className="tag" style={{ background: "color-mix(in srgb, " + m.status.c + " 14%, transparent)", color: m.status.c }}><span className="dot"></span>{m.status.l}</span>
                  </div>
                </div>
              ))}
            </div>
          </div>

          <div className="card">
            <div className="card-h"><div className="card-title">Dispositivo</div></div>
            <div className="flex-col gap-2">
              {[
                ["Mobile",  st.dispositivo.mobile,  "var(--brand)"],
                ["Desktop", st.dispositivo.desktop, "var(--brand-accent)"],
                ["Tablet",  st.dispositivo.tablet,  "var(--text-3)"],
              ].map(([l,p,c])=>(
                <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+"%", background: c }}/></div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>

      {/* SEO Keywords */}
      <div className="card">
        <div className="card-h">
          <div>
            <div className="card-title">Palavras-chave · SEO orgânico</div>
            <div className="card-sub">Posição média no Google · {st.dominio}</div>
          </div>
          <div className="row gap-2">
            <span className="tag success"><span className="dot"></span>{st.keywords.filter(k=>k.pos<k.posPrev).length} subindo</span>
            <span className="tag"><span className="dot"></span>{st.keywords.filter(k=>k.pos===k.posPrev).length} estáveis</span>
            <button className="btn btn-ghost btn-sm"><I.ext size={12}/> Search Console</button>
          </div>
        </div>
        <table className="dt">
          <thead><tr>
            <th>Termo</th>
            <th className="num" style={{ textAlign:"center", width:90 }}>Posição</th>
            <th className="num" style={{ textAlign:"right" }}>Volume</th>
            <th className="num" style={{ textAlign:"right" }}>Cliques</th>
            <th className="num" style={{ textAlign:"right" }}>CTR</th>
            <th style={{ width:120 }}>Tendência</th>
          </tr></thead>
          <tbody>
            {st.keywords.map((k,i)=>{
              const move = k.posPrev - k.pos;
              return (
                <tr key={i} className="clickable">
                  <td style={{ fontWeight:500 }}>{k.termo}</td>
                  <td className="num" style={{ textAlign:"center" }}>
                    <span style={{ display:"inline-grid", placeItems:"center", width:28, height:28, borderRadius:6, background: k.pos<=3?"var(--success-soft)":k.pos<=10?"var(--brand-soft)":"var(--surface-2)", color: k.pos<=3?"var(--success)":k.pos<=10?"var(--brand)":"var(--text-2)", fontWeight:600, fontSize:12.5 }}>
                      {k.pos}
                    </span>
                  </td>
                  <td className="num" style={{ textAlign:"right" }}>{k.vol.toLocaleString("pt-BR")}</td>
                  <td className="num" style={{ textAlign:"right" }}>{k.cliques.toLocaleString("pt-BR")}</td>
                  <td className="num" style={{ textAlign:"right", color: k.ctr>10?"var(--success)":"inherit" }}>{k.ctr}%</td>
                  <td>
                    {move > 0 && <span className="delta up"><I.up size={10}/>+{move} pos</span>}
                    {move < 0 && <span className="delta down"><I.down size={10}/>{move} pos</span>}
                    {move === 0 && <span className="delta flat">estável</span>}
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </div>
  );
}

window.PageSite = PageSite;