/* global React, SEQ_UI, SEQ_LAYOUT */
const { brl } = window.SEQ_UI;
const { PageHead, KPI, SectLabel, AreaChart, BarChart, Donut, Pill } = window.SEQ_LAYOUT;

function Relatorios() {
  const [period, setPeriod] = React.useState("90D");
  const [tab, setTab] = React.useState("vendas");
  const [stats, setStats] = React.useState(null);

  React.useEffect(() => {
    window.SEQ_API.stats().then(setStats).catch(() => {});
  }, []);

  const totalRecebido = stats ? (stats.totalPaid ?? 0) / 100 : 154200;
  const totalFaturado = stats ? (stats.totalInvoiced ?? 0) / 100 : 0;
  const recebidoMes = stats ? (stats.receivedThisMonth ?? 0) / 100 : 0;
  const conversao = stats && stats.totalInvoiced > 0
    ? ((stats.totalPaid / stats.totalInvoiced) * 100).toFixed(1) + "%"
    : "—";

  return (
    <div style={{ minHeight: "100vh", background: "var(--kp-paper)" }}>
      <PageHead num="17" label="RELATÓRIOS & ANALYTICS" title="Os números" em="por trás."
        actions={(<>
          <div style={{ display: "flex", gap: 4 }}>
            {["7D","30D","90D","ANO"].map(p => (
              <button key={p} onClick={()=>setPeriod(p)} className="kp-btn kp-btn-sm" style={{ background: period === p ? "var(--kp-ink)" : "var(--kp-white)", color: period === p ? "var(--kp-paper)" : "var(--kp-ink)" }}>{p}</button>
            ))}
          </div>
          <button className="kp-btn kp-btn-sm">Comparar</button>
          <button className="kp-btn kp-btn-sm">Exportar CSV</button>
          <button className="kp-btn kp-btn-sm kp-btn-ink">Agendar relatório</button>
        </>)}
      />

      <div style={{ maxWidth: 1320, margin: "0 auto", padding: "28px 28px 80px" }}>
        {/* Tab strip */}
        <div style={{ display: "flex", gap: 4, marginBottom: 22, borderBottom: "1.5px solid var(--kp-ink)" }}>
          {[
            { id: "vendas", l: "Vendas" },
            { id: "produto", l: "Produto" },
            { id: "cliente", l: "Cliente" },
            { id: "trafego", l: "Tráfego" },
            { id: "financeiro", l: "Financeiro" },
          ].map(t => (
            <button key={t.id} onClick={()=>setTab(t.id)} style={{
              padding: "10px 18px", border: "1.5px solid var(--kp-ink)", marginBottom: -1.5,
              background: tab === t.id ? "var(--kp-paper)" : "var(--kp-soft)",
              color: "var(--kp-ink)", cursor: "pointer",
              fontFamily: "var(--kp-mono)", fontSize: 10, letterSpacing: "0.16em", textTransform: "uppercase",
              fontWeight: tab === t.id ? 600 : 400,
            }}>{t.l}</button>
          ))}
        </div>

        {tab === "vendas" && <RVendas/>}
        {tab === "produto" && <RProduto/>}
        {tab === "cliente" && <RCliente/>}
        {tab === "trafego" && <RTrafego/>}
        {tab === "financeiro" && <RFinanceiro/>}
      </div>
    </div>
  );
}

function RVendas() {
  return (
    <>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(5,1fr)", gap: 12, marginBottom: 22 }}>
        <KPI label="Receita total" value={brl(totalRecebido)} sub={stats ? `${stats.totalClients} clientes` : "—"} trend="up" bg="var(--kp-pink)" pulse/>
        <KPI label="Faturado" value={brl(totalFaturado)} sub={stats ? `${stats.pendingCount} pendentes` : "—"} trend="up"/>
        <KPI label="Recebido este mês" value={brl(recebidoMes)} sub="entradas com data no mês" trend="up" bg="var(--kp-green)"/>
        <KPI label="Conversão" value={conversao} sub="recebido / faturado" bg="var(--kp-cold)"/>
        <KPI label="Vencidas" value={stats?.overdueCount ?? 0} sub="cobranças atrasadas" bg="var(--kp-warm)"/>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1.5fr 1fr", gap: 16, marginBottom: 22 }}>
        <div className="kp-card" style={{ padding: 22 }}>
          <SectLabel num="01" label="Receita diária"/>
          <AreaChart data={[12,18,15,22,28,24,32,28,38,35,42,38,48,44,52,46,55,50,58,62,55,68,64,72,68,76,82,78,88,92]} color="var(--kp-pink)"/>
        </div>
        <div className="kp-card" style={{ padding: 22 }}>
          <SectLabel num="02" label="Por método"/>
          <div style={{ display: "flex", alignItems: "center", gap: 16, marginTop: 12 }}>
            <Donut value={0.48} color="var(--kp-green)" label="PIX"/>
            <div style={{ flex: 1, display: "flex", flexDirection: "column", gap: 8 }}>
              <Row l="PIX" v={brl(74000)} pct="48%" c="var(--kp-green)"/>
              <Row l="Cartão" v={brl(54300)} pct="35%" c="var(--kp-cold)"/>
              <Row l="Boleto" v={brl(18500)} pct="12%" c="var(--kp-yellow)"/>
              <Row l="Cripto" v={brl(7400)} pct="5%" c="var(--kp-ink)"/>
            </div>
          </div>
        </div>
      </div>

      {/* Heatmap */}
      <div className="kp-card" style={{ padding: 22, marginBottom: 22 }}>
        <SectLabel num="03" label="Mapa de calor · vendas por dia × hora" tag="ÚLTIMOS 90 DIAS"/>
        <div style={{ display: "grid", gridTemplateColumns: "auto repeat(7,1fr)", gap: 4, marginTop: 8 }}>
          <span></span>
          {["SEG","TER","QUA","QUI","SEX","SÁB","DOM"].map(d => (
            <span key={d} className="kp-mono" style={{ fontSize: 9, letterSpacing: "0.16em", color: "var(--kp-muted)", textAlign: "center" }}>{d}</span>
          ))}
          {[8,9,10,11,12,13,14,15,16,17,18,19,20,21,22].map(h => (
            <React.Fragment key={h}>
              <span className="kp-mono" style={{ fontSize: 9, letterSpacing: "0.14em", color: "var(--kp-muted)", paddingRight: 4, textAlign: "right" }}>{h}h</span>
              {Array.from({length:7}).map((_,d) => {
                const intensity = ((h * 13 + d * 7) % 100) / 100;
                const isBusiness = h >= 9 && h <= 18 && d < 5;
                const value = isBusiness ? Math.min(1, intensity + 0.4) : intensity * 0.4;
                return (
                  <span key={d} style={{
                    height: 16,
                    background: value < 0.1 ? "var(--kp-soft)" : `oklch(0.78 0.16 ${340 - value*30} / ${value})`,
                    border: "1px solid rgba(10,10,10,0.08)",
                  }}/>
                );
              })}
            </React.Fragment>
          ))}
        </div>
      </div>

      {/* Top + bottom tables */}
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
        <RTable title="Top 5 produtos" cols={["Produto", "Vendas", "Receita"]} rows={[
          ["Mentoria 1:1 mensal", "82", brl(98400)],
          ["Setup IA personalizado", "12", brl(48000)],
          ["Curso Sequência Viral", "67", brl(19430)],
          ["Bundle: Curso + Mentoria", "21", brl(31290)],
          ["Plano anual Pro", "8", brl(96000)],
        ]}/>
        <RTable title="Top 5 origens" cols={["Origem", "Visitas", "Conversão"]} rows={[
          ["Direct", "8.420", "5.2%"],
          ["Twitter / X", "4.120", "3.8%"],
          ["Indicação afiliado", "1.840", "12.4%"],
          ["Newsletter Sequência", "2.640", "8.1%"],
          ["Google orgânico", "1.220", "2.1%"],
        ]}/>
      </div>
    </>
  );
}

function RProduto() {
  return (
    <>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 12, marginBottom: 22 }}>
        <KPI label="Produtos vendidos" value="6/7" sub="1 em rascunho" bg="var(--kp-pink)"/>
        <KPI label="Mais vendido" value="Mentoria" sub={brl(98400) + " · 82 vendas"} bg="var(--kp-green)"/>
        <KPI label="Maior ticket" value={brl(24000)} sub="Pacote enterprise" bg="var(--kp-cold)"/>
        <KPI label="Atrito médio (checkout)" value="38s" sub="−12s vs. mês anterior" trend="up"/>
      </div>

      <div className="kp-card" style={{ padding: 22, marginBottom: 22 }}>
        <SectLabel num="01" label="Performance por produto"/>
        <div style={{ display: "grid", gridTemplateColumns: "1fr auto auto auto auto", gap: 14, marginTop: 14 }}>
          {[
            { p: "Mentoria 1:1 mensal", v: 82, r: 98400, c: 5.2, w: 1 },
            { p: "Curso Sequência Viral", v: 67, r: 19430, c: 4.1, w: 0.82 },
            { p: "Setup IA personalizado", v: 12, r: 48000, c: 8.2, w: 0.62 },
            { p: "Bundle Curso + Mentoria", v: 21, r: 31290, c: 6.4, w: 0.42 },
            { p: "Plano anual Pro", v: 8, r: 96000, c: 12.1, w: 0.32 },
            { p: "Consultoria avulsa", v: 5, r: 4450, c: 2.8, w: 0.18 },
          ].map((row,i) => (
            <React.Fragment key={i}>
              <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
                <span style={{ fontSize: 13.5, fontWeight: 500, minWidth: 200 }}>{row.p}</span>
                <div style={{ flex: 1, height: 18, border: "1.5px solid var(--kp-ink)", background: "var(--kp-white)", position: "relative", maxWidth: 360 }}>
                  <div style={{ position: "absolute", inset: 0, right: ((1-row.w)*100)+"%", background: "var(--kp-pink)" }}/>
                </div>
              </div>
              <span className="kp-mono" style={{ fontSize: 10, letterSpacing: "0.14em" }}>{row.v} vendas</span>
              <span className="kp-display" style={{ fontSize: 18, fontStyle: "italic" }}>{brl(row.r)}</span>
              <span className="kp-mono" style={{ fontSize: 10, letterSpacing: "0.14em", color: "var(--kp-muted)" }}>conv {row.c}%</span>
              <button className="kp-btn kp-btn-sm">→</button>
            </React.Fragment>
          ))}
        </div>
      </div>

      <RTable title="Order bumps mais marcados" cols={["Bump", "Marcações", "Receita extra"]} rows={[
        ["Sessão de bônus extra", "47% (38/82)", brl(11020)],
        ["Acesso vitalício ao curso", "31% (25/82)", brl(12250)],
        ["Fast-track 7 dias", "22% (18/82)", brl(5400)],
        ["Stripe internacional", "8% (7/82)", brl(2100)],
      ]}/>
    </>
  );
}

function RCliente() {
  return (
    <>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(5,1fr)", gap: 12, marginBottom: 22 }}>
        <KPI label="Total clientes" value="247" sub="+34 últimos 90d" trend="up" pulse/>
        <KPI label="LTV médio" value={brl(2845)} sub="+R$320 vs. anterior" trend="up" bg="var(--kp-green)"/>
        <KPI label="CAC estimado" value={brl(180)} sub="LTV/CAC = 15.8x" bg="var(--kp-pink)"/>
        <KPI label="Recompra" value="42%" sub="comprou pelo menos 2x" bg="var(--kp-cold)"/>
        <KPI label="NPS" value="74" sub="Detratores 8% · Promotores 82%" bg="var(--kp-pink-soft)"/>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16, marginBottom: 22 }}>
        <div className="kp-card" style={{ padding: 22 }}>
          <SectLabel num="01" label="Distribuição geográfica"/>
          <div style={{ marginTop: 14, display: "flex", flexDirection: "column", gap: 8 }}>
            {[
              { c: "São Paulo · SP", n: 78, w: 1, color: "var(--kp-pink)" },
              { c: "Rio de Janeiro · RJ", n: 42, w: 0.54, color: "var(--kp-green)" },
              { c: "Belo Horizonte · MG", n: 28, w: 0.36, color: "var(--kp-cold)" },
              { c: "Curitiba · PR", n: 24, w: 0.31, color: "var(--kp-yellow)" },
              { c: "Florianópolis · SC", n: 22, w: 0.28, color: "var(--kp-pink-soft)" },
              { c: "Porto Alegre · RS", n: 19, w: 0.24, color: "var(--kp-warm)" },
              { c: "Outras", n: 34, w: 0.44, color: "var(--kp-soft)" },
            ].map((r,i) => (
              <div key={i} style={{ display: "flex", alignItems: "center", gap: 10, fontSize: 12.5 }}>
                <span style={{ minWidth: 160 }}>{r.c}</span>
                <div style={{ flex: 1, height: 14, border: "1.5px solid var(--kp-ink)", background: "var(--kp-white)", position: "relative" }}>
                  <div style={{ position: "absolute", inset: 0, right: ((1-r.w)*100)+"%", background: r.color }}/>
                </div>
                <span className="kp-mono" style={{ fontSize: 10, letterSpacing: "0.14em", minWidth: 30, textAlign: "right" }}>{r.n}</span>
              </div>
            ))}
          </div>
        </div>
        <div className="kp-card" style={{ padding: 22 }}>
          <SectLabel num="02" label="Recência (RFM simplificado)"/>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 8, marginTop: 14 }}>
            {[
              { l: "Recente", n: 82, d: "comprou ≤ 30 dias", c: "var(--kp-green)" },
              { l: "Frequente", n: 56, d: "≥ 3 compras", c: "var(--kp-pink)" },
              { l: "VIP", n: 18, d: "LTV > R$10k", c: "var(--kp-yellow)" },
              { l: "Em risco", n: 12, d: "sem compra > 60d", c: "var(--kp-warm)" },
              { l: "Perdido", n: 8, d: "sem compra > 180d", c: "var(--kp-soft)" },
              { l: "Novo", n: 71, d: "primeira compra ≤ 30d", c: "var(--kp-cold)" },
            ].map((s,i) => (
              <div key={i} style={{ padding: 14, background: s.c, border: "1.5px solid var(--kp-ink)", textAlign: "center" }}>
                <div className="kp-display" style={{ fontSize: 32, fontStyle: "italic", lineHeight: 1 }}>{s.n}</div>
                <div style={{ fontSize: 12, fontWeight: 500, marginTop: 4 }}>{s.l}</div>
                <div style={{ fontSize: 10, color: "var(--kp-muted)", marginTop: 2 }}>{s.d}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </>
  );
}

function RTrafego() {
  return (
    <>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(5,1fr)", gap: 12, marginBottom: 22 }}>
        <KPI label="Visitas únicas" value="18.420" sub="+24%" trend="up" bg="var(--kp-cold)"/>
        <KPI label="Page views" value="42.180" sub="2.3 por visita"/>
        <KPI label="Tempo médio" value="2:48" sub="checkout 1:12 · proposta 4:18"/>
        <KPI label="Bounce rate" value="38%" sub="-4% vs. anterior" trend="up" bg="var(--kp-green)"/>
        <KPI label="Mobile" value="68%" sub="iOS 42% · Android 26%" bg="var(--kp-pink-soft)"/>
      </div>

      <div className="kp-card" style={{ padding: 22, marginBottom: 22 }}>
        <SectLabel num="01" label="Visitas por dia"/>
        <BarChart data={[120,180,150,220,280,240,320,280,380,350,420,380,480,440,520,460,550,500,580,620,550,680,640,720,680,760,820,780,880,920]}/>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
        <RTable title="Top páginas" cols={["Página", "Views", "Tempo"]} rows={[
          ["/c/mentoria-mensal", "8.420", "1:12"],
          ["/p/proposta-marina", "2.180", "4:18"],
          ["/", "1.420", "0:42"],
          ["/c/curso-viral", "3.840", "1:28"],
          ["/portal", "892", "2:14"],
        ]}/>
        <RTable title="Devices & navegadores" cols={["Origem", "Visitas", "Conv."]} rows={[
          ["iOS · Safari", "5.840", "4.8%"],
          ["Mac · Chrome", "3.620", "5.2%"],
          ["Android · Chrome", "2.860", "3.4%"],
          ["Win · Chrome", "2.420", "3.9%"],
          ["Mac · Safari", "1.180", "5.6%"],
        ]}/>
      </div>
    </>
  );
}

function RFinanceiro() {
  return (
    <>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 12, marginBottom: 22 }}>
        <KPI label="Receita bruta 90d" value={brl(154200)} bg="var(--kp-pink)" pulse/>
        <KPI label="Taxas pagas" value={brl(2313)} sub="1.5% padrão Sequência" bg="var(--kp-soft)"/>
        <KPI label="Reembolsos" value={brl(2780)} sub="3 transações"/>
        <KPI label="Receita líquida" value={brl(149107)} bg="var(--kp-green)" trend="up"/>
      </div>

      <div className="kp-card" style={{ padding: 22, marginBottom: 22 }}>
        <SectLabel num="01" label="DRE simplificado"/>
        <div style={{ marginTop: 14 }}>
          {[
            { l: "Receita bruta", v: 154200, color: "var(--kp-pink)" },
            { l: "(−) Reembolsos", v: -2780, color: "#FF7A7A", indent: true },
            { l: "(−) Taxas Sequência (1.5%)", v: -2313, indent: true },
            { l: "(−) Taxas adquirente cartão (≈3.2%)", v: -1740, indent: true },
            { l: "(−) Comissões de afiliados", v: -15540, indent: true },
            { l: "= Receita líquida operacional", v: 131827, color: "var(--kp-green)", bold: true },
            { l: "(−) Impostos (Simples 6%)", v: -7910, indent: true },
            { l: "= Receita líquida final", v: 123917, color: "var(--kp-green-deep)", bold: true, big: true },
          ].map((r,i) => (
            <div key={i} style={{ display: "flex", justifyContent: "space-between", padding: r.bold ? "12px 14px" : "8px 14px", paddingLeft: r.indent ? 32 : 14, borderTop: r.bold ? "1.5px solid var(--kp-ink)" : "1px solid rgba(10,10,10,0.06)", background: r.bold ? (r.big ? "var(--kp-green)" : "var(--kp-soft)") : "transparent" }}>
              <span style={{ fontSize: r.big ? 15 : 13, fontWeight: r.bold ? 600 : 400, color: r.color || "var(--kp-ink)" }}>{r.l}</span>
              <span className="kp-display" style={{ fontSize: r.big ? 28 : r.bold ? 22 : 16, fontStyle: "italic", color: r.color || "var(--kp-ink)" }}>{brl(r.v)}</span>
            </div>
          ))}
        </div>
      </div>

      <div className="kp-card" style={{ padding: 22 }}>
        <SectLabel num="02" label="Pra contabilidade" tag="EXPORTÁVEL"/>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 10, marginTop: 12 }}>
          {[
            { l: "Notas fiscais (PDF)", n: "247 NFs", color: "var(--kp-cold)" },
            { l: "Razão de contas", n: "CSV completo", color: "var(--kp-pink-soft)" },
            { l: "DRE mensal", n: "PDF formatado", color: "var(--kp-green)" },
            { l: "Comprovantes PIX", n: "ZIP por mês", color: "var(--kp-yellow)" },
          ].map((e,i) => (
            <button key={i} className="kp-card" style={{ padding: 14, background: e.color, textAlign: "left", cursor: "pointer" }}>
              <div className="kp-display" style={{ fontSize: 18, lineHeight: 1.1 }}>{e.l}</div>
              <div className="kp-mono" style={{ fontSize: 9, letterSpacing: "0.16em", color: "var(--kp-muted)", marginTop: 6 }}>{e.n} · BAIXAR ↓</div>
            </button>
          ))}
        </div>
      </div>
    </>
  );
}

function Row({ l, v, pct, c }) {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 8, fontSize: 12.5 }}>
      <span style={{ width: 9, height: 9, background: c, border: "1.5px solid var(--kp-ink)" }}/>
      <span style={{ flex: 1 }}>{l}</span>
      <span className="kp-mono" style={{ fontSize: 10, letterSpacing: "0.14em" }}>{v}</span>
      <span className="kp-mono" style={{ fontSize: 10, letterSpacing: "0.14em", color: "var(--kp-muted)", minWidth: 36, textAlign: "right" }}>{pct}</span>
    </div>
  );
}

function RTable({ title, cols, rows }) {
  return (
    <div className="kp-card" style={{ padding: 0 }}>
      <div style={{ padding: "12px 18px", borderBottom: "1.5px solid var(--kp-ink)" }}>
        <span className="kp-mono" style={{ fontSize: 9.5, letterSpacing: "0.2em", color: "var(--kp-muted)" }}>{title.toUpperCase()}</span>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "1.6fr 1fr 1fr", padding: "10px 18px", borderBottom: "1.5px solid var(--kp-ink)", background: "var(--kp-soft)", fontFamily: "var(--kp-mono)", fontSize: 9, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--kp-muted)" }}>
        {cols.map((c,i) => <span key={i}>{c}</span>)}
      </div>
      {rows.map((r,i) => (
        <div key={i} style={{ display: "grid", gridTemplateColumns: "1.6fr 1fr 1fr", padding: "11px 18px", borderBottom: i === rows.length-1 ? "none" : "1px solid rgba(10,10,10,0.08)", background: i % 2 === 1 ? "var(--kp-soft)" : "var(--kp-white)" }}>
          <span style={{ fontSize: 13, fontWeight: 500 }}>{r[0]}</span>
          <span className="kp-mono" style={{ fontSize: 10.5, letterSpacing: "0.14em" }}>{r[1]}</span>
          <span className="kp-display" style={{ fontSize: 16, fontStyle: "italic" }}>{r[2]}</span>
        </div>
      ))}
    </div>
  );
}

window.SEQ_RELATORIOS = Relatorios;