/* ============================================================
   SpiderBot v2.0.1 — abas e modais do painel
   ============================================================ */
const I = window.SBIcon;
const { useState: useS } = React;

/* ---------------- primitivos ---------------- */
const Btn = ({ ic, cls = '', children, onClick, title }) => (
  <button className={'sb-b ' + cls} onClick={onClick} title={title}>
    {ic ? <I n={ic} s={14}/> : null}{children ? <span>{children}</span> : null}
  </button>
);

const Ck = ({ on, onClick, children, q, hi }) => (
  <button className={'sb-ck' + (on ? ' on' : '') + (hi ? ' hi' : '')} onClick={onClick}>
    <span className="bx"><I n="check" s={10}/></span>
    <span>{children}</span>
    {q ? <span className="q">?</span> : null}
  </button>
);

const Sw = ({ on }) => <span className={'sb-sw' + (on ? ' on' : '')}/>;

const SwRow = ({ ic, on, onClick, children }) => (
  <button className={'sb-swrow' + (on ? ' on' : '')} onClick={onClick}>
    {ic ? <I n={ic} s={15}/> : null}<span>{children}</span><Sw on={on}/>
  </button>
);

const NumStep = ({ value, onChange, min = 1, max = 6 }) => {
  const set = v => onChange(Math.max(min, Math.min(max, v)));
  return (
    <div className="sb-num">
      <input value={value} onChange={e => set(parseInt(e.target.value, 10) || min)}/>
      <span className="ar">
        <button onClick={() => set(value + 1)} aria-label="Aumentar"><I n="chevup" s={9}/></button>
        <button onClick={() => set(value - 1)} aria-label="Diminuir"><I n="chevdown" s={9}/></button>
      </span>
    </div>
  );
};

const Sel = ({ value, onChange, opts, style }) => (
  <label className="sb-sel" style={style}>
    <select value={value} onChange={e => onChange && onChange(e.target.value)}>
      {opts.map(o => <option key={o} value={o}>{o}</option>)}
    </select>
    <I n="chevdown" s={13}/>
  </label>
);

const Card = ({ title, right, children, style, bodyStyle }) => (
  <div className="sb-card" style={style}>
    {right
      ? <div className="sb-card-h"><h4>{title}</h4><div className="sb-phead-a">{right}</div></div>
      : <h4>{title}</h4>}
    <div className="sb-card-b" style={bodyStyle}>{children}</div>
  </div>
);

const Table = ({ cols, head, children }) => (
  <div className="sb-table">
    <div className="sb-tr sb-th" style={{ '--cols': cols }}>
      {head.map((h, i) => <div key={i}>{h}</div>)}
    </div>
    <div className="sb-tb">{children}</div>
  </div>
);
const Tr = ({ cols, children }) => <div className="sb-tr" style={{ '--cols': cols }}>{children}</div>;
const Td = ({ l, cls = '', children }) => (
  <div className={'sb-td ' + cls}>{l ? <span className="lb">{l}</span> : null}<span>{children}</span></div>
);
const EmptyRow = ({ children, red }) => (
  <div className="sb-tr" style={{ '--cols': '1fr' }}>
    <div className={'sb-td sb-full sb-empty' + (red ? ' red' : '')}>{children}</div>
  </div>
);

/* QR falso, determinístico */
function FakeQR() {
  const n = 21, cells = [];
  let seed = 7;
  const r = () => { seed = (seed * 1103515245 + 12345) & 0x7fffffff; return seed / 0x7fffffff; };
  for (let y = 0; y < n; y++) for (let x = 0; x < n; x++) {
    const fx = x < 7 ? x : (x >= n - 7 ? x - (n - 7) : -1);
    const fy = y < 7 ? y : (y >= n - 7 ? y - (n - 7) : -1);
    const finder = (x < 7 && y < 7) || (x >= n - 7 && y < 7) || (x < 7 && y >= n - 7);
    const v = r();
    const on = finder
      ? (fx === 0 || fx === 6 || fy === 0 || fy === 6 || (fx >= 2 && fx <= 4 && fy >= 2 && fy <= 4))
      : v > 0.55;
    if (on) cells.push(<rect key={x + '-' + y} x={x} y={y} width="1" height="1"/>);
  }
  return <svg className="sb-qrcode" viewBox="0 0 21 21" shapeRendering="crispEdges" fill="#000">{cells}</svg>;
}

/* feed de log reaproveitado */
const LogFeed = ({ logs, empty }) => (
  <div className="sb-logfeed">
    {logs.length === 0
      ? <span style={{ color: 'var(--sb-faint)' }}>{empty || 'Sem registros.'}</span>
      : logs.map(l => (
          <div key={l.id} className={'sb-logline ' + l.k}>
            <span className="ts">[{l.ts}]</span> <b>{l.msg}</b>
          </div>
        ))}
  </div>
);

/* ============================================================
   INÍCIO
   ============================================================ */
function Inicio(p) {
  const { modo, setModo, oculta, setOculta, delay, setDelay, delayLink, setDelayLink,
          qtd, setQtd, dep, setDep, func, setFunc, link, setLink, logs, setLogs,
          running, togglePlay, qr } = p;
  const tg = k => setFunc(f => Object.assign({}, f, { [k]: !f[k] }));
  const setDepAt = (i, v) => setDep(d => { const n = d.slice(); n[i] = v; return n; });

  return (
    <div className="sb-page">
      <div className="sb-phead inline">
        <h3>Início</h3>
        <span className="sub">Configurações de navegação, funcionalidades e log do sistema.</span>
      </div>

      <div className="sb-grid3">
        {/* ---- coluna 1 ---- */}
        <div className="sb-col">
          <Card title="Configuração de Navegação">
            <SwRow ic="phone" on={modo.app} onClick={() => setModo({ app: true, mobile: false })}>Modo Aplicativo</SwRow>
            <SwRow ic="globe" on={modo.mobile} onClick={() => setModo({ app: false, mobile: true })}>Modo Mobile</SwRow>
            <Btn ic="key" cls="wide">Senhas</Btn>
          </Card>

          <Card title="Ajustes de Execução">
            <div>
              <span className="sb-lab">Delay (segundos):</span>
              <input className="sb-in center" placeholder="(SEGUNDOS)" value={delay}
                     onChange={e => setDelay(e.target.value)}/>
            </div>
            <Ck on={delayLink} onClick={() => setDelayLink(v => !v)}>Delay por Link</Ck>
            <div>
              <span className="sb-lab">Quantidade de contas:</span>
              <div className="sb-step">
                <button onClick={() => setQtd(v => Math.max(1, v - 1))}><I n="minus" s={13}/></button>
                <span className="val">{qtd}</span>
                <button onClick={() => setQtd(v => Math.min(99, v + 1))}><I n="plus" s={13}/></button>
              </div>
            </div>
            <div>
              <span className="sb-lab">Valores para depósito:</span>
              <div className="sb-dep">
                <input className="sb-in center" value={dep[0]} onChange={e => setDepAt(0, e.target.value)}/>
                <input className="sb-in center" value={dep[1]} onChange={e => setDepAt(1, e.target.value)}/>
              </div>
            </div>
            <button className={'sb-swcard' + (oculta ? ' on' : '')} onClick={() => setOculta(v => !v)}>
              <span className="ic"><I n="eyeoff" s={16}/></span>
              <span>
                <b>Operação Oculta</b>
                <p>Cadastra sem abrir nenhuma janela na tela.</p>
              </span>
              <Sw on={oculta}/>
            </button>
            <div className={'sb-state' + (oculta ? ' on' : '')}>{oculta ? 'ATIVADO' : 'DESATIVADO'}</div>
          </Card>
        </div>

        {/* ---- coluna 2 ---- */}
        <div className="sb-col">
          <Card title="Funcionalidades" style={{ flex: 1 }}>
            <div className="sb-fgrid">
              <Ck on={func.proxy} hi={func.proxy} onClick={() => tg('proxy')}>
                Proxy <span className="accent">{func.proxy ? 'On' : 'Off'}</span>
              </Ck>
              <Ck on={func.captcha} onClick={() => tg('captcha')}>Resolver captcha</Ck>
              <Ck on={func.ads} q onClick={() => tg('ads')}>Sem anúncios</Ck>
              <Ck on={func.retrato} onClick={() => tg('retrato')}>Modo retrato</Ck>
              <Ck on={func.guia} onClick={() => tg('guia')}>Bloquear 2ª guia</Ck>
              <Ck on={func.escada} q onClick={() => tg('escada')}>Escadinha</Ck>
            </div>

            <div className="sb-qr">
              <div className="sb-qr-h"><I n="qr" s={15}/> QR de Depósito</div>
              <div className="sb-qr-box">
                {qr
                  ? <React.Fragment><FakeQR/><b>R$ {dep[0]},00 · aguardando</b></React.Fragment>
                  : 'Nenhum QR capturado ainda'}
              </div>
            </div>
          </Card>
        </div>

        {/* ---- coluna 3 ---- */}
        <div className="sb-col">
          <div className="sb-card" style={{ flex: 1 }}>
            <div className="sb-card-b">
              <div className="sb-meta">
                <span><i>Login:</i> <b>spiderbot</b></span>
                <span><i>Acesso:</i> <b className="ok">Vitalício</b></span>
              </div>

              <div className="sb-logbar">
                <span>Log de Operações:</span>
                <Btn ic="folder" cls="sm">Abrir</Btn>
                <Btn ic="bug" cls="sm blue">DIAG</Btn>
                <Btn ic="trash" cls="sm red" onClick={() => setLogs([])}>Clear</Btn>
              </div>

              <div className="sb-emu">Emulação: {modo.app ? 'Modo Aplicativo' : 'Modo Mobile'}</div>
              <LogFeed logs={logs}/>
            </div>
          </div>
        </div>
      </div>

      {/* ---- barra inferior ---- */}
      <div className="sb-footbar">
        <div className="lk">
          <span>Link:</span>
          <input className="sb-in" placeholder="https://..." value={link} onChange={e => setLink(e.target.value)}/>
        </div>
        <Btn ic="link" cls="ghostred">Múltiplos Links</Btn>
        <button className={'sb-b sb-play' + (running ? ' run' : '')} onClick={togglePlay}>
          <I n={running ? 'maxi' : 'playc'} s={15}/><span>{running ? 'Parar' : 'Play'}</span>
        </button>
        <Btn ic="refresh">Atualizações</Btn>
        <Btn ic="key">Token</Btn>
      </div>
    </div>
  );
}

/* ============================================================
   CHAVES PIX
   ============================================================ */
function Pix(p) {
  const { pixKeys, setPixKeys, setModal } = p;
  return (
    <div className="sb-page">
      <div className="sb-phead">
        <div className="sb-phead-l">
          <div className="sb-phead-t"><I n="key" s={17}/><h3>Chaves PIX</h3></div>
          <p>{pixKeys.length} chave(s) cadastrada(s)</p>
        </div>
        <div className="sb-phead-a">
          <Btn ic="upload">Importar</Btn>
          <Btn ic="plus" cls="red" onClick={() => setModal('pix')}>Nova chave</Btn>
        </div>
      </div>

      <Table cols="1.2fr 2fr 1fr 70px" head={['Tipo', 'Chave', 'Status', '']}>
        {pixKeys.length === 0
          ? <EmptyRow>Nenhuma chave cadastrada.</EmptyRow>
          : pixKeys.map(k => (
              <Tr key={k.id} cols="1.2fr 2fr 1fr 70px">
                <Td l="Tipo">{k.tipo}</Td>
                <Td l="Chave"><span className="sb-mono">{k.chave}</span></Td>
                <Td l="Status"><span style={{ color: 'var(--sb-ok)' }}>✓ válida</span></Td>
                <div className="sb-td sb-acts">
                  <button className="sb-ic red" onClick={() => setPixKeys(v => v.filter(x => x.id !== k.id))}>
                    <I n="trash" s={14}/>
                  </button>
                </div>
              </Tr>
            ))}
      </Table>
    </div>
  );
}

/* ============================================================
   CONTAS
   ============================================================ */
const C_COLS = '22px 1.25fr 1fr 1fr .8fr .9fr 1fr .8fr';
function Contas(p) {
  const { contas, setContas } = p;
  const [sel, setSel] = useS({});
  const [q, setQ] = useS('');
  const nSel = Object.values(sel).filter(Boolean).length;
  const list = contas.filter(c => !q ||
    (c.login + ' ' + c.casa + ' ' + c.conta).toLowerCase().includes(q.toLowerCase()));
  const all = list.length > 0 && list.every(c => sel[c.id]);

  return (
    <div className="sb-page">
      <div className="sb-phead">
        <div className="sb-phead-l">
          <div className="sb-phead-t"><h3>Contas</h3></div>
          <p>{contas.length} registro(s) · {nSel} selecionada(s) — armazenamento local criptografado (contas.json)</p>
        </div>
        <div className="sb-phead-a">
          <Btn ic="hdd" cls="gold">Backup</Btn>
          <Btn ic="rocket" cls="red">Abrir Selecionadas</Btn>
          <Btn ic="trash" onClick={() => { setContas(c => c.filter(x => !sel[x.id])); setSel({}); }}>Excluir Selecionadas</Btn>
          <Btn ic="trash" cls="dim" onClick={() => { setContas([]); setSel({}); }}>Excluir Tudo</Btn>
        </div>
      </div>

      <div className="sb-search">
        <I n="search" s={15}/>
        <input className="sb-in" placeholder="Buscar por login, casa ou ID..." value={q} onChange={e => setQ(e.target.value)}/>
      </div>

      <Table cols={C_COLS} head={[
        <button key="a" className={'sb-ck' + (all ? ' on' : '')} style={{ padding: 0, width: 'auto' }}
                onClick={() => { const n = {}; if (!all) list.forEach(c => n[c.id] = true); setSel(n); }}>
          <span className="bx"><I n="check" s={10}/></span>
        </button>,
        'Data/Hora', 'Casa', 'Login', 'Senha', 'Senha de saque', 'ID da conta', 'Saldo']}>
        {list.length === 0
          ? <EmptyRow red>Nenhuma conta cadastrada ainda. As contas criadas pelo bot aparecerão aqui automaticamente.</EmptyRow>
          : list.map(c => (
              <Tr key={c.id} cols={C_COLS}>
                <div className="sb-td">
                  <button className={'sb-ck' + (sel[c.id] ? ' on' : '')} style={{ padding: 0, width: 'auto' }}
                          onClick={() => setSel(s => Object.assign({}, s, { [c.id]: !s[c.id] }))}>
                    <span className="bx"><I n="check" s={10}/></span>
                  </button>
                </div>
                <Td l="Data/Hora"><span className="sb-mono" style={{ fontSize: 11 }}>{c.data}</span></Td>
                <Td l="Casa">{c.casa}</Td>
                <Td l="Login"><span className="sb-mono" style={{ fontSize: 11 }}>{c.login}</span></Td>
                <Td l="Senha">{c.senha}</Td>
                <Td l="Senha de saque">{c.saque}</Td>
                <Td l="ID da conta"><span className="sb-mono" style={{ fontSize: 11 }}>{c.conta}</span></Td>
                <Td l="Saldo"><span style={{ color: 'var(--sb-ok)' }}>{c.saldo}</span></Td>
              </Tr>
            ))}
      </Table>

      <div className="sb-pager">
        <span>Página <b>1</b> de <b>1</b> · Mostrando {list.length} de {contas.length}</span>
        <div className="sb-phead-a">
          <Btn ic="chevleft" cls="sm">Voltar</Btn>
          <Btn cls="sm">Próxima <I n="chevright" s={13}/></Btn>
        </div>
      </div>
    </div>
  );
}

/* ============================================================
   PROXY
   ============================================================ */
const P_COLS = '34px 1.5fr .8fr 1.6fr .9fr .5fr 68px';
function Proxy(p) {
  const { proxies, setProxies, setModal } = p;
  const ativos = proxies.filter(x => x.on).length;
  return (
    <div className="sb-page">
      <div className="sb-phead">
        <div className="sb-phead-l">
          <div className="sb-phead-t"><I n="network" s={17}/><h3>Proxies</h3></div>
          <p>{proxies.length} proxy(ies) cadastrado(s) · {ativos} ativo(s)</p>
        </div>
        <div className="sb-phead-a">
          <Btn ic="upload">Importar lista</Btn>
          <Btn ic="bug">Spider Proxy</Btn>
          <Btn ic="plus" onClick={() => setModal('proxy')}>Novo proxy</Btn>
        </div>
      </div>

      <Table cols={P_COLS} head={['', 'Label', 'Protocolo', 'Endereço', 'Auth', 'País', '']}>
        {proxies.length === 0
          ? <EmptyRow>Nenhum proxy cadastrado.</EmptyRow>
          : proxies.map(x => (
              <Tr key={x.id} cols={P_COLS}>
                <div className="sb-td">
                  <button className={'sb-ic' + (x.on ? ' pw' : '')}
                          onClick={() => setProxies(v => v.map(y => y.id === x.id ? Object.assign({}, y, { on: !y.on }) : y))}>
                    <I n="power" s={14}/>
                  </button>
                </div>
                <Td l="Label"><b style={{ fontWeight: 600 }}>{x.label}</b></Td>
                <Td l="Protocolo"><span style={{ color: 'var(--sb-faint)' }}>{x.proto}</span></Td>
                <Td l="Endereço"><span className="sb-mono" style={{ fontSize: 11.5 }}>{x.addr}</span></Td>
                <Td l="Auth"><span style={{ color: 'var(--sb-dim)' }}>{x.auth ? '✓ autenticado' : '—'}</span></Td>
                <Td l="País">{x.pais}</Td>
                <div className="sb-td sb-acts">
                  <button className="sb-ic"><I n="pencil" s={14}/></button>
                  <button className="sb-ic red" onClick={() => setProxies(v => v.filter(y => y.id !== x.id))}>
                    <I n="trash" s={14}/>
                  </button>
                </div>
              </Tr>
            ))}
      </Table>
    </div>
  );
}

/* ============================================================
   TELAS
   ============================================================ */
function Telas(p) {
  const { grid, setGrid, lit, monAtivo, setMonAtivo, reduzir, setReduzir, render, setRender } = p;
  const total = grid.x * grid.y;
  const setG = (k, v) => setGrid(g => Object.assign({}, g, { [k]: v }));

  return (
    <div className="sb-page">
      <div className="sb-topbar">
        <div className="g">
          <span>Renderização:</span>
          <Sel value={render} onChange={setRender} opts={['GPU', 'CPU', 'Auto']} style={{ width: 96 }}/>
        </div>
        <Btn cls="ghostred" >CALIBRADOR: 1920x1080 [GRADE]</Btn>
        <div className="g" style={{ marginLeft: 'auto' }}>
          <span>Perfil de tela:</span>
          <Sel value="Perfil 1" opts={['Perfil 1', 'Perfil 2', 'Perfil 3']} style={{ width: 106 }}/>
        </div>
      </div>

      <div className="sb-screens" style={{ '--gx': grid.x, '--gy': grid.y }}>
        {Array.from({ length: total }, (_, i) => (
          <div key={i} className={'sb-cell' + (i < lit ? ' lit' : '')}>
            <span className="n t">{i + 1}</span>
            <img src="assets/spider-mark.png" alt=""/>
            <span className="n b">{i + 1}</span>
          </div>
        ))}
      </div>

      <div className="sb-panelbox">
        <div className="sb-prow">
          <span>Monitor:</span>
          <Sel value="Monitor 1 (Principal): 1920x1080"
               opts={['Monitor 1 (Principal): 1920x1080', 'Monitor 2: 2560x1440']}
               style={{ flex: '1 1 200px', maxWidth: 246 }}/>
          <Btn ic="refresh" cls="sm">Detectar</Btn>
          <span style={{ letterSpacing: 0, textTransform: 'none', fontSize: 11.5 }}>(1 detectado)</span>
          <Ck on={monAtivo} onClick={() => setMonAtivo(v => !v)}>Ativo</Ck>
          <span className="gl">Grade:</span>
          <NumStep value={grid.y} onChange={v => setG('y', v)}/>
          <span style={{ letterSpacing: 0, textTransform: 'none' }}>×</span>
          <NumStep value={grid.x} onChange={v => setG('x', v)}/>
          <span style={{ letterSpacing: 0, textTransform: 'none', fontSize: 11.5 }}>= {total} telas</span>
        </div>
        <div className="sb-prow">
          <Ck on={reduzir} onClick={() => setReduzir(v => !v)}>Reduzir Janelas</Ck>
          <Btn ic="save" cls="red">Salvar</Btn>
          <Btn ic="sliders">Posições Personalizadas</Btn>
        </div>
      </div>

      <div className="sb-foot-note">
        Ao clicar no botão <b>Play</b>, o app abrirá <b>{total}</b> janela(s) — uma para cada célula da grade —
        no <b>Monitor 1 (Principal): 1920x1080</b>.
      </div>
    </div>
  );
}

/* ============================================================
   OPERAÇÃO
   ============================================================ */
const SLOTS = ['Emperor', 'Santa', 'Halloween', 'Fortune Ox', 'Lucky Dog', 'Plushie Wins'];
function Operacao(p) {
  const { logs, setLogs, speed, setSpeed, tools, setTools, slots, setSlots,
          mesmasChaves, setMesmasChaves, dep } = p;
  const tg = k => setTools(t => Object.assign({}, t, { [k]: !t[k] }));
  const tgSlot = k => setSlots(s => Object.assign({}, s, { [k]: !s[k] }));

  return (
    <div className="sb-page">
      <div className="sb-opwrap">
        <div className="sb-opmain">
          <Card title="Log do Sistema" right={<React.Fragment>
            <Btn ic="folder" cls="sm">Abrir</Btn>
            <Btn ic="trash" cls="sm red" onClick={() => setLogs([])}>Clear</Btn>
          </React.Fragment>} style={{ minHeight: 150 }}>
            <LogFeed logs={logs}/>
          </Card>

          <div className="sb-opcards">
            <Card title="Navegação">
              <Btn ic="home" cls="wide">Página Inicial</Btn>
              <Btn ic="chart" cls="wide">Relatório de Apostas</Btn>
              <Btn ic="archive" cls="wide">Página de Baús</Btn>
              <Btn ic="refresh" cls="wide">Atualizar Página</Btn>
            </Card>

            <Card title="Bônus">
              <Btn ic="filepen" cls="wide">Preencher Dados</Btn>
              <Btn ic="target" cls="wide">Coletar Missões</Btn>
              <Btn ic="tag" cls="wide">Página Promoções</Btn>
              <Btn ic="msg" cls="wide">Cadastrar SMS</Btn>
            </Card>

            <Card title="Depósito">
              <div className="sb-dep">
                <input className="sb-in center" defaultValue={dep[0]}/>
                <input className="sb-in center" defaultValue={dep[1]}/>
              </div>
              <Btn ic="download" cls="wide red">Depositar</Btn>
            </Card>

            <Card title="Chaves PIX">
              <Sel value="Selecione o tipo de chave" opts={['Selecione o tipo de chave', 'CPF', 'CNPJ', 'Email', 'Telefone', 'Aleatória (EVP)']}/>
              <Btn cls="wide gold">Cadastrar Chaves PIX</Btn>
              <Ck on={mesmasChaves} onClick={() => setMesmasChaves(v => !v)}>Mesmas chaves para links diferentes</Ck>
              <Btn ic="key" cls="wide red">Sacar</Btn>
            </Card>
          </div>

          <div className="sb-opfoot">
            <div className="sb-fbox">
              <span>Slot para buscar:</span>
              <div className="r">
                <input className="sb-in" defaultValue="mayan destiny"/>
                <Btn ic="search">Buscar</Btn>
              </div>
            </div>
            <div className="sb-fbox">
              <span>Janelas para controlar:</span>
              <div className="r">
                <input className="sb-in" placeholder="Ex: 1, 2-4 ou 1,3"/>
              </div>
            </div>
          </div>
        </div>

        {/* ---- ferramentas ---- */}
        <Card title="Ferramentas">
          <div className="sb-tools">
            <Ck on={tools.espelho} onClick={() => tg('espelho')}>[F2] Modo Espelho</Ck>
            <Ck on={tools.dados} onClick={() => tg('dados')}>[F3] Exibir Dados</Ck>
            <Ck on={tools.ext} onClick={() => tg('ext')}>Extensão</Ck>
            <Btn ic="puzzle">Extensão</Btn>
            <Btn ic="ban">Bloqueios</Btn>

            <div className="sb-speed">✦ Speed Hack ✦</div>
            <div className="sb-speeds">
              {['1x', '2x', '4x', '8x', '12x'].map(s => (
                <button key={s} className={speed === s ? 'on' : ''} onClick={() => setSpeed(s)}>{s}</button>
              ))}
            </div>

            <div className="sb-autoslot">
              <b>AUTO SLOT</b>
              <Btn cls="sm ghostred">[F8] Desativar Proxy</Btn>
            </div>
            <div className="sb-slots">
              {SLOTS.map(s => <Ck key={s} on={!!slots[s]} onClick={() => tgSlot(s)}>{s}</Ck>)}
            </div>
            <Btn ic="gear">Configurar</Btn>
            <Btn ic="search" cls="red">IR</Btn>
          </div>
        </Card>
      </div>
    </div>
  );
}

/* ============================================================
   MERCADO PAGO
   ============================================================ */
function MercadoPago(p) {
  const { mp, setMp, setModal } = p;
  const [prov, setProv] = useS(false);
  return (
    <div className="sb-page">
      <div className="sb-phead">
        <div className="sb-phead-l">
          <div className="sb-phead-t"><I n="card" s={17}/><h3>Mercado Pago</h3></div>
          <p>{mp.length} conta(s) cadastrada(s) · até 5 visíveis sem rolar</p>
        </div>
        <div className="sb-phead-a">
          <Btn ic="plus" cls="red" onClick={() => setModal('mp')}>Nova conta</Btn>
        </div>
      </div>

      {mp.length === 0
        ? <div className="sb-note">
            Nenhuma conta cadastrada. Cada conta é um login real no Mercado Pago — abra pra logar (uma vez, na mão)
            e depois use "Importar" pra trazer as chaves PIX dessa conta pra aba Chaves PIX, ou "Deletar Chaves"
            pra excluir no site de verdade.
          </div>
        : <Table cols="1.4fr 1fr 90px" head={['Nome', 'Status', '']}>
            {mp.map(a => (
              <Tr key={a.id} cols="1.4fr 1fr 90px">
                <Td l="Nome">{a.nome}</Td>
                <Td l="Status"><span style={{ color: 'var(--sb-gold)' }}>aguardando login</span></Td>
                <div className="sb-td sb-acts">
                  <button className="sb-ic"><I n="folder" s={14}/></button>
                  <button className="sb-ic red" onClick={() => setMp(v => v.filter(x => x.id !== a.id))}>
                    <I n="trash" s={14}/>
                  </button>
                </div>
              </Tr>
            ))}
          </Table>}

      <Card title="Provedores" bodyStyle={{ gap: 8 }}>
        <div className="sb-prov" onClick={() => setProv(v => !v)} style={{ cursor: 'pointer' }}>
          <span className={'sb-radio' + (prov ? ' on' : '')}/>
          <span>Spider SMS</span>
          <button className="sb-ic"><I n="gear" s={14}/></button>
        </div>
      </Card>
    </div>
  );
}

/* ============================================================
   MODAIS
   ============================================================ */
function SBModals(p) {
  const { modal, setModal, setPixKeys, setProxies, setMp } = p;
  const [tipo, setTipo] = useS('CPF');
  const [txt, setTxt] = useS('');
  const [addr, setAddr] = useS('');
  const [nome, setNome] = useS('');
  const close = () => { setModal(null); setTxt(''); setAddr(''); setNome(''); };
  const linhas = txt.split('\n').map(s => s.trim()).filter(Boolean);

  const Head = ({ ic, children }) => (
    <div className="sb-dlg-h">
      {ic ? <I n={ic} s={15}/> : null}<b>{children}</b>
      <button className="sb-ic x" onClick={close}><I n="close" s={14}/></button>
    </div>
  );

  let body = null;

  if (modal === 'pix') body = (
    <React.Fragment>
      <Head>Nova chave PIX</Head>
      <div className="sb-dlg-b">
        <div className="sb-fieldrow">
          <span>Tipo:</span>
          <Sel value={tipo} onChange={setTipo} opts={['CPF', 'CNPJ', 'Email', 'Telefone', 'Aleatória (EVP)']}/>
        </div>
        <div>
          <span className="sb-lab">Chaves (uma por linha)</span>
          <textarea className="sb-in mono" value={txt} onChange={e => setTxt(e.target.value)}
                    placeholder={'Cole aqui as chaves, uma por linha…\nEx:\n11999998888\n11988887777'}/>
        </div>
        <div className="sb-hint">{linhas.length} chave(s) detectada(s)</div>
      </div>
      <div className="sb-dlg-f">
        <Btn cls="dim" onClick={close}>Cancelar</Btn>
        <Btn cls="red" onClick={() => {
          setPixKeys(v => v.concat(linhas.map((c, i) => ({ id: 'k' + Date.now() + i, tipo, chave: c }))));
          close();
        }}>Salvar</Btn>
      </div>
    </React.Fragment>
  );

  if (modal === 'proxy') body = (
    <React.Fragment>
      <Head>Novo proxy</Head>
      <div className="sb-dlg-b">
        <div>
          <span className="sb-lab">Proxy (SOCKS5 ou HTTP)*</span>
          <input className="sb-in mono" value={addr} onChange={e => setAddr(e.target.value)}
                 placeholder="host:porta:usuario:senha ou http://usuario:senha@host"/>
        </div>
        <div className="sb-hint">
          Formato: <code>host:porta:usuario:senha</code> (assume SOCKS5) ou{' '}
          <code>http://usuario:senha@host:porta</code> / <code>socks5://...</code> pra escolher o protocolo.
        </div>
      </div>
      <div className="sb-dlg-f">
        <Btn cls="dim" onClick={close}>Cancelar</Btn>
        <Btn cls="red" onClick={() => {
          const v = addr.trim();
          if (v) setProxies(x => x.concat([{
            id: 'p' + Date.now(), label: v.split(':').slice(0, 2).join(':'),
            proto: v.startsWith('http') ? 'HTTP' : 'SOCKS5',
            addr: v.split(':').slice(0, 2).join(':'), auth: v.split(':').length > 2, pais: 'BR', on: true,
          }]));
          close();
        }}>Salvar</Btn>
      </div>
    </React.Fragment>
  );

  if (modal === 'mp') body = (
    <React.Fragment>
      <Head ic="card">Nova conta Mercado Pago</Head>
      <div className="sb-dlg-b">
        <div>
          <span className="sb-lab">Nome (só pra identificar, ex: PF, PJ)</span>
          <input className="sb-in" value={nome} onChange={e => setNome(e.target.value)}/>
        </div>
        <div className="sb-hint">
          Depois de criar, defina a proxy (opcional) direto na linha da conta, clique em "Abrir" e faça login
          manualmente nessa janela (só na primeira vez) — a sessão fica salva pra próxima.
        </div>
      </div>
      <div className="sb-dlg-f">
        <Btn cls="dim" onClick={close}>Cancelar</Btn>
        <Btn cls="red" onClick={() => {
          if (nome.trim()) setMp(v => v.concat([{ id: 'm' + Date.now(), nome: nome.trim() }]));
          close();
        }}>Criar</Btn>
      </div>
    </React.Fragment>
  );

  if (!body) return null;
  return (
    <div className="sb-modal" onClick={e => { if (e.target === e.currentTarget) close(); }}>
      <div className="sb-dlg">{body}</div>
    </div>
  );
}

/* ---------------- router ---------------- */
function TabView(p) {
  switch (p.tab) {
    case 'pix':      return <Pix {...p}/>;
    case 'contas':   return <Contas {...p}/>;
    case 'proxy':    return <Proxy {...p}/>;
    case 'telas':    return <Telas {...p}/>;
    case 'operacao': return <Operacao {...p}/>;
    case 'mp':       return <MercadoPago {...p}/>;
    default:         return <Inicio {...p}/>;
  }
}

window.TabView = TabView;
window.SBModals = SBModals;