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

const ASSINANTES_FALLBACK = [
  { id: "a1", nome: "Café Sapatão", plano: "Mentoria mensal", valor: 1490, status: "ativo", desde: "8mo", proxima: "10 mai", mrr: 1490, color: "var(--kp-green)" },
  { id: "a2", nome: "Lemos Saúde", plano: "Plano anual Pro", valor: 1800, status: "ativo", desde: "11mo", proxima: "12 mai", mrr: 1800, color: "var(--kp-cold)" },
  { id: "a3", nome: "Pet Hub", plano: "Bundle: Curso + Mentoria", valor: 2200, status: "ativo", desde: "5mo", proxima: "15 mai", mrr: 2200, color: "var(--kp-pink)" },
];

const SUB_COLORS = ["var(--kp-green)", "var(--kp-cold)", "var(--kp-pink)", "var(--kp-warm)", "var(--kp-yellow)", "var(--kp-soft)"];

function transformSub(row, i) {
  const sub = row.subscription || row;
  const client = row.client;
  const product = row.product;
  const sinceMs = sub.createdAt ? Date.now() - new Date(sub.createdAt).getTime() : 0;
  const months = Math.max(1, Math.round(sinceMs / (1000 * 60 * 60 * 24 * 30)));
  const next = sub.nextChargeDate ? new Date(sub.nextChargeDate).toLocaleDateString("pt-BR", { day: "2-digit", month: "short" }) : "—";
  return {
    id: sub.id,
    nome: client?.name || "—",
    plano: product?.name || "Assinatura",
    valor: (sub.amount ?? 0) / 100,
    status: sub.status === "active" ? "ativo" : sub.status === "past_due" ? "atrasado" : sub.status === "canceled" ? "cancelado" : sub.status,
    desde: `${months}mo`,
    proxima: next,
    mrr: sub.status === "canceled" ? 0 : (sub.amount ?? 0) / 100,
    color: SUB_COLORS[i % SUB_COLORS.length],
  };
}

function Assinantes() {
  const [ASSINANTES, setItems] = React.useState(ASSINANTES_FALLBACK);
  React.useEffect(() => {
    window.SEQ_API.listSubscriptions()
      .then(d => {
        if (d.subscriptions?.length) setItems(d.subscriptions.map(transformSub));
      })
      .catch(() => {});
  }, []);
  const ativos = ASSINANTES.filter(a => a.status === "ativo").length;
  const mrr = ASSINANTES.reduce((s,a)=>s+a.mrr,0);

  return (
    <div style={{ minHeight: "100vh", background: "var(--kp-paper)" }}>
      <PageHead num="10" label="ASSINATURAS" title="Quem te paga" em="todo mês."
        actions={(<>
          <button className="kp-btn kp-btn-sm">Cohort</button>
          <button className="kp-btn kp-btn-sm">Exportar</button>
          <button className="kp-btn kp-btn-sm kp-btn-ink">+ Novo plano</button>
        </>)}
      />
      <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="MRR" value={brl(mrr)} sub="+R$840 últimos 30d" trend="up" bg="var(--kp-pink)" pulse dotColor="var(--kp-ink)"/>
          <KPI label="Assinantes ativos" value={ativos} sub="+2 vs. mês anterior" trend="up"/>
          <KPI label="Churn 30d" value="3.2%" sub="-0.8 p.p. vs. anterior" trend="up" bg="var(--kp-green)"/>
          <KPI label="LTV médio" value={brl(18450)} sub="ARPU R$1.385 · 13.3 meses" bg="var(--kp-cold)"/>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "1.5fr 1fr", gap: 16, marginBottom: 22 }}>
          <div className="kp-card" style={{ padding: 22 }}>
            <div className="kp-mono" style={{ fontSize: 9.5, letterSpacing: "0.2em", color: "var(--kp-muted)" }}>EVOLUÇÃO DO MRR · 12 MESES</div>
            <AreaChart data={[2400, 3100, 4200, 5800, 7400, 8900, 10200, 12100, 13800, 15400, 16800, 18420]} color="var(--kp-pink)"/>
          </div>
          <div className="kp-card" style={{ padding: 22 }}>
            <div className="kp-mono" style={{ fontSize: 9.5, letterSpacing: "0.2em", color: "var(--kp-muted)" }}>COHORT DE RETENÇÃO</div>
            <div style={{ marginTop: 14, display: "grid", gridTemplateColumns: "auto repeat(6,1fr)", gap: 4, fontFamily: "var(--kp-mono)", fontSize: 9 }}>
              <span></span><span style={{ color: "var(--kp-muted)" }}>M0</span><span style={{ color: "var(--kp-muted)" }}>M1</span><span style={{ color: "var(--kp-muted)" }}>M2</span><span style={{ color: "var(--kp-muted)" }}>M3</span><span style={{ color: "var(--kp-muted)" }}>M6</span><span style={{ color: "var(--kp-muted)" }}>M12</span>
              {[
                ["JAN", 100, 92, 88, 84, 78, 72],
                ["FEV", 100, 95, 90, 86, 80, 74],
                ["MAR", 100, 91, 85, 82, 77, null],
                ["ABR", 100, 94, 89, 85, null, null],
                ["MAI", 100, 96, 92, null, null, null],
              ].map((row,r) => (
                <React.Fragment key={r}>
                  <span style={{ color: "var(--kp-ink)", padding: "6px 0" }}>{row[0]}</span>
                  {row.slice(1).map((v,i) => (
                    <span key={i} style={{
                      padding: "6px 0", textAlign: "center",
                      background: v == null ? "transparent" : `oklch(0.85 0.13 ${360 - v*1.5} / ${v == null ? 0 : v/100})`,
                      border: v != null ? "1px solid rgba(10,10,10,0.1)" : "none",
                      color: v != null && v < 80 ? "var(--kp-paper)" : "var(--kp-ink)",
                    }}>{v != null ? v + "%" : ""}</span>
                  ))}
                </React.Fragment>
              ))}
            </div>
          </div>
        </div>

        <div className="kp-card" style={{ padding: 0 }}>
          <div style={{ display: "grid", gridTemplateColumns: "auto 1.6fr 1.4fr 1fr 1fr 1fr 1fr", padding: "12px 18px", borderBottom: "1.5px solid var(--kp-ink)", background: "var(--kp-soft)", fontFamily: "var(--kp-mono)", fontSize: 9, letterSpacing: "0.2em", textTransform: "uppercase", color: "var(--kp-muted)", gap: 12 }}>
            <div></div><div>Cliente</div><div>Plano</div><div>MRR</div><div>Desde</div><div>Próxima</div><div>Status</div>
          </div>
          {ASSINANTES.map((a,i) => (
            <div key={a.id} style={{ display: "grid", gridTemplateColumns: "auto 1.6fr 1.4fr 1fr 1fr 1fr 1fr", gap: 12, padding: "13px 18px", alignItems: "center", borderBottom: i === ASSINANTES.length-1 ? "none" : "1px solid rgba(10,10,10,0.08)", background: i % 2 === 1 ? "var(--kp-soft)" : "var(--kp-white)" }}>
              <Avatar initials={a.nome.split(" ").map(s=>s[0]).slice(0,2).join("")} size={32} bg={a.color}/>
              <span style={{ fontSize: 13.5, fontWeight: 500 }}>{a.nome}</span>
              <span style={{ fontSize: 12.5, color: "var(--kp-muted)" }}>{a.plano}</span>
              <span className="kp-display" style={{ fontSize: 18, fontStyle: "italic" }}>{brl(a.mrr)}</span>
              <span className="kp-mono" style={{ fontSize: 10, letterSpacing: "0.14em", color: "var(--kp-muted)" }}>{a.desde}</span>
              <span className="kp-mono" style={{ fontSize: 10, letterSpacing: "0.14em" }}>{a.proxima}</span>
              <Pill bg={a.status === "ativo" ? "var(--kp-green)" : a.status === "atrasado" ? "#FFB5B5" : "var(--kp-soft)"}>{a.status}</Pill>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

window.SEQ_ASSINANTES = Assinantes;