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

function Home() {
  const [stats, setStats] = React.useState(null);
  const [proposals, setProposals] = React.useState([]);
  React.useEffect(() => {
    Promise.allSettled([
      window.SEQ_API.stats(),
      window.SEQ_API.listProposals(),
    ]).then(([s, p]) => {
      if (s.status === "fulfilled") setStats(s.value);
      if (p.status === "fulfilled") setProposals(p.value.proposals || []);
    });
  }, []);

  const recebidoMes = stats ? (stats.receivedThisMonth ?? 0) / 100 : 0;
  const totalRecebido = stats ? (stats.totalPaid ?? 0) / 100 : 0;
  const totalFaturado = stats ? (stats.totalInvoiced ?? 0) / 100 : 0;
  const aceitas = proposals.filter(p => p.status === "accepted").length;
  const total = proposals.length;
  const taxaAceite = total ? Math.round((aceitas / total) * 100) : 0;

  return (
    <div style={{ minHeight: "100vh", background: "var(--kp-paper)" }}>
      <PageHead
        num="01"
        label="VISÃO GERAL · 30 DIAS"
        title="Bom dia,"
        em="Kaleidos."
        actions={(<>
          <button className="kp-btn kp-btn-sm">Exportar</button>
          <a href="#/editor" className="kp-btn kp-btn-sm kp-btn-ink">+ Nova proposta</a>
        </>)}
      />

      <div style={{ maxWidth: 1320, margin: "0 auto", padding: "28px 28px 80px" }}>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 16, marginBottom: 22 }}>
          <KPI label="Recebido este mês" value={brl(recebidoMes)} sub="entradas com data no mês" trend="up" bg="var(--kp-green)" pulse/>
          <KPI label="Total recebido" value={brl(totalRecebido)} sub={`${stats ? Math.round((stats.totalPaid / Math.max(stats.totalInvoiced, 1)) * 100) : 0}% do faturado`} trend="up"/>
          <KPI label="Faturado total" value={brl(totalFaturado)} sub={`${stats?.pendingCount ?? 0} pendentes · ${stats?.overdueCount ?? 0} vencidas`} bg="var(--kp-cold)"/>
          <KPI label="Propostas aceitas" value={`${aceitas}/${total || "—"}`} sub={`taxa ${taxaAceite}% · meta 60%`} bg="var(--kp-pink-soft)"/>
        </div>

        {/* Receita + Funil */}
        <div style={{ display: "grid", gridTemplateColumns: "1.55fr 1fr", gap: 16, marginBottom: 22 }}>
          <div className="kp-card" style={{ padding: 22 }}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", flexWrap: "wrap", gap: 8 }}>
              <div>
                <div className="kp-mono" style={{ fontSize: 9.5, letterSpacing: "0.2em", color: "var(--kp-muted)" }}>RECEITA · 30 DIAS</div>
                <div className="kp-display" style={{ fontSize: 40, fontStyle: "italic", lineHeight: 1, marginTop: 6 }}>{brl(54390)}</div>
                <div style={{ fontSize: 12, color: "var(--kp-muted)", marginTop: 4 }}>média {brl(1813)}/dia · pico em 18 abr</div>
              </div>
              <div style={{ display: "flex", gap: 6 }}>
                {["7D","30D","90D","ANO"].map((p,i) => (
                  <button key={p} className="kp-btn kp-btn-sm" style={{ background: i === 1 ? "var(--kp-ink)" : "var(--kp-white)", color: i === 1 ? "var(--kp-paper)" : "var(--kp-ink)" }}>{p}</button>
                ))}
              </div>
            </div>
            <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]}/>
          </div>

          <div className="kp-card" style={{ padding: 22 }}>
            <div className="kp-mono" style={{ fontSize: 9.5, letterSpacing: "0.2em", color: "var(--kp-muted)" }}>FUNIL · ÚLTIMOS 30D</div>
            <div style={{ marginTop: 14 }}>
              {[
                { l: "Visitaram checkout", n: 1842, p: 1.0, c: "var(--kp-cold)" },
                { l: "Iniciaram pagamento", n: 712, p: 0.39, c: "var(--kp-warm)" },
                { l: "Confirmaram", n: 274, p: 0.149, c: "var(--kp-green)" },
                { l: "Após 7 dias (saldo)", n: 268, p: 0.146, c: "var(--kp-pink)" },
              ].map((s,i) => (
                <div key={i} style={{ marginBottom: 12 }}>
                  <div style={{ display: "flex", justifyContent: "space-between", fontSize: 12.5, marginBottom: 4 }}>
                    <span>{s.l}</span>
                    <span className="kp-mono" style={{ fontSize: 10, letterSpacing: "0.14em" }}>{s.n.toLocaleString("pt-BR")} · {Math.round(s.p*100)}%</span>
                  </div>
                  <div style={{ height: 12, border: "1.5px solid var(--kp-ink)", background: "var(--kp-white)", position: "relative" }}>
                    <div style={{ position: "absolute", inset: 0, right: ((1-s.p)*100)+"%", background: s.c }}/>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* Live + composition + actions */}
        <div style={{ display: "grid", gridTemplateColumns: "1.2fr 1fr 1fr", gap: 16, marginBottom: 22 }}>
          {/* Live activity */}
          <div className="kp-card" style={{ padding: 22, background: "var(--kp-ink)", color: "var(--kp-paper)" }}>
            <div className="kp-mono" style={{ fontSize: 9.5, letterSpacing: "0.2em", color: "var(--kp-faint)", display: "flex", alignItems: "center", gap: 6 }}>
              <span className="kp-dot"/> AO VIVO · ÚLTIMOS 5 MIN
            </div>
            <div style={{ marginTop: 14, display: "flex", flexDirection: "column", gap: 10 }}>
              {[
                { who: "Marina V.", what: "abriu sua proposta #0042", when: "há 12s", c: "var(--kp-green)" },
                { who: "Pet Hub", what: "renovou assinatura · R$ 2.200", when: "há 1min", c: "var(--kp-pink)" },
                { who: "Lucas H.", what: "iniciou checkout · Mira AI", when: "há 2min", c: "var(--kp-cold)" },
                { who: "Ana V.", what: "leu proposta por 18min · 92% lida", when: "há 3min", c: "var(--kp-yellow)" },
              ].map((e,i) => (
                <div key={i} style={{ display: "grid", gridTemplateColumns: "auto 1fr auto", gap: 12, alignItems: "center", padding: "8px 0", borderBottom: i === 3 ? "none" : "1px solid rgba(247,241,232,0.1)" }}>
                  <span style={{ width: 8, height: 8, borderRadius: "50%", background: e.c }}/>
                  <div style={{ fontSize: 13, lineHeight: 1.3 }}>
                    <span style={{ fontWeight: 600 }}>{e.who}</span> <span style={{ color: "rgba(247,241,232,0.65)" }}>{e.what}</span>
                  </div>
                  <span className="kp-mono" style={{ fontSize: 9, letterSpacing: "0.14em", color: "var(--kp-faint)" }}>{e.when}</span>
                </div>
              ))}
            </div>
          </div>

          {/* Receita por categoria */}
          <div className="kp-card" style={{ padding: 22 }}>
            <div className="kp-mono" style={{ fontSize: 9.5, letterSpacing: "0.2em", color: "var(--kp-muted)" }}>RECEITA POR FONTE</div>
            <div style={{ marginTop: 14, display: "flex", alignItems: "center", gap: 18 }}>
              <Donut value={0.58} color="var(--kp-pink)" label="ASSINATURAS"/>
              <div style={{ flex: 1, display: "flex", flexDirection: "column", gap: 8 }}>
                <SrcRow l="Assinaturas" v={brl(31550)} c="var(--kp-pink)"/>
                <SrcRow l="Propostas" v={brl(15240)} c="var(--kp-green)"/>
                <SrcRow l="Checkouts" v={brl(7600)} c="var(--kp-cold)"/>
              </div>
            </div>
          </div>

          {/* Quick actions */}
          <div className="kp-card kp-card-soft" style={{ padding: 22 }}>
            <div className="kp-mono" style={{ fontSize: 9.5, letterSpacing: "0.2em", color: "var(--kp-muted)" }}>AÇÕES RÁPIDAS</div>
            <div style={{ marginTop: 12, display: "flex", flexDirection: "column", gap: 8 }}>
              <a href="#/editor" className="kp-btn" style={{ width: "100%", justifyContent: "flex-start" }}>+ Nova proposta</a>
              <a href="#/checkout-builder" className="kp-btn" style={{ width: "100%", justifyContent: "flex-start" }}>+ Link de pagamento</a>
              <a href="#/produtos" className="kp-btn" style={{ width: "100%", justifyContent: "flex-start" }}>+ Novo produto</a>
              <a href="#/saldo" className="kp-btn kp-btn-green" style={{ width: "100%", justifyContent: "flex-start" }}>↓ Sacar saldo</a>
            </div>
          </div>
        </div>

        {/* Bottom: Top produtos + Próximas cobranças */}
        <div style={{ display: "grid", gridTemplateColumns: "1.3fr 1fr", gap: 16 }}>
          <div className="kp-card" style={{ padding: 0 }}>
            <div style={{ padding: "14px 18px", borderBottom: "1.5px solid var(--kp-ink)", display: "flex", justifyContent: "space-between" }}>
              <span className="kp-mono" style={{ fontSize: 9.5, letterSpacing: "0.2em", color: "var(--kp-muted)" }}>TOP PRODUTOS · 30D</span>
              <a href="#/produtos" className="kp-mono" style={{ fontSize: 9.5, letterSpacing: "0.18em", color: "var(--kp-muted)" }}>Ver todos →</a>
            </div>
            {[
              { n: "Mentoria 1:1 mensal", c: 18, v: 31600, t: "ASSINATURA", color: "var(--kp-pink)" },
              { n: "Setup IA personalizado", c: 7, v: 28000, t: "PROPOSTA", color: "var(--kp-green)" },
              { n: "Curso Sequência Viral", c: 42, v: 12180, t: "INFOPRODUTO", color: "var(--kp-cold)" },
              { n: "Consultoria avulsa", c: 5, v: 8900, t: "AVULSO", color: "var(--kp-warm)" },
            ].map((p,i,a) => (
              <div key={i} style={{
                display: "grid", gridTemplateColumns: "auto 1fr auto auto", gap: 14, alignItems: "center",
                padding: "14px 18px", borderBottom: i === a.length-1 ? "none" : "1px solid rgba(10,10,10,0.08)",
                background: i % 2 === 1 ? "var(--kp-soft)" : "var(--kp-white)",
              }}>
                <span style={{ width: 28, height: 28, background: p.color, border: "1.5px solid var(--kp-ink)", display: "inline-flex", alignItems: "center", justifyContent: "center", fontFamily: "var(--kp-display)", fontStyle: "italic", fontSize: 13 }}>{i+1}</span>
                <div>
                  <div style={{ fontSize: 14, fontWeight: 500 }}>{p.n}</div>
                  <Pill bg={p.color}>{p.t}</Pill>
                </div>
                <span className="kp-mono" style={{ fontSize: 10, letterSpacing: "0.14em", color: "var(--kp-muted)" }}>{p.c} VENDAS</span>
                <span className="kp-display" style={{ fontSize: 22, fontStyle: "italic" }}>{brl(p.v)}</span>
              </div>
            ))}
          </div>

          <div className="kp-card" style={{ padding: 0 }}>
            <div style={{ padding: "14px 18px", borderBottom: "1.5px solid var(--kp-ink)" }}>
              <span className="kp-mono" style={{ fontSize: 9.5, letterSpacing: "0.2em", color: "var(--kp-muted)" }}>PRÓXIMAS COBRANÇAS · 7D</span>
            </div>
            {[
              { c: "Café Sapatão", v: 1490, d: "10 mai · 03d", m: "Cartão" },
              { c: "Lemos Saúde", v: 1800, d: "12 mai · 05d", m: "PIX" },
              { c: "Pet Hub", v: 2200, d: "15 mai · 08d", m: "Boleto" },
              { c: "Tórtola", v: 800, d: "20 mai · 13d", m: "Cartão" },
            ].map((r,i,a) => (
              <div key={i} style={{ padding: "14px 18px", display: "flex", justifyContent: "space-between", alignItems: "center", borderBottom: i === a.length-1 ? "none" : "1px solid rgba(10,10,10,0.08)" }}>
                <div>
                  <div style={{ fontSize: 13, fontWeight: 500 }}>{r.c}</div>
                  <div className="kp-mono" style={{ fontSize: 9, letterSpacing: "0.14em", color: "var(--kp-muted)", marginTop: 2 }}>{r.d} · {r.m}</div>
                </div>
                <span className="kp-display" style={{ fontSize: 22, fontStyle: "italic" }}>{brl(r.v)}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

function SrcRow({ l, v, 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>
    </div>
  );
}

window.SEQ_HOME = Home;