// ===== Billing · plano, faturas, métodos, uso, trocar plano =====

const BILLING_TABS = [
  { id: "plano",   n: "Plano atual" },
  { id: "uso",     n: "Uso e limites" },
  { id: "faturas", n: "Faturas" },
  { id: "metodos", n: "Métodos de pagamento" },
  { id: "trocar",  n: "Mudar de plano" },
];

const FATURAS = [
  { id: "INV-2026-05-0247", data: "01 mai 2026", val: 1490, status: "pago",   metodo: "Cartão · final 4421" },
  { id: "INV-2026-04-0184", data: "01 abr 2026", val: 1490, status: "pago",   metodo: "Cartão · final 4421" },
  { id: "INV-2026-03-0091", data: "01 mar 2026", val: 1490, status: "pago",   metodo: "Pix" },
  { id: "INV-2026-02-0034", data: "01 fev 2026", val: 1490, status: "pago",   metodo: "Pix" },
  { id: "INV-2026-01-0017", data: "01 jan 2026", val:  990, status: "pago",   metodo: "Boleto" },
  { id: "INV-2025-12-9842", data: "01 dez 2025", val:  990, status: "pago",   metodo: "Boleto" },
  { id: "INV-2025-11-9710", data: "01 nov 2025", val:  990, status: "estornado", metodo: "Cartão · final 0091" },
  { id: "INV-2025-10-9601", data: "01 out 2025", val:  990, status: "pago",   metodo: "Cartão · final 0091" },
];

const USAGE = [
  { k: "Editais analisados",      cur:  87, max:   "ilimitado", unit: "editais/mês",   color: "verdict-go" },
  { k: "Peças geradas",            cur:  14, max:  30,           unit: "peças/mês",     color: "verdict-go" },
  { k: "Pregões acompanhados",    cur:   6, max:  10,           unit: "pregões/mês",   color: "verdict-go" },
  { k: "Tokens de IA · custo",     cur:  ".",max:   ".",         unit: "US$ 47,12 no mês", color: "verdict-caution", custom: "+18% vs mês passado" },
  { k: "Usuários ativos",          cur:   5, max:  10,           unit: "pessoas",       color: "verdict-go" },
  { k: "Documentos no cofre",      cur:  31, max:   "ilimitado", unit: "arquivos",      color: "verdict-go" },
];

function PlanoAtual() {
  return (
    <div className="grid lg:grid-cols-3 gap-6">
      <section className="lg:col-span-2 rounded-2xl bg-pleita-ink text-pleita-paper overflow-hidden">
        <div className="p-6 md:p-8">
          <div className="flex items-start justify-between flex-wrap gap-4">
            <div>
              <div className="pl-num text-[10px] uppercase tracking-[0.18em] text-pleita-paper/60 mb-2">Você está no plano</div>
              <div className="font-display text-5xl">Veterano<span className="text-pleita-lime">.</span></div>
              <p className="text-sm text-pleita-paper/70 mt-3 max-w-md leading-relaxed">
                Para empresas que vencem 3+ contratos por mês. Inclui pregão automatizado, peças jurídicas ilimitadas e 10 usuários.
              </p>
            </div>
            <div className="text-right">
              <div className="pl-num text-[10px] uppercase tracking-wider text-pleita-paper/60">Próxima cobrança</div>
              <div className="font-display text-3xl mt-1">R$ 1.490</div>
              <div className="pl-num text-xs text-pleita-paper/70 mt-1">01 jun 2026 · em 11 dias</div>
            </div>
          </div>
          <div className="mt-6 h-px bg-pleita-paper/20" />
          <dl className="grid md:grid-cols-3 gap-6 mt-6 text-sm">
            <div><dt className="pl-num text-[10px] uppercase tracking-wider text-pleita-paper/60">Início do plano</dt><dd className="mt-1">01 nov 2025 · 7 meses</dd></div>
            <div><dt className="pl-num text-[10px] uppercase tracking-wider text-pleita-paper/60">Faturamento</dt><dd className="mt-1">Mensal · cartão final 4421</dd></div>
            <div><dt className="pl-num text-[10px] uppercase tracking-wider text-pleita-paper/60">Pagamentos em dia</dt><dd className="mt-1 pl-num">7 / 7 ✓</dd></div>
          </dl>
        </div>
        <div className="px-6 md:px-8 py-4 bg-pleita-ink-2/50 flex items-center justify-between flex-wrap gap-3">
          <div className="text-xs text-pleita-paper/70 leading-relaxed max-w-md">Cancelamento em 1 clique. Mantém acesso até o fim do ciclo.</div>
          <div className="flex gap-2">
            <button className="pl-num text-xs px-3 py-1.5 rounded-md border border-pleita-paper/20 text-pleita-paper/80 hover:bg-pleita-paper/10">Pausar plano</button>
            <button className="pl-num text-xs px-3 py-1.5 rounded-md border border-pleita-paper/20 text-pleita-paper/80 hover:bg-pleita-paper/10">Cancelar assinatura</button>
          </div>
        </div>
      </section>

      <aside className="space-y-4">
        <div className="rounded-2xl bg-surface-card border border-pleita-line p-5">
          <div className="pl-num text-[10px] uppercase tracking-wider text-pleita-stone-2 mb-3">O que está incluído</div>
          {[
            "Editais ilimitados em 9 portais",
            "Pregão automatizado (robô de lances)",
            "Peças jurídicas: 30/mês",
            "Até 10 usuários",
            "Suporte por WhatsApp em horário comercial",
            "Histórico e replay de pregões",
          ].map((f) => (
            <div key={f} className="flex items-start gap-2 py-1.5 text-sm">
              <span className="text-verdict-go mt-0.5">✓</span>
              <span className="text-pleita-ink">{f}</span>
            </div>
          ))}
          <button className="mt-3 pl-num text-xs text-pleita-info hover:underline">Comparar com outros planos →</button>
        </div>
        <div className="rounded-2xl bg-pleita-lime/10 border border-pleita-lime/40 p-5">
          <div className="text-pleita-lime text-2xl">🏆</div>
          <div className="font-display text-lg text-pleita-ink mt-1 leading-tight">Você ganhou R$ 2,1M em 7 meses</div>
          <p className="text-xs text-pleita-stone-2 mt-2 leading-relaxed">3 contratos vencidos · ROI 142× sobre a mensalidade.</p>
          <button className="mt-3 pl-num text-xs text-pleita-info hover:underline">Ver Resultados →</button>
        </div>
      </aside>
    </div>
  );
}

function UsoLimites() {
  return (
    <div className="space-y-6">
      <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-4">
        {USAGE.map((u) => {
          const pct = u.cur === "." ? 64 : (typeof u.max === "number" ? Math.min(100, (u.cur / u.max) * 100) : 30);
          return (
            <div key={u.k} className="rounded-xl bg-surface-card border border-pleita-line p-5">
              <div className="pl-num text-[10px] uppercase tracking-wider text-pleita-stone-2">{u.k}</div>
              <div className="flex items-end justify-between mt-2">
                <div className="font-display text-3xl text-pleita-ink pl-num">{u.custom ? "US$ 47,12" : u.cur}</div>
                {!u.custom && typeof u.max === "number" && (
                  <div className="pl-num text-xs text-pleita-stone-2">/{u.max}</div>
                )}
                {!u.custom && typeof u.max !== "number" && (
                  <div className="pl-num text-[10px] text-pleita-stone-2">{u.max}</div>
                )}
              </div>
              <div className="pl-num text-[11px] text-pleita-stone-2 mt-1">{u.unit}</div>
              {typeof u.max === "number" && (
                <div className="mt-3 h-1.5 rounded-full bg-surface-2 overflow-hidden">
                  <div className={`h-full bg-${u.color}`} style={{ width: pct + "%" }} />
                </div>
              )}
              {u.custom && <div className="mt-3 pl-num text-[11px] text-verdict-caution">{u.custom}</div>}
            </div>
          );
        })}
      </div>
      <div className="rounded-2xl bg-surface-card border border-pleita-line overflow-hidden">
        <div className="px-6 py-4 border-b border-pleita-line">
          <h3 className="font-display text-lg text-pleita-ink">Custo de IA · últimos 7 meses</h3>
          <p className="text-xs text-pleita-stone-2 mt-1">A Pleita absorve o custo até a fatia coberta pelo plano. Acima disso é repassado proporcionalmente.</p>
        </div>
        <div className="px-6 py-6 h-60 flex items-end gap-3">
          {[28, 31, 35, 38, 42, 41, 47].map((v, i) => (
            <div key={i} className="flex-1 flex flex-col items-center gap-2">
              <div className="pl-num text-[10px] text-pleita-stone-2">${v}</div>
              <div className={`w-full rounded-t ${i === 6 ? "bg-verdict-caution" : "bg-pleita-ink"}`} style={{ height: `${v * 3}px` }} />
              <div className="pl-num text-[10px] uppercase tracking-wider text-pleita-stone-2">{["nov","dez","jan","fev","mar","abr","mai"][i]}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function Faturas() {
  return (
    <div className="rounded-2xl bg-surface-card border border-pleita-line overflow-hidden">
      <div className="px-6 py-5 border-b border-pleita-line flex items-center justify-between flex-wrap gap-3">
        <h3 className="font-display text-lg text-pleita-ink">Histórico de faturas</h3>
        <div className="flex gap-2">
          <select className="pl-num text-xs px-3 py-1.5 rounded-md border border-pleita-line bg-surface-card">
            <option>2026</option><option>2025</option><option>Todos</option>
          </select>
          <button className="pl-num text-xs px-3 py-1.5 rounded-md border border-pleita-line hover:bg-surface-2 inline-flex items-center gap-1.5">
            <Icons.Download className="size-3" /> Baixar ZIP
          </button>
        </div>
      </div>
      <div className="overflow-x-auto scrollbar-pl">
        <table className="w-full text-sm">
          <thead className="bg-surface-2/40 pl-num text-[10px] uppercase tracking-wider text-pleita-stone-2">
            <tr>
              <th className="px-6 py-3 text-left">Fatura</th>
              <th className="px-3 py-3 text-left">Data</th>
              <th className="px-3 py-3 text-right">Valor</th>
              <th className="px-3 py-3 text-left">Método</th>
              <th className="px-3 py-3 text-left">Status</th>
              <th className="px-3 py-3"></th>
            </tr>
          </thead>
          <tbody>
            {FATURAS.map((f) => (
              <tr key={f.id} className="border-t border-pleita-line hover:bg-surface-2/40">
                <td className="px-6 py-3 pl-num text-pleita-ink">{f.id}</td>
                <td className="px-3 py-3 text-pleita-stone">{f.data}</td>
                <td className="px-3 py-3 text-right pl-num text-pleita-ink font-semibold">{fmtBRL(f.val)}</td>
                <td className="px-3 py-3 pl-num text-xs text-pleita-stone-2">{f.metodo}</td>
                <td className="px-3 py-3">
                  <span className={`pl-num text-[10px] uppercase tracking-wider px-2 py-0.5 rounded font-semibold ${
                    f.status === "pago"     ? "bg-verdict-go/15 text-verdict-go" :
                    f.status === "estornado" ? "bg-verdict-stop/15 text-verdict-stop" :
                                              "bg-verdict-caution/20 text-verdict-caution"
                  }`}>{f.status}</span>
                </td>
                <td className="px-3 py-3 text-right">
                  <button className="pl-num text-xs text-pleita-info hover:underline">Baixar PDF</button>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}

function Metodos() {
  return (
    <div className="space-y-6">
      <div className="rounded-2xl bg-surface-card border border-pleita-line p-6">
        <h3 className="font-display text-lg text-pleita-ink mb-4">Cartões salvos</h3>
        <div className="grid md:grid-cols-2 gap-4">
          {[
            { ult: "4421", band: "Visa",       venc: "02/29", padrao: true,  nome: "Marcos Souza" },
            { ult: "0091", band: "Mastercard", venc: "11/27", padrao: false, nome: "Marcos Souza" },
          ].map((c) => (
            <div key={c.ult} className={`rounded-2xl p-5 relative ${c.padrao ? "bg-gradient-to-br from-pleita-ink to-pleita-ink-2 text-pleita-paper" : "bg-surface-2 border border-pleita-line"}`}>
              <div className="flex items-start justify-between">
                <div className={`pl-num text-[10px] uppercase tracking-wider ${c.padrao ? "text-pleita-paper/60" : "text-pleita-stone-2"}`}>{c.band}</div>
                {c.padrao && <span className="pl-num text-[9px] uppercase tracking-wider px-2 py-0.5 rounded bg-pleita-lime text-pleita-ink font-semibold">padrão</span>}
              </div>
              <div className={`pl-num text-xl mt-6 tracking-widest ${c.padrao ? "" : "text-pleita-ink"}`}>•••• •••• •••• {c.ult}</div>
              <div className={`flex justify-between mt-6 pl-num text-[11px] ${c.padrao ? "text-pleita-paper/70" : "text-pleita-stone-2"}`}>
                <span>{c.nome}</span><span>VAL {c.venc}</span>
              </div>
              <div className="mt-4 flex gap-2">
                {!c.padrao && <button className="pl-num text-[10px] uppercase tracking-wider px-2 py-1 rounded border border-pleita-line hover:bg-surface-card text-pleita-stone">Tornar padrão</button>}
                <button className={`pl-num text-[10px] uppercase tracking-wider hover:underline ${c.padrao ? "text-pleita-paper/70" : "text-pleita-stone-2"}`}>Remover</button>
              </div>
            </div>
          ))}
        </div>
        <button className="mt-4 pl-num text-xs px-4 py-2 rounded-md border border-pleita-line hover:bg-surface-2 inline-flex items-center gap-2"><Icons.Plus className="size-3" /> Adicionar cartão</button>
      </div>

      <div className="grid md:grid-cols-2 gap-4">
        <div className="rounded-2xl bg-surface-card border border-pleita-line p-5">
          <div className="flex items-center gap-3">
            <div className="size-10 rounded-md bg-verdict-go/15 grid place-items-center">⚡</div>
            <div className="flex-1">
              <div className="font-display text-base text-pleita-ink">Pix recorrente</div>
              <div className="pl-num text-[11px] text-pleita-stone-2 mt-0.5">Débito autorizado · BCB 4.522/22</div>
            </div>
            <label className="relative inline-block">
              <input type="checkbox" defaultChecked className="sr-only peer" />
              <span className="block w-10 h-6 rounded-full bg-pleita-line peer-checked:bg-pleita-ink transition-colors" />
              <span className="absolute top-1 size-4 rounded-full bg-white transition-transform peer-checked:translate-x-5 translate-x-1" />
            </label>
          </div>
        </div>
        <div className="rounded-2xl bg-surface-card border border-pleita-line p-5">
          <div className="flex items-center gap-3">
            <div className="size-10 rounded-md bg-surface-2 grid place-items-center">📄</div>
            <div className="flex-1">
              <div className="font-display text-base text-pleita-ink">Boleto bancário</div>
              <div className="pl-num text-[11px] text-pleita-stone-2 mt-0.5">Vencimento em D+5</div>
            </div>
            <label className="relative inline-block">
              <input type="checkbox" className="sr-only peer" />
              <span className="block w-10 h-6 rounded-full bg-pleita-line peer-checked:bg-pleita-ink transition-colors" />
              <span className="absolute top-1 size-4 rounded-full bg-white transition-transform peer-checked:translate-x-5 translate-x-1" />
            </label>
          </div>
        </div>
      </div>

      <div className="rounded-md bg-pleita-info/5 border border-pleita-info/30 p-4 flex items-start gap-3">
        <span className="text-pleita-info">🔒</span>
        <p className="text-xs text-pleita-stone leading-relaxed">Os dados de cartão são processados via Stripe — a Pleita não armazena o número completo. Pix e boleto usam Woovi (PSP autorizado pelo BCB).</p>
      </div>
    </div>
  );
}

function MudarPlano() {
  const PLANS = [
    {
      n: "Primeira",     v: "Grátis",    sub: "primeiro contrato",      tagline: "Pra quem ainda não vendeu nada pro governo. Vence o 1º e converte.",
      feats: ["10 editais/mês", "3 peças jurídicas", "1 usuário", "Suporte por e-mail"], cur: false, color: "neutral",
    },
    {
      n: "Em Marcha",    v: "R$ 490",   sub: "/mês",                    tagline: "Pra quem já participa ocasionalmente e quer estruturar.",
      feats: ["50 editais/mês", "15 peças jurídicas", "3 usuários", "Pregão semi-automatizado", "Suporte WhatsApp"], cur: false, color: "neutral",
    },
    {
      n: "Veterano",     v: "R$ 1.490", sub: "/mês",                    tagline: "Pra quem vence 3+ contratos por mês — o plano mais escolhido.",
      feats: ["Editais ilimitados", "30 peças jurídicas", "10 usuários", "Robô de lances completo", "Replay de pregão", "Suporte prioritário"], cur: true, color: "ink",
    },
    {
      n: "Assessoria",   v: "Sob consulta", sub: "/mês",                tagline: "Pra grandes empresas — equipe Pleita pleiteia junto.",
      feats: ["Tudo do Veterano +", "Especialista dedicado", "SLA 99,9%", "Treinamento da equipe", "SSO e LGPD avançado"], cur: false, color: "neutral",
    },
  ];
  return (
    <div className="space-y-6">
      <div className="grid lg:grid-cols-4 gap-4">
        {PLANS.map((p) => (
          <div key={p.n} className={`rounded-2xl border p-6 flex flex-col ${p.cur ? "bg-pleita-ink text-pleita-paper border-pleita-ink" : "bg-surface-card border-pleita-line"}`}>
            <div className={`pl-num text-[10px] uppercase tracking-wider ${p.cur ? "text-pleita-paper/60" : "text-pleita-stone-2"}`}>{p.n}</div>
            <div className="font-display text-3xl mt-2">{p.v}<span className={`pl-num text-sm ml-1 ${p.cur ? "text-pleita-paper/60" : "text-pleita-stone-2"}`}>{p.sub}</span></div>
            <p className={`text-xs mt-2 leading-relaxed ${p.cur ? "text-pleita-paper/70" : "text-pleita-stone-2"}`}>{p.tagline}</p>
            <div className={`my-4 h-px ${p.cur ? "bg-pleita-paper/20" : "bg-pleita-line"}`} />
            <ul className="text-xs space-y-2 flex-1">
              {p.feats.map((f) => (
                <li key={f} className="flex items-start gap-2">
                  <span className={p.cur ? "text-pleita-lime" : "text-verdict-go"}>✓</span>
                  <span>{f}</span>
                </li>
              ))}
            </ul>
            <div className="mt-5">
              {p.cur ? (
                <button disabled className="w-full px-4 py-2 rounded-full bg-pleita-paper/15 text-pleita-paper/80 text-sm pl-num">plano atual</button>
              ) : (
                <PleitaButton variant={p.n === "Assessoria" ? "ghost" : "lime"} className="w-full">
                  {p.n === "Primeira" ? "Voltar pro grátis" : p.n === "Assessoria" ? "Falar com a gente" : (PLANS.findIndex((pl) => pl.cur) > PLANS.findIndex((pl) => pl.n === p.n) ? "Fazer downgrade" : "Fazer upgrade")}
                </PleitaButton>
              )}
            </div>
          </div>
        ))}
      </div>
      <p className="text-center pl-num text-[11px] text-pleita-stone-2">A diferença é cobrada proporcionalmente · sem multa · sem letra miúda · cancela quando quiser.</p>
    </div>
  );
}

function ScreenBilling({ beginnerMode, setBeginnerMode }) {
  const [tab, setTab] = React.useState("plano");
  const [navOpen, setNavOpen] = React.useState(false);
  const Active = { plano: PlanoAtual, uso: UsoLimites, faturas: Faturas, metodos: Metodos, trocar: MudarPlano }[tab];
  return (
    <div className="h-full flex bg-pleita-paper">
      <Sidebar beginnerMode={beginnerMode} setBeginnerMode={setBeginnerMode} active="billing" mobileOpen={navOpen} onCloseMobile={() => setNavOpen(false)} />
      <div className="flex-1 flex flex-col min-w-0">
        <Topbar crumb={["Configurações", "Faturamento"]} onOpenMobileNav={() => setNavOpen(true)} />
        <main className="flex-1 overflow-y-auto scrollbar-pl">
          <div className="max-w-7xl mx-auto px-4 md:px-8 py-8">
            <SectionHeader
              eyebrow="Faturamento"
              title="Seu plano, suas faturas, seu dinheiro"
              description="Plano atual, uso do mês, todas as faturas e como você paga."
            />
            <nav className="flex items-center gap-1 mb-6 border-b border-pleita-line overflow-x-auto scrollbar-pl">
              {BILLING_TABS.map((t) => (
                <button
                  key={t.id}
                  onClick={() => setTab(t.id)}
                  className={`px-4 py-3 text-sm whitespace-nowrap border-b-2 transition-colors ${tab === t.id ? "border-pleita-ink text-pleita-ink font-semibold" : "border-transparent text-pleita-stone-2 hover:text-pleita-ink"}`}
                >
                  {t.n}
                </button>
              ))}
            </nav>
            <Active />
          </div>
        </main>
      </div>
    </div>
  );
}

Object.assign(window, { ScreenBilling });