// sellerB.jsx — Seller panel: Repasses, Integrações, API, Relatórios, Config, Suporte

/* ---------------- Repasses ---------------- */
const LEDGER_EVENT = { sale_approved: "Venda aprovada", funds_released: "Reserva liberada", refund: "Estorno", chargeback: "Chargeback", withdrawal_requested: "Saque solicitado", withdrawal_paid: "Saque pago", withdrawal_reversed: "Saque revertido" };
const ACC_LABEL = { available: "Disponível", blocked: "Reservado", payable: "Em saque" };
function SellerRepasses() {
  const { data: ov } = useApi(() => api.seller.overview("7d"), []);
  const { data: bal } = useApi(() => api.seller.balance(), []);
  const [list, setList] = React.useState(null);
  const [modal, setModal] = React.useState(false);
  const [extrato, setExtrato] = React.useState(false);
  const [entries, setEntries] = React.useState(null);
  const [amount, setAmount] = React.useState("");
  const [busy, setBusy] = React.useState(false);
  React.useEffect(() => { api.seller.transfers.list().then(setList); }, []);
  const avail = bal ? bal.availableCents : (ov ? ov.metrics.availableBalance.value : 0);
  const rows = list || [];
  const saque = async () => {
    const cents = Math.round((parseFloat(String(amount).replace(",", ".")) || 0) * 100);
    if (cents <= 0) return;
    setBusy(true);
    const t = await api.seller.transfers.create({ amountCents: cents });
    setList(l => [{ id: t.id, amountCents: t.amountCents, bank: "Itaú", status: t.status, date: t.date }, ...(l || [])]);
    setBusy(false); setModal(false); setAmount("");
  };
  return (
    <div className="col gap-24 fade-up">
      <PageHead title="Repasses" sub="Saques e liquidações para sua conta bancária">
        <button className="btn btn-primary" onClick={() => setModal(true)}><I.bank size={16} /> Sacar agora</button>
      </PageHead>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16 }} className="kpi-grid">
        <div className="card card-pad col gap-12" style={{ background: "linear-gradient(135deg, rgba(34,197,94,0.12), var(--surface) 60%)", borderColor: "rgba(34,197,94,0.3)" }}>
          <div className="row between"><span className="kpi-label">Disponível para saque</span><I.wallet size={18} style={{ color: "var(--green)" }} /></div>
          <div className="num" style={{ fontSize: 34, fontWeight: 600 }}>{cBRL(avail)}</div>
          <button className="btn btn-ghost btn-sm" style={{ alignSelf: "flex-start" }} onClick={() => setModal(true)}>Sacar agora</button>
        </div>
        <KPI label="A liberar" value={bal ? cBRL(bal.blockedCents, { cents: false }) : "—"} icon="clock" accent="var(--amber)" hint="reserva D+X" />
        <KPI label="Já repassado (mês)" value={cBRL(31260000, { cents: false })} icon="checkCircle" accent="var(--blue)" hint={`${rows.length} repasses`} />
      </div>
      <SCard title="Histórico de repasses" pad={false} right={<button className="btn btn-subtle btn-sm" onClick={() => { setExtrato(true); if (!entries) api.seller.statement().then(setEntries).catch(() => setEntries([])); }}><I.download size={15} /> Extrato</button>}>
        <table className="tbl"><thead><tr><th>ID</th><th>Data</th><th>Banco</th><th>Status</th><th style={{ textAlign: "right" }}>Valor</th></tr></thead>
          <tbody>{rows.map(x => (
            <tr key={x.id}>
              <td className="mono" style={{ fontWeight: 600 }}>{x.id}</td>
              <td className="faint mono" style={{ fontSize: 13 }}>{new Date(x.date).toLocaleDateString("pt-BR")}</td>
              <td><div className="row gap-10"><div style={{ width: 30, height: 30, borderRadius: 8, background: "var(--surface-2)", display: "flex", alignItems: "center", justifyContent: "center" }}><I.bank size={15} style={{ color: "var(--ink-soft)" }} /></div>{x.bank}</div></td>
              <td><Status s={x.status} /></td>
              <td className="num" style={{ textAlign: "right", fontWeight: 600 }}>{cBRL(x.amountCents)}</td>
            </tr>))}</tbody></table>
      </SCard>
      <Modal open={modal} onClose={() => setModal(false)} title="Sacar agora" sub="Transferência para Itaú •••• 4821" width={420}>
        <div className="col" style={{ padding: 22, gap: 18 }}>
          <div className="row between card-pad" style={{ background: "var(--surface-2)", borderRadius: "var(--r)", padding: "12px 16px" }}>
            <span className="muted" style={{ fontSize: 13.5 }}>Disponível</span><span className="num" style={{ fontWeight: 600 }}>{cBRL(avail)}</span>
          </div>
          <div className="field"><label className="label">Valor do saque</label>
            <div className="input-affix"><span className="affix affix-l">R$</span><input className="input num" placeholder="0,00" value={amount} onChange={e => setAmount(e.target.value)} style={{ fontSize: 18, fontWeight: 600 }} autoFocus /></div>
          </div>
          <div className="row gap-8">{[100, 500, 1000].map(v => <button key={v} className="chip" onClick={() => setAmount(String(v))}>R$ {v}</button>)}<button className="chip" onClick={() => setAmount(String((avail / 100).toFixed(2)).replace(".", ","))}>Tudo</button></div>
          <button className="btn btn-primary btn-lg btn-block" disabled={busy} onClick={saque}>{busy ? "Processando…" : "Confirmar saque"}</button>
          <span className="faint" style={{ fontSize: 12, textAlign: "center" }}>Repasse via PIX · cai em segundos (D+0)</span>
        </div>
      </Modal>
      <Modal open={extrato} onClose={() => setExtrato(false)} title="Extrato" sub="Movimentações do seu saldo" width={520}>
        <div className="col" style={{ maxHeight: 460, overflowY: "auto" }}>
          {(() => {
            const mov = (entries || []).filter(e => e.account === "available" || e.account === "blocked" || e.account === "payable");
            if (!entries) return <div className="faint" style={{ padding: 28, textAlign: "center" }}>Carregando…</div>;
            if (mov.length === 0) return <div className="faint" style={{ padding: 28, textAlign: "center" }}>Sem movimentações ainda.</div>;
            return mov.map((e, i) => (
              <div key={e.id} className="row between" style={{ padding: "13px 22px", borderTop: i ? "1px solid var(--line)" : "none" }}>
                <div className="col"><span style={{ fontSize: 13.5, fontWeight: 600 }}>{LEDGER_EVENT[e.event] || e.event}</span><span className="faint" style={{ fontSize: 12 }}>{ACC_LABEL[e.account]} · {new Date(e.createdAt).toLocaleString("pt-BR")}</span></div>
                <span className="num" style={{ fontWeight: 600, color: e.amountCents >= 0 ? "var(--green)" : "var(--red)" }}>{e.amountCents >= 0 ? "+" : "−"}{cBRL(Math.abs(e.amountCents))}</span>
              </div>));
          })()}
        </div>
      </Modal>
    </div>
  );
}

/* ---------------- Integrações ---------------- */
function SellerIntegracoes({ go }) {
  const toApi = () => go && go("s/api");
  return (
    <div className="col gap-24 fade-up">
      <PageHead title="Integrações" sub="Conecte sua loja e automatize o checkout">
        <button className="btn btn-ghost" onClick={toApi}><I.plus size={16} /> Nova conexão</button>
      </PageHead>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(300px, 1fr))", gap: 16 }}>
        {DATA.integrations.map(it => (
          <div key={it.id} className="card card-pad col gap-16">
            <div className="row between">
              <div className="row gap-12"><div style={{ width: 46, height: 46, borderRadius: 12, background: it.color + "22", color: it.color, display: "flex", alignItems: "center", justifyContent: "center" }}><I.plug size={22} /></div><div className="col" style={{ lineHeight: 1.3 }}><span style={{ fontWeight: 600, fontSize: 15.5 }}>{it.name}</span><span className="faint" style={{ fontSize: 12.5 }}>{it.desc}</span></div></div>
              <Status s={it.status} />
            </div>
            <div className="row between" style={{ padding: "12px 0", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)" }}>
              <div className="col"><span className="faint" style={{ fontSize: 11.5 }}>Pedidos processados</span><span className="num" style={{ fontWeight: 600 }}>{NF(it.orders)}</span></div>
              <div className="col" style={{ alignItems: "flex-end" }}><span className="faint" style={{ fontSize: 11.5 }}>Última sync</span><span style={{ fontSize: 13, fontWeight: 500 }}>{it.status === "conectado" ? "há 2 min" : "—"}</span></div>
            </div>
            <div className="row gap-8">
              {it.status === "conectado" ? <>
                <button className="btn btn-ghost btn-sm grow" onClick={toApi}><I.gear size={15} /> Configurar</button>
                <button className="btn btn-subtle btn-sm grow" onClick={toApi}><I.doc size={15} /> Logs</button>
              </> : <button className="btn btn-primary btn-sm btn-block" onClick={toApi}>{it.status === "ajustes" ? "Reconectar" : "Conectar"}</button>}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

/* ---------------- API ---------------- */
function SellerAPI() {
  const [revealed, setRevealed] = React.useState(false);
  const [copied, setCopied] = React.useState("");
  const [keys, setKeys] = React.useState(null);
  const [hooks, setHooks] = React.useState(null);
  const [hookUrl, setHookUrl] = React.useState("");
  const [hookSecret, setHookSecret] = React.useState("");
  const [hookBusy, setHookBusy] = React.useState(false);
  const copy = (id, text) => { try { navigator.clipboard.writeText(text); } catch (e) { /* ignore */ } setCopied(id); setTimeout(() => setCopied(""), 1400); };
  React.useEffect(() => {
    api.seller.apiKeys.list().then(setKeys);
    api.seller.webhooks.list().then(setHooks).catch(() => setHooks([]));
  }, []);
  const gen = async () => { const k = await api.seller.apiKeys.create("live"); setKeys(ks => [k, ...(ks || [])]); };
  const revoke = async (id) => { setKeys(ks => ks.filter(k => k.id !== id)); api.seller.apiKeys.revoke(id); };
  const addHook = async () => {
    if (!/^https:\/\//.test(hookUrl)) { alert("Informe uma URL https:// válida."); return; }
    setHookBusy(true);
    try { const h = await api.seller.webhooks.create(hookUrl.trim()); setHooks(hs => [...(hs || []), h]); setHookSecret(h.secret || ""); setHookUrl(""); }
    catch (e) { alert(e.message); } finally { setHookBusy(false); }
  };
  const removeHook = async (id) => { setHooks(hs => hs.filter(h => h.id !== id)); try { await api.seller.webhooks.remove(id); } catch (e) { /* ignore */ } };
  const list = keys || [];
  const hookList = hooks || [];
  const events = [["payment.approved", "Pagamento aprovado"], ["payment.refused", "Pagamento recusado"], ["payment.refunded", "Reembolso processado"], ["payout.completed", "Repasse concluído"], ["chargeback.opened", "Chargeback aberto"]];
  return (
    <div className="col gap-24 fade-up">
      <PageHead title="APIs & Webhooks" sub="Integre a AFEX Pay ao seu sistema">
        <button className="btn btn-ghost"><I.book size={16} /> Documentação</button>
        <button className="btn btn-primary" onClick={gen}><I.plus size={16} /> Gerar chave</button>
      </PageHead>
      <div style={{ display: "grid", gridTemplateColumns: "1.3fr 1fr", gap: 16 }} className="chart-grid">
        <SCard title="Chaves de API" pad={false} right={<button className="btn btn-subtle btn-sm" onClick={() => setRevealed(!revealed)}>{revealed ? <I.eyeOff size={15} /> : <I.eye size={15} />}{revealed ? "Ocultar" : "Revelar"}</button>}>
          <div className="col">{list.map((k, i) => (
            <div key={k.id} className="row between gap-12" style={{ padding: "16px 22px", borderTop: i ? "1px solid var(--line)" : "none" }}>
              <div className="col gap-6" style={{ minWidth: 0, flex: 1 }}>
                <div className="row gap-8"><span style={{ fontSize: 13.5, fontWeight: 600, whiteSpace: "nowrap" }}>{k.label}</span><span className={"badge " + (k.env === "live" ? "badge-green" : "badge-amber")} style={{ height: 20, fontSize: 11 }}>{k.env}</span></div>
                <code className="mono" style={{ fontSize: 13, color: "var(--ink-soft)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", display: "block" }}>{k.secret && !revealed ? "sk_live_afex_••••••••••••3f8a" : k.token}</code>
              </div>
              <div className="row gap-6">
                <button className="iconbtn" onClick={() => copy(k.id, k.token)} title="Copiar">{copied === k.id ? <I.check size={16} style={{ color: "var(--green)" }} /> : <I.copy size={16} />}</button>
                <button className="iconbtn" title="Revogar" style={{ color: "var(--red)" }} onClick={() => revoke(k.id)}><I.refresh size={16} /></button>
              </div>
            </div>))}</div>
        </SCard>
        <SCard title="Endpoint de Webhook" sub="Receba nossos eventos no seu sistema">
          <div className="col gap-16">
            {hookList.map(h => (
              <div key={h.id} className="row between gap-10" style={{ padding: "10px 12px", background: "var(--surface-2)", borderRadius: "var(--r)" }}>
                <code className="mono" style={{ fontSize: 12.5, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{h.url}</code>
                <button className="iconbtn" title="Remover" style={{ color: "var(--red)" }} onClick={() => removeHook(h.id)}><I.x size={15} /></button>
              </div>))}
            {hooks && hookList.length === 0 && <span className="faint" style={{ fontSize: 12.5 }}>Nenhum endpoint registrado ainda.</span>}
            <div className="field"><label className="label">Adicionar endpoint</label>
              <div className="input-affix"><I.webhook size={16} className="affix affix-l" /><input className="input mono" value={hookUrl} onChange={e => setHookUrl(e.target.value)} placeholder="https://api.minhaloja.com/afex/hook" style={{ fontSize: 13 }} /></div>
            </div>
            <button className="btn btn-primary btn-sm" style={{ alignSelf: "flex-start" }} disabled={hookBusy} onClick={addHook}>{hookBusy ? "Registrando…" : "Registrar endpoint"}</button>
            {hookSecret && <div className="col gap-6" style={{ background: "var(--amber-wash)", borderRadius: "var(--r)", padding: 12 }}>
              <span className="label">Secret HMAC — copie agora (não será mostrado de novo)</span>
              <code className="mono" style={{ fontSize: 11.5, wordBreak: "break-all", color: "var(--ink)" }}>{hookSecret}</code>
            </div>}
            <div className="col gap-8">
              <span className="label">Eventos enviados</span>
              {events.map(([ev, desc], i) => (
                <div key={ev} className="row between" style={{ padding: "8px 0", borderTop: i ? "1px solid var(--line)" : "none" }}>
                  <div className="col"><code className="mono" style={{ fontSize: 13, color: "var(--accent)" }}>{ev}</code><span className="faint" style={{ fontSize: 12 }}>{desc}</span></div>
                  <span className="badge badge-green" style={{ height: 20 }}><span className="dot" />ativo</span>
                </div>))}
            </div>
          </div>
        </SCard>
      </div>
      <SCard title="Eventos recentes" pad={false} right={<span className="badge badge-green"><span className="dot" />Operacional</span>}>
        <table className="tbl"><thead><tr><th>Evento</th><th>Status</th><th>Endpoint</th><th>Resposta</th><th style={{ textAlign: "right" }}>Quando</th></tr></thead>
          <tbody>{["payment.approved", "payout.completed", "payment.refused", "chargeback.opened", "payment.approved"].map((ev, i) => (
            <tr key={i}><td><code className="mono" style={{ fontSize: 13, color: "var(--accent)" }}>{ev}</code></td>
              <td><span className={"badge " + (i === 3 ? "badge-amber" : "badge-green")} style={{ height: 22 }}>{i === 3 ? "retry" : "200 OK"}</span></td>
              <td className="mono faint" style={{ fontSize: 12.5 }}>/afex/hook</td>
              <td className="mono faint" style={{ fontSize: 12.5 }}>{i === 3 ? "408ms" : "{i*30+62}ms".replace("{i*30+62}", i * 30 + 62)}</td>
              <td className="faint mono" style={{ textAlign: "right", fontSize: 12.5 }}>{i + 1} min atrás</td></tr>))}</tbody></table>
      </SCard>
    </div>
  );
}

/* ---------------- Relatórios ---------------- */
function SellerRelatorios() {
  const [period, setPeriod] = React.useState("30 dias");
  const dlTxns = async (name) => { const r = await api.seller.transactions({ pageSize: 999 }); exportCsv(name, r.data.map(t => ({ id: t.id, metodo: t.method, status: t.status, liquido_cents: t.netToSubmerchantCents, valor_cents: t.amountCents, criada: t.createdAt, liquidada: t.paidAt || "" }))); };
  const dlStatement = async (name) => { const r = await api.seller.statement(); exportCsv(name, (r || []).map(e => ({ evento: e.event, conta: e.account, valor_cents: e.amountCents, descricao: e.description || "", data: e.createdAt }))); };
  const reports = [["Demonstrativo financeiro", "Receitas, taxas e repasses", "doc", () => dlStatement("demonstrativo-financeiro")], ["Conciliação de vendas", "Pedidos x transações", "swap", () => dlTxns("conciliacao-vendas")], ["Relatório de chargebacks", "Disputas e contestações", "shield", () => dlTxns("chargebacks")], ["Extrato de taxas (MDR)", "Detalhamento por método", "percent", () => dlTxns("extrato-taxas")]];
  return (
    <div className="col gap-24 fade-up">
      <PageHead title="Relatórios" sub="Análises e exportações do seu negócio">
        <Segmented options={["7 dias", "30 dias", "12 meses"]} value={period} onChange={setPeriod} />
        <button className="btn btn-primary" onClick={() => dlTxns("relatorio-vendas")}><I.download size={16} /> Gerar relatório</button>
      </PageHead>
      <div style={{ display: "grid", gridTemplateColumns: "1.6fr 1fr", gap: 16 }} className="chart-grid">
        <SCard title="Volume processado" sub="Últimos 30 dias" right={<div className="num" style={{ fontSize: 18, fontWeight: 600 }}>{BRL(1184900, { cents: false })}</div>}>
          <AreaChart data={DATA.series30} height={220} color="var(--accent)" />
        </SCard>
        <SCard title="Receita por método" sub="Composição do faturamento">
          <div className="col center gap-16">
            <Donut size={150} thickness={18} segments={[{ value: 58, color: "var(--green)" }, { value: 31, color: "var(--blue)" }, { value: 11, color: "var(--ink-faint)" }]}
              center={<div className="col center"><span className="num" style={{ fontSize: 20, fontWeight: 600 }}>{BRL(1184900, { cents: false })}</span><span className="faint" style={{ fontSize: 10.5 }}>total</span></div>} />
            <div className="row gap-16 wrap center">{[["PIX", "var(--green)"], ["Crédito", "var(--blue)"], ["Boleto", "var(--ink-faint)"]].map(([l, c]) => <span key={l} className="row gap-6" style={{ fontSize: 12.5 }}><span style={{ width: 8, height: 8, borderRadius: 3, background: c }} />{l}</span>)}</div>
          </div>
        </SCard>
      </div>
      <SCard title="Relatórios disponíveis" pad={false}>
        <div className="col">{reports.map(([t, s, ic, dl], i) => {
          const C = I[ic]; return (
            <div key={t} className="row between" style={{ padding: "16px 22px", borderTop: i ? "1px solid var(--line)" : "none" }}>
              <div className="row gap-14"><div style={{ width: 40, height: 40, borderRadius: 10, background: "var(--surface-2)", color: "var(--accent)", display: "flex", alignItems: "center", justifyContent: "center" }}><C size={19} /></div><div className="col"><span style={{ fontSize: 14, fontWeight: 600 }}>{t}</span><span className="faint" style={{ fontSize: 12.5 }}>{s}</span></div></div>
              <button className="btn btn-ghost btn-sm" onClick={dl}><I.download size={15} /> Baixar</button>
            </div>);})}</div>
      </SCard>
    </div>
  );
}

/* ---------------- Segurança (senha + 2FA reais) ---------------- */
function PasswordChangeCard() {
  const [cur, setCur] = React.useState("");
  const [nw, setNw] = React.useState("");
  const [busy, setBusy] = React.useState(false);
  const [msg, setMsg] = React.useState(null);
  const save = async () => {
    if (nw.length < 8) { setMsg({ err: true, t: "A nova senha precisa de ao menos 8 caracteres." }); return; }
    setBusy(true); setMsg(null);
    try { await api.auth.changePassword(cur, nw); setMsg({ err: false, t: "Senha atualizada ✓" }); setCur(""); setNw(""); }
    catch (e) { setMsg({ err: true, t: e.message }); } finally { setBusy(false); }
  };
  return (
    <div className="card card-pad col gap-16">
      <span className="section-title">Alterar senha</span>
      <div className="field"><label className="label">Senha atual</label><input className="input" type="password" value={cur} onChange={e => setCur(e.target.value)} /></div>
      <div className="field"><label className="label">Nova senha</label><input className="input" type="password" placeholder="••••••••" value={nw} onChange={e => setNw(e.target.value)} /></div>
      {msg && <span style={{ fontSize: 13, color: msg.err ? "var(--red)" : "var(--green)" }}>{msg.t}</span>}
      <button className="btn btn-primary" style={{ alignSelf: "flex-start" }} disabled={busy || !cur || !nw} onClick={save}>{busy ? "Salvando…" : "Atualizar senha"}</button>
    </div>
  );
}

function SellerSecurity() {
  const [me, setMe] = React.useState(null);
  const [setup, setSetup] = React.useState(null); // { secret, otpauthUri }
  const [code, setCode] = React.useState("");
  const [busy, setBusy] = React.useState(false);
  const [msg, setMsg] = React.useState(null);
  const reload = () => api.auth.me().then(setMe).catch(() => {});
  React.useEffect(() => { reload(); }, []);
  const enabled = !!(me && me.totpEnabled);
  const begin = async () => { setMsg(null); try { setSetup(await api.auth.totpSetup()); } catch (e) { setMsg({ err: true, t: e.message }); } };
  const confirm = async () => {
    setBusy(true); setMsg(null);
    try { await api.auth.totpEnable(code); setSetup(null); setCode(""); setMsg({ err: false, t: "2FA ativado ✓" }); reload(); }
    catch (e) { setMsg({ err: true, t: e.message }); } finally { setBusy(false); }
  };
  const disable = async () => {
    const c = prompt("Digite o código atual do app autenticador para desativar o 2FA:");
    if (!c) return;
    try { await api.auth.totpDisable(c.trim()); setMsg({ err: false, t: "2FA desativado." }); reload(); }
    catch (e) { setMsg({ err: true, t: e.message }); }
  };
  return (
    <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16, maxWidth: 880 }}>
      <div className="card card-pad col gap-16">
        <div className="row gap-12"><div style={{ width: 42, height: 42, borderRadius: 11, background: "var(--green-wash)", color: "var(--green)", display: "flex", alignItems: "center", justifyContent: "center" }}><I.fingerprint size={22} /></div><div className="col"><span style={{ fontWeight: 600 }}>Autenticação 2FA</span><span className="faint" style={{ fontSize: 12.5 }}>App autenticador (TOTP)</span></div></div>
        <div className="row between"><span className="muted" style={{ fontSize: 13.5 }}>Status</span>
          {enabled ? <span className="badge badge-green"><span className="dot" />Ativo</span> : <Toggle on={!!setup} onChange={(v) => v ? begin() : setSetup(null)} />}</div>
        {setup && !enabled && <div className="col gap-10" style={{ borderTop: "1px solid var(--line)", paddingTop: 12 }}>
          <span className="faint" style={{ fontSize: 12.5 }}>Adicione esta chave no seu app (Google Authenticator, Authy) e digite o código:</span>
          <code className="mono" style={{ fontSize: 13, background: "var(--surface-2)", padding: "8px 10px", borderRadius: 8, wordBreak: "break-all" }}>{setup.secret}</code>
          <input className="input num" placeholder="Código de 6 dígitos" value={code} onChange={e => setCode(e.target.value.replace(/\D/g, "").slice(0, 6))} />
          <button className="btn btn-primary btn-sm" disabled={busy || code.length !== 6} onClick={confirm}>{busy ? "Verificando…" : "Ativar 2FA"}</button>
        </div>}
        {enabled && <button className="btn btn-subtle btn-sm" style={{ alignSelf: "flex-start" }} onClick={disable}>Desativar 2FA</button>}
        {msg && <span style={{ fontSize: 13, color: msg.err ? "var(--red)" : "var(--green)" }}>{msg.t}</span>}
      </div>
      <PasswordChangeCard />
    </div>
  );
}

/* ---------------- Configurações ---------------- */
function SellerConfig() {
  const [tab, setTab] = React.useState("Empresa");
  const tabs = ["Empresa", "Bancário", "Usuários", "Segurança"];
  const [profile, setProfile] = React.useState(null);
  React.useEffect(() => { api.seller.profile.get().then(setProfile).catch(() => setProfile(null)); }, []);
  return (
    <div className="col gap-24 fade-up">
      <PageHead title="Configurações" sub="Gerencie sua conta e preferências" />
      <div className="row gap-6" style={{ borderBottom: "1px solid var(--line)" }}>
        {tabs.map(t => <button key={t} onClick={() => setTab(t)} style={{ background: "none", border: "none", padding: "10px 4px", marginRight: 18, fontSize: 14.5, fontWeight: 600, color: tab === t ? "var(--ink)" : "var(--ink-faint)", borderBottom: tab === t ? "2px solid var(--accent)" : "2px solid transparent", marginBottom: -1 }}>{t}</button>)}
      </div>
      {tab === "Empresa" && <SellerEmpresaTab profile={profile} onSaved={setProfile} />}
      {tab === "Bancário" && <SellerBancarioTab profile={profile} onSaved={setProfile} />}
      {tab === "Usuários" && <SellerUsuariosTab />}
      {tab === "Segurança" && <SellerSecurity />}
    </div>
  );
}

function SellerEmpresaTab({ profile, onSaved }) {
  const [f, setF] = React.useState(null);
  const [busy, setBusy] = React.useState(false);
  const [msg, setMsg] = React.useState(null);
  React.useEffect(() => { if (profile) setF({ legalName: profile.legalName || "", tradeName: profile.tradeName || "", email: profile.email || "", phone: profile.phone || "" }); }, [profile]);
  if (!f) return <div className="card card-pad faint">Carregando…</div>;
  const save = async () => {
    setBusy(true); setMsg(null);
    try { onSaved(await api.seller.profile.update(f)); setMsg({ ok: true, t: "Dados salvos ✓" }); }
    catch (e) { setMsg({ ok: false, t: e.message }); } finally { setBusy(false); }
  };
  const reset = () => setF({ legalName: profile.legalName || "", tradeName: profile.tradeName || "", email: profile.email || "", phone: profile.phone || "" });
  return (
    <div className="card card-pad col gap-16" style={{ maxWidth: 680 }}>
      <div className="row gap-16"><div className="field grow"><label className="label">Razão social</label><input className="input" value={f.legalName} onChange={e => setF(s => ({ ...s, legalName: e.target.value }))} /></div></div>
      <div className="row gap-16"><div className="field grow"><label className="label">CNPJ / CPF</label><input className="input mono" value={profile.document} disabled /></div><div className="field grow"><label className="label">Nome fantasia</label><input className="input" value={f.tradeName} onChange={e => setF(s => ({ ...s, tradeName: e.target.value }))} /></div></div>
      <div className="row gap-16"><div className="field grow"><label className="label">E‑mail</label><input className="input" value={f.email} onChange={e => setF(s => ({ ...s, email: e.target.value }))} /></div><div className="field grow"><label className="label">Telefone</label><input className="input" value={f.phone} onChange={e => setF(s => ({ ...s, phone: e.target.value }))} /></div></div>
      {msg && <span style={{ fontSize: 13, color: msg.ok ? "var(--green)" : "var(--red)" }}>{msg.t}</span>}
      <div className="row gap-10"><button className="btn btn-primary" disabled={busy} onClick={save}>{busy ? "Salvando…" : "Salvar alterações"}</button><button className="btn btn-subtle" onClick={reset}>Cancelar</button></div>
    </div>
  );
}

function SellerBancarioTab({ profile, onSaved }) {
  const [f, setF] = React.useState(null);
  const [busy, setBusy] = React.useState(false);
  const [msg, setMsg] = React.useState(null);
  React.useEffect(() => { if (profile) { const b = profile.bankAccount || {}; setF({ bank: b.bank || "", type: b.type || "", agency: b.agency || "", account: b.account || "" }); } }, [profile]);
  if (!f) return <div className="card card-pad faint">Carregando…</div>;
  const save = async () => {
    setBusy(true); setMsg(null);
    try { onSaved(await api.seller.profile.update({ bankAccount: f })); setMsg({ ok: true, t: "Conta atualizada ✓" }); }
    catch (e) { setMsg({ ok: false, t: e.message }); } finally { setBusy(false); }
  };
  return (
    <div className="card card-pad col gap-16" style={{ maxWidth: 680 }}>
      <div className="row gap-16"><div className="field grow"><label className="label">Banco</label><input className="input" value={f.bank} onChange={e => setF(s => ({ ...s, bank: e.target.value }))} placeholder="341 — Itaú Unibanco" /></div><div className="field" style={{ flex: 0.6 }}><label className="label">Tipo</label><input className="input" value={f.type} onChange={e => setF(s => ({ ...s, type: e.target.value }))} placeholder="Corrente" /></div></div>
      <div className="row gap-16"><div className="field" style={{ flex: 0.5 }}><label className="label">Agência</label><input className="input" value={f.agency} onChange={e => setF(s => ({ ...s, agency: e.target.value }))} /></div><div className="field grow"><label className="label">Conta</label><input className="input" value={f.account} onChange={e => setF(s => ({ ...s, account: e.target.value }))} /></div></div>
      {msg && <span style={{ fontSize: 13, color: msg.ok ? "var(--green)" : "var(--red)" }}>{msg.t}</span>}
      <button className="btn btn-primary" style={{ alignSelf: "flex-start" }} disabled={busy} onClick={save}>{busy ? "Salvando…" : "Atualizar conta"}</button>
    </div>
  );
}

function SellerUsuariosTab() {
  const [users, setUsers] = React.useState(null);
  const [open, setOpen] = React.useState(false);
  const [f, setF] = React.useState({ name: "", email: "", password: "" });
  const [busy, setBusy] = React.useState(false);
  const [err, setErr] = React.useState(null);
  React.useEffect(() => { api.seller.users.list().then(setUsers).catch(() => setUsers([])); }, []);
  const invite = async () => {
    if (f.password.length < 8) { setErr("Senha mínima de 8 caracteres."); return; }
    setBusy(true); setErr(null);
    try {
      const u = await api.seller.users.create({ email: f.email.trim(), password: f.password, ...(f.name.trim() ? { name: f.name.trim() } : {}) });
      setUsers(us => [...(us || []), u]); setOpen(false); setF({ name: "", email: "", password: "" });
    } catch (e) { setErr(e.message); } finally { setBusy(false); }
  };
  const list = users || [];
  return (
    <SCard title="Usuários da conta" pad={false} right={<button className="btn btn-ghost btn-sm" onClick={() => setOpen(true)}><I.plus size={15} /> Convidar</button>}>
      <div className="col">{!users ? <div className="faint" style={{ padding: 22 }}>Carregando…</div>
        : list.length === 0 ? <div className="faint" style={{ padding: 22 }}>Nenhum usuário cadastrado.</div>
        : list.map((u, i) => (
        <div key={u.id} className="row between" style={{ padding: "14px 22px", borderTop: i ? "1px solid var(--line)" : "none" }}>
          <div className="row gap-12"><Avatar name={u.name || u.email} size={36} /><div className="col"><span style={{ fontSize: 14, fontWeight: 600 }}>{u.name || u.email}</span><span className="faint" style={{ fontSize: 12.5 }}>{u.email}</span></div></div>
          <span className="badge badge-gray">{u.role === "admin" ? "Admin" : "Operação"}</span>
        </div>))}</div>
      <Modal open={open} onClose={() => setOpen(false)} title="Convidar usuário" sub="Acesso ao painel da sua loja" width={420}>
        <div className="col gap-14" style={{ padding: 22 }}>
          <div className="field"><label className="label">Nome</label><input className="input" value={f.name} onChange={e => setF(s => ({ ...s, name: e.target.value }))} autoFocus /></div>
          <div className="field"><label className="label">E‑mail</label><input className="input" value={f.email} onChange={e => setF(s => ({ ...s, email: e.target.value }))} placeholder="pessoa@empresa.com" /></div>
          <div className="field"><label className="label">Senha provisória</label><input className="input" type="text" value={f.password} onChange={e => setF(s => ({ ...s, password: e.target.value }))} placeholder="mín. 8 caracteres" /></div>
          {err && <span style={{ color: "var(--red)", fontSize: 13 }}>{err}</span>}
          <button className="btn btn-primary" disabled={busy || !f.email || f.password.length < 8} onClick={invite}>{busy ? "Convidando…" : "Convidar"}</button>
        </div>
      </Modal>
    </SCard>
  );
}

/* ---------------- Suporte ---------------- */
// Contatos de suporte — ajuste para os canais reais da sua operação.
const SUPPORT = { email: "suporte@afexpay.com.br", whatsapp: "5511999990000", docs: "https://afexpay.com.br/ajuda" };
function SellerSuporte() {
  const open = { mail: () => { window.location.href = `mailto:${SUPPORT.email}?subject=${encodeURIComponent("Suporte AFEX Pay")}`; }, wa: () => window.open(`https://wa.me/${SUPPORT.whatsapp}`, "_blank"), docs: () => window.open(SUPPORT.docs, "_blank") };
  const channels = [["Abrir ticket", "Resposta em até 4h", "ticket", "var(--accent)", open.mail], ["Chat ao vivo", "Online agora", "chat", "var(--green)", open.mail], ["WhatsApp", "(11) 99999‑0000", "whatsapp", "var(--green)", open.wa], ["Base de conhecimento", "Guias e tutoriais", "book", "var(--blue)", open.docs]];
  return (
    <div className="col gap-24 fade-up">
      <PageHead title="Suporte" sub="Estamos aqui para ajudar — de seller para seller" />
      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))", gap: 16 }}>
        {channels.map(([t, s, ic, c, action]) => { const C = I[ic]; return (
          <button key={t} onClick={action} className="card card-pad col gap-14" style={{ textAlign: "left", cursor: "pointer", alignItems: "flex-start" }}>
            <div style={{ width: 48, height: 48, borderRadius: 13, background: c + "22", color: c, display: "flex", alignItems: "center", justifyContent: "center" }}><C size={24} /></div>
            <div className="col gap-2"><span style={{ fontWeight: 600, fontSize: 15.5 }}>{t}</span><span className="faint" style={{ fontSize: 12.5 }}>{s}</span></div>
            <span className="row gap-6" style={{ fontSize: 13, color: c, fontWeight: 600, marginTop: 2 }}>Acessar <I.arrowRight size={14} /></span>
          </button>);})}
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }} className="chart-grid">
        <SCard title="Meus tickets" pad={false}>
          <div className="col">{[["#8421", "Dúvida sobre antecipação", "aprovada", "Resolvido"], ["#8390", "Erro na integração Shopify", "analise", "Em análise"], ["#8377", "Solicitação de aumento de limite", "pendente", "Aberto"]].map(([id, t, st], i) => (
            <div key={id} className="row between" style={{ padding: "15px 22px", borderTop: i ? "1px solid var(--line)" : "none" }}>
              <div className="col gap-2"><span style={{ fontSize: 14, fontWeight: 600 }}>{t}</span><span className="faint mono" style={{ fontSize: 12 }}>{id} · há {i + 1}d</span></div>
              <Status s={st} />
            </div>))}</div>
        </SCard>
        <SCard title="Perguntas frequentes">
          <div className="col gap-2">{["Como funciona a antecipação de recebíveis?", "Qual o prazo de liberação do PIX?", "Como contestar um chargeback?", "Posso ter mais de uma loja integrada?", "Como altero minha conta bancária?"].map((q, i) => (
            <div key={i} className="row between" style={{ padding: "13px 0", borderTop: i ? "1px solid var(--line)" : "none", cursor: "pointer" }} onClick={() => window.open(SUPPORT.docs, "_blank")}>
              <span style={{ fontSize: 14 }}>{q}</span><I.chevR size={16} style={{ color: "var(--ink-faint)" }} />
            </div>))}</div>
        </SCard>
      </div>
    </div>
  );
}

Object.assign(window, { SellerRepasses, SellerIntegracoes, SellerAPI, SellerRelatorios, SellerConfig, SellerSuporte });