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

const AFILIADOS_FALLBACK = [
  { id: "a1", nome: "Marina V.", empresa: "Studio Verbete", clicks: 842, vendas: 14, comissao: 4690, taxa: 0.30, color: "var(--kp-pink)", status: "ativo" },
  { id: "a2", nome: "Café Sapatão", empresa: "Café Sapatão", clicks: 412, vendas: 8, comissao: 2640, taxa: 0.30, color: "var(--kp-green)", status: "ativo" },
];

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

function transformAffiliate(row, i) {
  return {
    id: row.id,
    nome: row.name,
    empresa: row.company || "—",
    clicks: row.clickCount ?? 0,
    vendas: row.salesCount ?? 0,
    comissao: (row.totalCommission ?? 0) / 100,
    taxa: parseFloat(row.commissionRate) || 0.30,
    color: AFF_COLORS[i % AFF_COLORS.length],
    status: row.status === "active" ? "ativo" : row.status === "pending" ? "pendente" : row.status,
  };
}

function Afiliados() {
  const [tab, setTab] = React.useState("afiliados");
  const [AFILIADOS, setItems] = React.useState(AFILIADOS_FALLBACK);
  React.useEffect(() => {
    window.SEQ_API.listAffiliates()
      .then(d => {
        if (d.affiliates?.length) setItems(d.affiliates.map(transformAffiliate));
      })
      .catch(() => {});
  }, []);
  const totalCommission = AFILIADOS.reduce((s,a)=>s+a.comissao,0);
  const totalSales = AFILIADOS.reduce((s,a)=>s+a.vendas,0);

  return (
    <div style={{ minHeight: "100vh", background: "var(--kp-paper)" }}>
      <PageHead num="14" label="PARCERIAS · AFILIADOS" title="Quem vende" em="por você."
        actions={(<>
          <button className="kp-btn kp-btn-sm">Exportar</button>
          <button className="kp-btn kp-btn-sm">Pagar comissões</button>
          <button className="kp-btn kp-btn-sm kp-btn-ink">+ Convidar afiliado</button>
        </>)}
      />
      <div style={{ maxWidth: 1320, margin: "0 auto", padding: "28px 28px 80px" }}>
        {/* Tabs */}
        <div style={{ display: "flex", gap: 4, marginBottom: 22, borderBottom: "1.5px solid var(--kp-ink)" }}>
          {[
            { id: "afiliados", l: "Afiliados" },
            { id: "comissoes", l: "Comissões" },
            { id: "links", l: "Links & materiais" },
            { id: "config", l: "Configuração" },
          ].map(t => (
            <button key={t.id} onClick={()=>setTab(t.id)} style={{
              padding: "10px 18px", border: "1.5px solid var(--kp-ink)", borderBottom: tab === t.id ? "none" : "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 === "afiliados" && (
          <>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 16, marginBottom: 22 }}>
              <KPI label="Afiliados ativos" value="4" sub="1 pendente · 12 convidados" pulse/>
              <KPI label="Comissões 30d" value={brl(totalCommission)} sub={`${totalSales} vendas atribuídas`} bg="var(--kp-pink)" trend="up"/>
              <KPI label="Receita atribuída" value={brl(totalCommission/0.3)} sub="29% da receita total" bg="var(--kp-green)"/>
              <KPI label="EPC médio" value={brl(6.27)} sub="ganho por click médio" bg="var(--kp-cold)"/>
            </div>

            <div className="kp-card" style={{ padding: 22, marginBottom: 22 }}>
              <div className="kp-mono" style={{ fontSize: 9.5, letterSpacing: "0.2em", color: "var(--kp-muted)" }}>VENDAS DE AFILIADOS · 30D</div>
              <AreaChart data={[2,4,3,6,8,5,7,9,12,8,10,14,11,13,16,18,15,12,17,14,18,22,19,16,21,24,20,18,26,28]} color="var(--kp-pink)"/>
            </div>

            <div className="kp-card" style={{ padding: 0 }}>
              <div style={{ display: "grid", gridTemplateColumns: "auto 1.5fr 1fr 1fr 1fr 1fr 1fr auto", 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>Afiliado</div><div>Clicks</div><div>Vendas</div><div>Conv.</div><div>Comissão</div><div>Status</div><div></div>
              </div>
              {AFILIADOS.map((a,i) => {
                const conv = a.clicks > 0 ? ((a.vendas/a.clicks)*100).toFixed(1) : "0.0";
                return (
                  <div key={a.id} style={{ display: "grid", gridTemplateColumns: "auto 1.5fr 1fr 1fr 1fr 1fr 1fr auto", gap: 12, padding: "13px 18px", alignItems: "center", borderBottom: i === AFILIADOS.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}/>
                    <div>
                      <div style={{ fontSize: 13.5, fontWeight: 500 }}>{a.nome}</div>
                      <div style={{ fontSize: 11, color: "var(--kp-muted)", fontFamily: "var(--kp-mono)" }}>{a.empresa}</div>
                    </div>
                    <span className="kp-mono" style={{ fontSize: 11, letterSpacing: "0.14em" }}>{a.clicks}</span>
                    <span className="kp-mono" style={{ fontSize: 11, letterSpacing: "0.14em" }}>{a.vendas}</span>
                    <span className="kp-mono" style={{ fontSize: 11, letterSpacing: "0.14em", color: parseFloat(conv) > 1 ? "var(--kp-pink)" : "var(--kp-muted)" }}>{conv}%</span>
                    <span className="kp-display" style={{ fontSize: 18, fontStyle: "italic" }}>{brl(a.comissao)}</span>
                    <Pill bg={a.status === "ativo" ? "var(--kp-green)" : "var(--kp-soft)"}>{a.status}</Pill>
                    <button className="kp-btn kp-btn-sm">···</button>
                  </div>
                );
              })}
            </div>
          </>
        )}

        {tab === "comissoes" && (
          <div className="kp-card" style={{ padding: 0 }}>
            <div style={{ padding: "14px 18px", borderBottom: "1.5px solid var(--kp-ink)", display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
              <span className="kp-mono" style={{ fontSize: 9.5, letterSpacing: "0.2em", color: "var(--kp-muted)" }}>COMISSÕES A PAGAR</span>
              <span style={{ fontSize: 13 }}>Total: <strong className="kp-display" style={{ fontStyle: "italic", fontSize: 22 }}>{brl(totalCommission)}</strong></span>
            </div>
            {AFILIADOS.filter(a=>a.comissao>0).map((a,i,arr) => (
              <div key={a.id} style={{ display: "grid", gridTemplateColumns: "auto 1.5fr 1fr 1fr auto", gap: 14, padding: "14px 18px", alignItems: "center", borderBottom: i === arr.length-1 ? "none" : "1px solid rgba(10,10,10,0.08)" }}>
                <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 className="kp-mono" style={{ fontSize: 10, letterSpacing: "0.14em", color: "var(--kp-muted)" }}>{a.vendas} vendas</span>
                <span className="kp-display" style={{ fontSize: 22, fontStyle: "italic" }}>{brl(a.comissao)}</span>
                <button className="kp-btn kp-btn-sm kp-btn-ink">Pagar PIX</button>
              </div>
            ))}
          </div>
        )}

        {tab === "links" && (
          <div className="kp-card" style={{ padding: 22 }}>
            <div className="kp-mono" style={{ fontSize: 9.5, letterSpacing: "0.2em", color: "var(--kp-muted)" }}>LINK DE AFILIADO PADRÃO</div>
            <div style={{ marginTop: 6, padding: 12, background: "var(--kp-soft)", border: "1.5px solid var(--kp-ink)", display: "flex", alignItems: "center", gap: 8, fontFamily: "var(--kp-mono)", fontSize: 12 }}>
              <span style={{ flex: 1, color: "var(--kp-pink)" }}>sequencia.app/c/mentoria-mensal?aff=&#123;CODIGO&#125;</span>
              <button className="kp-btn kp-btn-sm">Copiar</button>
            </div>
            <div className="kp-mono" style={{ fontSize: 9.5, letterSpacing: "0.2em", color: "var(--kp-muted)", marginTop: 18 }}>MATERIAIS PRONTOS</div>
            <div style={{ marginTop: 8, display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 10 }}>
              {[
                { t: "Banner 1080×1350", c: "Para Instagram feed", color: "var(--kp-pink-soft)" },
                { t: "Story 1080×1920", c: "9:16 vertical", color: "var(--kp-green)" },
                { t: "Email template", c: "HTML pronto pra colar", color: "var(--kp-cold)" },
                { t: "Vídeo demo 60s", c: "MP4 + Reels-ready", color: "var(--kp-yellow)" },
                { t: "Print de prova", c: "Resultados reais", color: "var(--kp-pink)" },
                { t: "Twitter thread base", c: "10 tweets prontos", color: "var(--kp-soft)" },
              ].map((m,i) => (
                <div key={i} className="kp-card" style={{ padding: 0, overflow: "hidden" }}>
                  <div style={{ background: m.color, height: 90, borderBottom: "1.5px solid var(--kp-ink)" }}/>
                  <div style={{ padding: 12 }}>
                    <div style={{ fontSize: 13, fontWeight: 500 }}>{m.t}</div>
                    <div className="kp-mono" style={{ fontSize: 9, letterSpacing: "0.14em", color: "var(--kp-muted)", marginTop: 2 }}>{m.c}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        )}

        {tab === "config" && (
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
            <div className="kp-card" style={{ padding: 22 }}>
              <div className="kp-mono" style={{ fontSize: 9.5, letterSpacing: "0.2em", color: "var(--kp-muted)" }}>COMISSÃO PADRÃO</div>
              <div style={{ marginTop: 14, display: "flex", alignItems: "baseline", gap: 8 }}>
                <input className="kp-input" defaultValue="30" type="number" style={{ fontSize: 32, fontFamily: "var(--kp-display)", fontStyle: "italic", padding: 14, width: 120 }}/>
                <span className="kp-display" style={{ fontSize: 32 }}>%</span>
              </div>
              <div style={{ fontSize: 12, color: "var(--kp-muted)", marginTop: 6 }}>Aplicada a todos os novos afiliados. Você pode customizar individualmente.</div>
            </div>
            <div className="kp-card" style={{ padding: 22 }}>
              <div className="kp-mono" style={{ fontSize: 9.5, letterSpacing: "0.2em", color: "var(--kp-muted)" }}>REGRAS</div>
              <div style={{ marginTop: 14, display: "flex", flexDirection: "column", gap: 10, fontSize: 13 }}>
                <Rule on l="Cookie de 60 dias"/>
                <Rule on l="Pagar comissão só após período de garantia"/>
                <Rule l="Permitir auto-afiliação (cliente que vira afiliado)"/>
                <Rule on l="Notificar afiliado a cada venda"/>
                <Rule l="Permitir cupons exclusivos por afiliado"/>
              </div>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

function Rule({ on, l }) {
  const [v, setV] = React.useState(!!on);
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
      <button onClick={()=>setV(!v)} style={{
        width: 38, height: 22, padding: 0, border: "1.5px solid var(--kp-ink)",
        background: v ? "var(--kp-green)" : "var(--kp-white)", cursor: "pointer", position: "relative",
      }}>
        <span style={{ position: "absolute", top: 1, left: v ? 18 : 1, width: 16, height: 16, background: "var(--kp-ink)", transition: "left .15s" }}/>
      </button>
      <span style={{ flex: 1 }}>{l}</span>
    </div>
  );
}

window.SEQ_AFILIADOS = Afiliados;