// Sistema (Administração do Sistema) page

const { useState: sysState } = React;

/* ── Multi-select de Unidades ── */
const UNIDADES_DISPONIVEIS = ['Unidade Centro', 'Unidade Jardins'];

function MultiSelectUnidade({ selected, onChange }) {
  const [open, setOpen] = sysState(false);

  const toggle = unit => {
    onChange(selected.includes(unit)
      ? selected.filter(u => u !== unit)
      : [...selected, unit]);
  };

  const label = selected.length === 0
    ? 'Selecione...'
    : selected.length === UNIDADES_DISPONIVEIS.length
      ? 'Todas'
      : selected.join(', ');

  return (
    <div style={{ flex:'1 1 45%', display:'flex', flexDirection:'column', gap:5, position:'relative' }}>
      <label style={{ fontSize:13, fontWeight:500, color:'#374151' }}>Unidade <span style={{ color:'#9ca3af', fontWeight:400 }}>(opcional)</span></label>
      <button type="button" onClick={() => setOpen(o => !o)}
        style={{ width:'100%', padding:'9px 12px', border:'1px solid #d1d5db', borderRadius:6, fontSize:14, background:'white', color: selected.length ? '#111' : '#9ca3af', cursor:'pointer', display:'flex', justifyContent:'space-between', alignItems:'center', textAlign:'left' }}>
        <span style={{ overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap', flex:1 }}>{label}</span>
        <Icon name="chevDown" size={14} color="#9ca3af" />
      </button>
      {open && (
        <>
          <div style={{ position:'fixed', inset:0, zIndex:2100 }} onClick={() => setOpen(false)} />
          <div style={{ position:'absolute', top:'100%', left:0, right:0, background:'white', border:'1px solid #d1d5db', borderRadius:6, boxShadow:'0 4px 12px rgba(0,0,0,0.12)', zIndex:2200, marginTop:3 }}>
            {UNIDADES_DISPONIVEIS.map(unit => (
              <label key={unit} onClick={() => toggle(unit)}
                style={{ display:'flex', alignItems:'center', gap:10, padding:'10px 12px', cursor:'pointer', fontSize:14, color:'#111', userSelect:'none' }}>
                <input type="checkbox" readOnly checked={selected.includes(unit)}
                  style={{ accentColor: C.primary, width:15, height:15, cursor:'pointer' }} />
                {unit}
              </label>
            ))}
          </div>
        </>
      )}
    </div>
  );
}

/* ── helpers de máscara ── */
const maskCPF = v => v.replace(/\D/g,'').slice(0,11)
  .replace(/(\d{3})(\d)/,'$1.$2')
  .replace(/(\d{3})(\d)/,'$1.$2')
  .replace(/(\d{3})(\d{1,2})$/,'$1-$2');

const maskPhone = v => v.replace(/\D/g,'').slice(0,11)
  .replace(/^(\d{2})(\d)/,'($1) $2')
  .replace(/(\d{5})(\d{1,4})$/,'$1-$2');

const maskCEP = v => v.replace(/\D/g,'').slice(0,8)
  .replace(/(\d{5})(\d{1,3})$/,'$1-$2');

/* ── Modal: Novo Usuário ── */
function ModalNovoUsuario({ onClose }) {
  const [form, setForm] = sysState({
    nome:'', sobrenome:'', email:'', perfil:'Secretária', unidades:[],
    /* terapeuta */
    cpf:'', crp:'', telefone:'', valorSessao:'',
    cep:'', logradouro:'', numero:'', complemento:'', bairro:'', cidade:'', uf:'',
  });

  const set = k => e => setForm(f => ({ ...f, [k]: e.target.value }));
  const setMask = (k, fn) => e => setForm(f => ({ ...f, [k]: fn(e.target.value) }));

  const buscarCep = async () => {
    const cep = form.cep.replace(/\D/g,'');
    if (cep.length !== 8) return;
    try {
      const res = await fetch(`https://viacep.com.br/ws/${cep}/json/`);
      const d = await res.json();
      if (!d.erro) setForm(f => ({ ...f, logradouro: d.logradouro||'', bairro: d.bairro||'', cidade: d.localidade||'', uf: d.uf||'' }));
    } catch(_) {}
  };

  const isTerapeuta = form.perfil === 'Terapeuta';

  const inputStyle = { padding:'9px 12px', border:'1px solid #d1d5db', borderRadius:6, fontSize:14, background:'white', outline:'none', color:'#111', width:'100%', boxSizing:'border-box' };
  const labelStyle = { fontSize:13, fontWeight:500, color:'#374151' };
  const req = <span style={{ color:C.red }}>*</span>;

  return (
    <Modal title="Novo usuário" onClose={onClose} width={520}>
      <div style={{ display:'flex', flexDirection:'column', gap:14 }}>

        {/* Nome + Sobrenome */}
        <div style={{ display:'flex', gap:12 }}>
          <div style={{ flex:1, display:'flex', flexDirection:'column', gap:5 }}>
            <label style={labelStyle}>Nome {req}</label>
            <input placeholder="Nome" value={form.nome} onChange={set('nome')} style={inputStyle} />
          </div>
          <div style={{ flex:1, display:'flex', flexDirection:'column', gap:5 }}>
            <label style={labelStyle}>Sobrenome {req}</label>
            <input placeholder="Sobrenome" value={form.sobrenome} onChange={set('sobrenome')} style={inputStyle} />
          </div>
        </div>

        {/* E-mail */}
        <div style={{ display:'flex', flexDirection:'column', gap:5 }}>
          <label style={labelStyle}>E-mail institucional {req}</label>
          <div style={{ position:'relative' }}>
            <div style={{ position:'absolute', left:12, top:'50%', transform:'translateY(-50%)', opacity:.45 }}>
              <Icon name="mail" size={15} color="#374151" />
            </div>
            <input type="email" placeholder="nome.sobrenome@conexaopsi.com.br" value={form.email} onChange={set('email')}
              style={{ ...inputStyle, paddingLeft:36 }} />
          </div>
          <span style={{ fontSize:12, color:'#6b7280' }}>A senha provisória será enviada para este endereço.</span>
        </div>

        {/* Perfil + Unidade */}
        <div style={{ display:'flex', gap:12, alignItems:'flex-start' }}>
          <div style={{ flex:'1 1 45%', display:'flex', flexDirection:'column', gap:5 }}>
            <label style={labelStyle}>Perfil {req}</label>
            <select value={form.perfil} onChange={set('perfil')}
              style={{ ...inputStyle, cursor:'pointer' }}>
              <option>Secretária</option>
              <option>Terapeuta</option>
              <option>Administrador</option>
            </select>
          </div>
          <MultiSelectUnidade
            selected={form.unidades}
            onChange={unidades => setForm(f => ({ ...f, unidades }))}
          />
        </div>

        {/* ── Campos exclusivos do Terapeuta ── */}
        {isTerapeuta && (
          <>
            {/* Seção: Perfil Profissional */}
            <div style={{ borderTop:'1px solid #e5e7eb', paddingTop:4 }}>
              <label style={{ fontSize:11, fontWeight:700, color:'#9ca3af', letterSpacing:'.06em', textTransform:'uppercase', display:'block', marginBottom:12 }}>
                Perfil Profissional
              </label>
              <div style={{ display:'flex', flexDirection:'column', gap:12 }}>
                {/* CPF + CRP */}
                <div style={{ display:'flex', gap:12 }}>
                  <div style={{ flex:1, display:'flex', flexDirection:'column', gap:5 }}>
                    <label style={labelStyle}>CPF {req}</label>
                    <input placeholder="000.000.000-00" value={form.cpf}
                      onChange={setMask('cpf', maskCPF)} style={inputStyle} />
                    <span style={{ fontSize:11, color:'#9ca3af' }}>Máscara automática · dígito verificador validado</span>
                  </div>
                  <div style={{ flex:1, display:'flex', flexDirection:'column', gap:5 }}>
                    <label style={labelStyle}>Registro profissional (CRP/CRM) {req}</label>
                    <input placeholder="06/000.000" value={form.crp} onChange={set('crp')} style={inputStyle} />
                    <span style={{ fontSize:11, color:'#9ca3af' }}>Ex: 06/123456 ou CRM-SP 123456</span>
                  </div>
                </div>
                {/* Telefone + Valor da sessão */}
                <div style={{ display:'flex', gap:12 }}>
                  <div style={{ flex:1, display:'flex', flexDirection:'column', gap:5 }}>
                    <label style={labelStyle}>Telefone</label>
                    <input placeholder="(11) 90000-0000" value={form.telefone}
                      onChange={setMask('telefone', maskPhone)} style={inputStyle} />
                  </div>
                  <div style={{ flex:1, display:'flex', flexDirection:'column', gap:5 }}>
                    <label style={labelStyle}>Valor da sessão {req}</label>
                    <div style={{ position:'relative' }}>
                      <span style={{ position:'absolute', left:12, top:'50%', transform:'translateY(-50%)', fontSize:14, color:'#6b7280', pointerEvents:'none' }}>R$</span>
                      <input type="number" placeholder="220,00" value={form.valorSessao} onChange={set('valorSessao')}
                        style={{ ...inputStyle, paddingLeft:36 }} />
                    </div>
                  </div>
                </div>
              </div>
            </div>

            {/* Seção: Endereço */}
            <div style={{ borderTop:'1px solid #e5e7eb', paddingTop:4 }}>
              <label style={{ fontSize:11, fontWeight:700, color:'#9ca3af', letterSpacing:'.06em', textTransform:'uppercase', display:'block', marginBottom:12 }}>
                Endereço
              </label>
              <div style={{ display:'flex', flexDirection:'column', gap:12 }}>
                {/* CEP + Logradouro */}
                <div style={{ display:'flex', gap:12 }}>
                  <div style={{ flex:'0 0 140px', display:'flex', flexDirection:'column', gap:5 }}>
                    <label style={labelStyle}>CEP</label>
                    <input placeholder="00000-000" value={form.cep}
                      onChange={e => setForm(f => ({ ...f, cep: maskCEP(e.target.value) }))}
                      onBlur={buscarCep} style={inputStyle} />
                  </div>
                  <div style={{ flex:1, display:'flex', flexDirection:'column', gap:5 }}>
                    <label style={labelStyle}>Rua / Logradouro</label>
                    <input placeholder="Avenida Paulista" value={form.logradouro} onChange={set('logradouro')} style={inputStyle} />
                  </div>
                </div>
                {/* Número + Complemento */}
                <div style={{ display:'flex', gap:12 }}>
                  <div style={{ flex:'0 0 120px', display:'flex', flexDirection:'column', gap:5 }}>
                    <label style={labelStyle}>Número</label>
                    <input placeholder="1000" value={form.numero} onChange={set('numero')} style={inputStyle} />
                  </div>
                  <div style={{ flex:1, display:'flex', flexDirection:'column', gap:5 }}>
                    <label style={labelStyle}>Complemento</label>
                    <input placeholder="Sala 42, Apto 3…" value={form.complemento} onChange={set('complemento')} style={inputStyle} />
                  </div>
                </div>
                {/* Bairro + Cidade + UF */}
                <div style={{ display:'flex', gap:12 }}>
                  <div style={{ flex:1, display:'flex', flexDirection:'column', gap:5 }}>
                    <label style={labelStyle}>Bairro</label>
                    <input placeholder="" value={form.bairro} onChange={set('bairro')} style={inputStyle} />
                  </div>
                  <div style={{ flex:1, display:'flex', flexDirection:'column', gap:5 }}>
                    <label style={labelStyle}>Cidade</label>
                    <input placeholder="" value={form.cidade} onChange={set('cidade')} style={inputStyle} />
                  </div>
                  <div style={{ flex:'0 0 70px', display:'flex', flexDirection:'column', gap:5 }}>
                    <label style={labelStyle}>UF</label>
                    <input placeholder="SP" value={form.uf} onChange={set('uf')} style={inputStyle} />
                  </div>
                </div>
              </div>
            </div>
          </>
        )}

        {/* Info box */}
        <div style={{ display:'flex', gap:10, padding:'12px 14px', background:'#eff6ff', borderRadius:8, border:'1px solid #bfdbfe' }}>
          <span style={{ fontSize:16, flexShrink:0, marginTop:1 }}>ℹ</span>
          <p style={{ margin:0, fontSize:13, color:'#374151', lineHeight:1.5 }}>
            O usuário será criado com status <strong>pendente</strong>. A senha provisória será enviada por e-mail e ele poderá acessar o sistema imediatamente.
          </p>
        </div>

      </div>
      <ModalActions onCancel={onClose} onConfirm={onClose} confirmLabel="Criar usuário" />
    </Modal>
  );
}

/* ── Role badge helper ── */
function RoleBadge({ role }) {
  const map = { Administrador:'admin', Secretária:'secretaria', Terapeuta:'terapeuta' };
  return <Badge variant={map[role]||'primary'}>{role}</Badge>;
}

/* ── Usuários tab ── */
function TabUsuarios() {
  const [showNew, setShowNew] = sysState(false);
  const [search, setSearch] = sysState('');
  const filtered = USERS.filter(u =>
    u.name.toLowerCase().includes(search.toLowerCase()) ||
    u.email.toLowerCase().includes(search.toLowerCase())
  );
  return (
    <div>
      <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:16 }}>
        <h2 style={{ margin:0, fontSize:16, fontWeight:600, color:'#111' }}>Gestão de Usuários</h2>
        <button onClick={() => setShowNew(true)}
          style={{ display:'flex', alignItems:'center', gap:6, padding:'8px 16px', background:C.primary, color:'white', border:'none', borderRadius:6, fontSize:13, fontWeight:600, cursor:'pointer' }}>
          + Novo usuário
        </button>
      </div>
      <div style={{ position:'relative', marginBottom:16 }}>
        <div style={{ position:'absolute', left:12, top:'50%', transform:'translateY(-50%)' }}>
          <Icon name="search" size={15} color="#9ca3af" />
        </div>
        <input placeholder="Buscar por nome, e-mail ou telefone..."
          value={search} onChange={e => setSearch(e.target.value)}
          style={{ width:'100%', padding:'9px 12px 9px 36px', border:'1px solid #e5e7eb', borderRadius:8, fontSize:14, background:'white', outline:'none', color:'#111', boxSizing:'border-box' }} />
      </div>
      <div style={{ display:'flex', flexDirection:'column', gap:0 }}>
        {filtered.map((u, i) => (
          <div key={u.id} style={{
            display:'flex', alignItems:'center', gap:14, padding:'14px 18px',
            borderBottom: i < filtered.length-1 ? '1px solid #f3f4f6' : 'none',
          }}>
            <div style={{ width:38, height:38, borderRadius:'50%', background:C.primary, display:'flex', alignItems:'center', justifyContent:'center', color:'white', fontWeight:700, fontSize:15, flexShrink:0 }}>
              {u.initials}
            </div>
            <div style={{ flex:1 }}>
              <div style={{ fontSize:14, fontWeight:600, color:'#111' }}>{u.name}</div>
              <div style={{ fontSize:12, color:'#6b7280' }}>{u.email}</div>
              <div style={{ fontSize:12, color:'#9ca3af' }}>{u.units}</div>
            </div>
            <div style={{ display:'flex', alignItems:'center', gap:8 }}>
              <RoleBadge role={u.role} />
              <Badge variant="ativo">{u.status}</Badge>
            </div>
            <div style={{ display:'flex', gap:10, color:'#9ca3af' }}>
              <button style={{ background:'none', border:'none', cursor:'pointer', color:'#9ca3af' }} title="Reset senha">
                <Icon name="lock" size={16} color="#9ca3af" />
              </button>
              <button style={{ background:'none', border:'none', cursor:'pointer', color:'#9ca3af' }} title="Editar">
                <Icon name="edit" size={16} color="#9ca3af" />
              </button>
              <button style={{ background:'none', border:'none', cursor:'pointer', color:'#9ca3af' }} title="Excluir">
                <Icon name="trash" size={16} color="#9ca3af" />
              </button>
            </div>
          </div>
        ))}
      </div>
      {showNew && <ModalNovoUsuario onClose={() => setShowNew(false)} />}
    </div>
  );
}

/* ── Auditoria tab ── */
function TabAuditoria() {
  return (
    <div>
      <h2 style={{ margin:'0 0 20px', fontSize:16, fontWeight:600, color:'#111' }}>Logs de Auditoria</h2>
      <div style={{ display:'flex', flexDirection:'column', gap:0 }}>
        {AUDIT_LOGS.map((log, i) => (
          <div key={i} style={{
            display:'flex', justifyContent:'space-between', alignItems:'flex-start',
            padding:'16px 18px',
            borderBottom: i < AUDIT_LOGS.length-1 ? '1px solid #f3f4f6' : 'none',
          }}>
            <div>
              <div style={{ fontSize:14, fontWeight:500, color:'#111', marginBottom:4 }}>{log.action}</div>
              <div style={{ fontSize:12, color:'#2563a8', fontWeight:500 }}>{log.detail}</div>
            </div>
            <span style={{ fontSize:12, color:'#9ca3af', flexShrink:0, paddingLeft:16 }}>{log.ts}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

/* ── Configurações tab ── */
function TabConfiguracoes() {
  const [secTab, setSecTab] = sysState('clinica');
  const [form, setForm] = sysState({
    /* Informações da clínica */
    clinica:'Conexão Psi', cnpj:'00.000.000/0000-00',
    telefone:'(11) 3000-0000', email:'contato@conexaopsi.com.br',
    site:'', cep:'', logradouro:'', numero:'', complemento:'', bairro:'', cidade:'', estado:'',
    /* Configurações de agendamento */
    duracao:'50', intervalo:'10',
    horaInicio:'08:00', horaFim:'20:00',
    diasAtendimento:['seg','ter','qua','qui','sex'],
    /* Configuração de consultas */
    valorSessao:'120', sessoesPackage:'4',
    formasPagamento:['PIX','Cartão de crédito','Cartão de débito','Dinheiro'],
  });
  const set = k => e => setForm(f => ({ ...f, [k]: e.target.value }));

  const inputStyle = { padding:'9px 12px', border:'1px solid #e5e7eb', borderRadius:6, fontSize:14, background:'white', outline:'none', color:'#111', width:'100%', boxSizing:'border-box' };
  const labelStyle = { fontSize:13, color:'#374151', fontWeight:500 };

  const SectionTitle = ({ children }) => (
    <div style={{ display:'flex', alignItems:'center', gap:10, marginBottom:18, paddingBottom:12, borderBottom:'1px solid #f0f2f5' }}>
      <h2 style={{ margin:0, fontSize:15, fontWeight:700, color:'#111' }}>{children}</h2>
    </div>
  );

  const Field = ({ label, hint, children, half }) => (
    <div style={{ display:'flex', flexDirection:'column', gap:5, flex: half ? '1 1 45%' : '1 1 100%' }}>
      <label style={labelStyle}>{label}</label>
      {children}
      {hint && <span style={{ fontSize:12, color:'#9ca3af' }}>{hint}</span>}
    </div>
  );

  /* CEP auto-fill */
  const buscarCep = async () => {
    const cep = form.cep.replace(/\D/g,'');
    if (cep.length !== 8) return;
    try {
      const res = await fetch(`https://viacep.com.br/ws/${cep}/json/`);
      const d = await res.json();
      if (!d.erro) setForm(f => ({ ...f, logradouro: d.logradouro||'', bairro: d.bairro||'', cidade: d.localidade||'', estado: d.uf||'' }));
    } catch(_) {}
  };

  const DIAS = [
    { key:'seg', label:'Seg' },{ key:'ter', label:'Ter' },{ key:'qua', label:'Qua' },
    { key:'qui', label:'Qui' },{ key:'sex', label:'Sex' },{ key:'sab', label:'Sáb' },{ key:'dom', label:'Dom' },
  ];
  const toggleDia = dia => setForm(f => ({
    ...f,
    diasAtendimento: f.diasAtendimento.includes(dia)
      ? f.diasAtendimento.filter(d => d !== dia)
      : [...f.diasAtendimento, dia],
  }));

  const FORMAS_DISP = ['PIX','Cartão de crédito','Cartão de débito','Dinheiro','Transferência'];
  const toggleForma = forma => setForm(f => ({
    ...f,
    formasPagamento: f.formasPagamento.includes(forma)
      ? f.formasPagamento.filter(fp => fp !== forma)
      : [...f.formasPagamento, forma],
  }));

  const TABS = [
    { id:'clinica',     label:'Informações da Clínica' },
    { id:'agendamento', label:'Agendamento' },
    { id:'consultas',   label:'Consultas' },
  ];

  return (
    <div style={{ display:'flex', flexDirection:'column', gap:0 }}>

      {/* Tab bar */}
      <div style={{ display:'flex', borderBottom:'1px solid #e5e7eb', marginBottom:24 }}>
        {TABS.map(t => {
          const isActive = secTab === t.id;
          return (
            <button key={t.id} onClick={() => setSecTab(t.id)}
              style={{
                padding:'10px 18px', border:'none',
                borderBottom: isActive ? `2px solid ${C.primary}` : '2px solid transparent',
                background:'none', cursor:'pointer', fontSize:13,
                fontWeight: isActive ? 600 : 400,
                color: isActive ? C.primary : '#6b7280',
                transition:'color .15s', whiteSpace:'nowrap',
              }}>
              {t.label}
            </button>
          );
        })}
      </div>

      <div style={{ display:'flex', flexDirection:'column', gap:14 }}>

      {/* ── 1. Informações da Clínica ── */}
      {secTab === 'clinica' && (<>
                <div style={{ display:'flex', flexDirection:'column', gap:14 }}>
          <div style={{ display:'flex', gap:14 }}>
            <Field label="Nome da clínica" half>
              <input value={form.clinica} onChange={set('clinica')} placeholder="Conexão Psi" style={inputStyle} />
            </Field>
            <Field label="CNPJ" half>
              <input value={form.cnpj} onChange={set('cnpj')} placeholder="00.000.000/0000-00" style={inputStyle} />
            </Field>
          </div>
          <div style={{ display:'flex', gap:14 }}>
            <Field label="Telefone" half>
              <input value={form.telefone} onChange={set('telefone')} placeholder="(11) 3000-0000" style={inputStyle} />
            </Field>
            <Field label="E-mail de contato" half>
              <input type="email" value={form.email} onChange={set('email')} placeholder="contato@clinica.com.br" style={inputStyle} />
            </Field>
          </div>
          <Field label="Site">
            <input value={form.site} onChange={set('site')} placeholder="https://www.conexaopsi.com.br" style={inputStyle} />
          </Field>

          {/* Endereço */}
          <div style={{ marginTop:4 }}>
            <label style={{ fontSize:12, fontWeight:700, color:'#9ca3af', letterSpacing:'.06em', textTransform:'uppercase', display:'block', marginBottom:12 }}>Endereço</label>
            <div style={{ display:'flex', flexDirection:'column', gap:10 }}>
              <Field label="CEP">
                <input value={form.cep} onChange={set('cep')} onBlur={buscarCep} placeholder="00000-000" style={inputStyle} />
              </Field>
              <Field label="Logradouro">
                <input value={form.logradouro} onChange={set('logradouro')} placeholder="Rua, Avenida…" style={inputStyle} />
              </Field>
              <div style={{ display:'flex', gap:10 }}>
                <Field label="Número" half>
                  <input value={form.numero} onChange={set('numero')} placeholder="123" style={inputStyle} />
                </Field>
                <Field label="Complemento" half>
                  <input value={form.complemento} onChange={set('complemento')} placeholder="Sala, Apto…" style={inputStyle} />
                </Field>
              </div>
              <Field label="Bairro">
                <input value={form.bairro} onChange={set('bairro')} style={inputStyle} />
              </Field>
              <div style={{ display:'flex', gap:10 }}>
                <Field label="Cidade" half>
                  <input value={form.cidade} onChange={set('cidade')} style={inputStyle} />
                </Field>
                <Field label="Estado" half>
                  <input value={form.estado} onChange={set('estado')} placeholder="UF" style={inputStyle} />
                </Field>
              </div>
            </div>
          </div>
        </div>
      </>)}

      {/* ── 2. Configurações de Agendamento ── */}
      {secTab === 'agendamento' && (<>
                <div style={{ display:'flex', flexDirection:'column', gap:14 }}>
          <div style={{ display:'flex', gap:14 }}>
            <Field label="Duração padrão da consulta (min)" half>
              <input type="number" value={form.duracao} onChange={set('duracao')} style={inputStyle} />
            </Field>
            <Field label="Intervalo entre consultas (min)" half>
              <input type="number" value={form.intervalo} onChange={set('intervalo')} style={inputStyle} />
            </Field>
          </div>
        </div>
      </>)}

      {/* ── 3. Configuração de Consultas ── */}
      {secTab === 'consultas' && (<>
                <div style={{ display:'flex', flexDirection:'column', gap:14 }}>
          <div style={{ display:'flex', gap:14 }}>
            <Field label="Valor padrão da sessão (R$)" half>
              <div style={{ position:'relative' }}>
                <span style={{ position:'absolute', left:12, top:'50%', transform:'translateY(-50%)', fontSize:14, color:'#6b7280', pointerEvents:'none' }}>R$</span>
                <input type="number" value={form.valorSessao} onChange={set('valorSessao')}
                  style={{ ...inputStyle, paddingLeft:36 }} />
              </div>
            </Field>
            <Field label="Sessões por pacote" half hint="Um pacote sempre terá esta quantidade de sessões">
              <input type="number" value={form.sessoesPackage} onChange={set('sessoesPackage')} style={inputStyle} />
            </Field>
          </div>
          <Field label="Formas de pagamento aceitas">
            <div style={{ display:'flex', flexWrap:'wrap', gap:8, marginTop:2 }}>
              {FORMAS_DISP.map(forma => {
                const ativo = form.formasPagamento.includes(forma);
                return (
                  <button key={forma} onClick={() => toggleForma(forma)}
                    style={{ padding:'6px 14px', borderRadius:20, border: ativo ? `1.5px solid ${C.primary}` : '1.5px solid #d1d5db', background: ativo ? '#eff6ff' : 'white', color: ativo ? C.primary : '#6b7280', fontSize:13, fontWeight: ativo ? 600 : 400, cursor:'pointer', transition:'all .15s' }}>
                    {forma}
                  </button>
                );
              })}
            </div>
          </Field>
        </div>
      </>)}

      </div>

      {/* Salvar */}
      <div style={{ display:'flex', justifyContent:'flex-end', paddingTop:20, marginTop:8, borderTop:'1px solid #f0f2f5' }}>
        <button style={{ padding:'9px 24px', background:C.primary, color:'white', border:'none', borderRadius:6, fontSize:14, fontWeight:600, cursor:'pointer' }}>
          Salvar configurações
        </button>
      </div>
    </div>
  );
}

/* ── Sistema page (apenas Usuários) ── */
function Sistema() {
  return (
    <div style={{ flex:1, display:'flex', flexDirection:'column', minHeight:0, background:C.pageBg }}>
      <Topbar title="Usuários" />
      <div style={{ flex:1, overflowY:'auto', padding:'24px' }}>
        <Card style={{ padding:'24px' }}>
          <TabUsuarios />
        </Card>
      </div>
    </div>
  );
}

/* ── Auditoria page ── */
function Auditoria() {
  return (
    <div style={{ flex:1, display:'flex', flexDirection:'column', minHeight:0, background:C.pageBg }}>
      <Topbar title="Auditoria" />
      <div style={{ flex:1, overflowY:'auto', padding:'24px' }}>
        <Card style={{ padding:'24px' }}>
          <TabAuditoria />
        </Card>
      </div>
    </div>
  );
}

/* ── Configurações page ── */
function Configuracoes() {
  return (
    <div style={{ flex:1, display:'flex', flexDirection:'column', minHeight:0, background:C.pageBg }}>
      <Topbar title="Configurações" />
      <div style={{ flex:1, overflowY:'auto', padding:'24px' }}>
        <Card style={{ padding:'24px' }}>
          <TabConfiguracoes />
        </Card>
      </div>
    </div>
  );
}

Object.assign(window, { Sistema, Auditoria, Configuracoes });