const CFG_TIPS = {
  razao: 'Nome jurídico completo da empresa, igual ao registrado no CNPJ e no contrato social. É o nome que aparece nas propostas e declarações enviadas aos órgãos.',
  cnpj: 'Cadastro Nacional da Pessoa Jurídica, com 14 dígitos. Identifica a empresa nos portais de compras e na emissão de certidões de regularidade fiscal.',
  fantasia: 'Nome comercial usado no dia a dia. Aparece na interface e nos e-mails, mas não substitui a razão social em documentos oficiais.',
  im: 'Número de cadastro na prefeitura da sede. Necessário para emitir nota fiscal de serviço (NFS-e) e obter a certidão negativa municipal.',
  regime: 'Forma de tributação da empresa: Lucro Real, Lucro Presumido ou Simples Nacional. Define quais impostos entram na composição de preço e no BDI.',
  porte: 'Classificação por faturamento anual. ME (até R$ 360 mil) e EPP (até R$ 4,8 mi) têm tratamento diferenciado em licitações, como cotas exclusivas e preferência no desempate (LC 123/2006).',
  endereco: 'Endereço da sede, como consta no cartão CNPJ. Usado nas propostas e para calcular a distância até as obras.',
  score: 'Nota de 0 a 100 que um edital precisa atingir no Go/No-Go para ser recomendado como "Go". Abaixo desse valor, a plataforma sugere não participar.',
  margem: 'Lucro mínimo aceitável sobre o custo direto. Propostas abaixo dessa margem recebem um alerta no Gerador de Propostas.',
  bdi: 'Benefícios e Despesas Indiretas. Percentual somado ao custo direto para cobrir administração central, seguros, riscos, impostos e lucro. Preço de venda = custo direto × (1 + BDI). Os órgãos costumam comparar com as faixas de referência do TCU.',
  raio: 'Distância máxima entre a sede e a obra que a empresa aceita atender. Editais fora desse raio perdem pontos no Go/No-Go.',
};
function ConfigScreen({ go }) {
  const NS = window.VRticeDesignSystem_d763eb;
  const { PageHeader, Button, Tabs, Card, Input, Select, Switch, Badge, Avatar, ThemeSelect, SettingRow, Toast, Alert } = NS;
  const [tab, setTab] = React.useState('organizacao');
  const [org, setOrg] = React.useState({ razao: 'Vértice Operations & Solutions S.A.', cnpj: '48.912.304/0001-88', fantasia: 'Vértice OS', im: '1.284.339-7', regime: 'Lucro Presumido', porte: 'Demais portes', endereco: 'Av. Paulista, 1842, 12º andar, São Paulo - SP', score: '70', margem: '12', bdi: '24,5', raio: '450' });
  const [intro, setIntro] = React.useState(false);
  const [toast, setToast] = React.useState('');
  const flash = t => { setToast(t); clearTimeout(window.__vxCT); window.__vxCT = setTimeout(() => setToast(''), 2400); };
  const TABS = [{ value: 'organizacao', label: 'Organização', icon: 'ph-buildings' }, { value: 'ambientes', label: 'Ambientes', icon: 'ph-stack' }, { value: 'seguranca', label: 'Segurança', icon: 'ph-shield-check' }, { value: 'preferencias', label: 'Preferências', icon: 'ph-sliders-horizontal' }];
  const O = (k, label, mono) => <Input key={k} label={label} info={CFG_TIPS[k]} mono={mono} value={org[k]} onChange={e => { const v = e.target.value; setOrg(s => ({ ...s, [k]: v })); }} />;
  const OS = (k, label, opts) => <Select key={k} label={label} info={CFG_TIPS[k]} options={opts} value={org[k]} onChange={e => { const v = e.target.value; setOrg(s => ({ ...s, [k]: v })); }} />;
  const Head = ({ title, sub, action }) => <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', gap: 16, flexWrap: 'wrap' }}><div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}><h2 style={{ margin: 0, fontSize: 20, fontWeight: 600, letterSpacing: '-0.02em' }}>{title}</h2><span style={{ fontSize: 14, color: 'var(--text-muted)' }}>{sub}</span></div>{action}</div>;
  return (
    <>
      <PageHeader eyebrow="Configurações" title="Configurações da Organização" description="Organização, ambientes, segurança e preferências." actions={<SoonBtn>Salvar Alterações</SoonBtn>} />
      <Tabs value={tab} onChange={setTab} tabs={TABS} />
      {tab === 'organizacao' && <>
        <DemoNotice>Os dados cadastrais e os parâmetros desta aba ainda não são gravados no banco, e o Go/No-Go não usa estes parâmetros.</DemoNotice>
        <Card variant="flat" padding="28px 32px" gap={22}>
          <Head title="Dados da Empresa (Tenant)" sub="Informações cadastrais da Vértice Operations & Solutions." />
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))', gap: 18 }}>
            {O('razao', 'Razão social')}{O('cnpj', 'CNPJ', true)}{O('fantasia', 'Nome fantasia')}{O('im', 'Inscrição municipal', true)}
            {OS('regime', 'Regime tributário', ['Lucro Real', 'Lucro Presumido', 'Simples Nacional'])}{OS('porte', 'Porte', ['ME', 'EPP', 'Demais portes'])}
          </div>
          {O('endereco', 'Endereço')}
        </Card>
        <Card variant="flat" padding="28px 32px" gap={22}>
          <Head title="Parâmetros de licitação" sub="Valores padrão usados pelo Go/No-Go e pelo Gerador de Propostas." />
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: 18 }}>
            {O('score', 'Score mínimo para Go', true)}{O('margem', 'Margem mínima (%)', true)}{O('bdi', 'BDI padrão (%)', true)}{O('raio', 'Raio de atuação (km)', true)}
          </div>
        </Card>
      </>}
      {tab === 'seguranca' && <>
        <Alert tone="warning" title="Controles de segurança ainda não disponíveis">O acesso usa login por e-mail e senha (Supabase Auth). Autenticação em dois fatores, login com Google, restrição por IP, expiração de sessão configurável e tokens de API não estão implementados nesta versão; por isso não podem ser ativados aqui.</Alert>
        <Card variant="flat" padding="28px 32px" gap={10}>
          <div style={{ paddingBottom: 8 }}><Head title="Segurança e Acessos" sub="Políticas de autenticação multifator e tokens de integração." /></div>
          {[['mfa', 'Autenticação em Dois Fatores (MFA obrigatório)', 'Exigir TOTP para todos os operadores de licitações.'], ['sso', 'Login com Google Workspace', 'Permitir acesso com a conta corporativa.'], ['ip', 'Restringir por endereço IP', 'Aceitar logins apenas da rede do escritório.'], ['sessao', 'Expiração de sessão', 'Tempo sem atividade até pedir login novamente.']].map(([k, t, d]) => <SettingRow key={k} title={t} description={d}><Badge variant="meta" tone="neutral">Indisponível</Badge></SettingRow>)}
        </Card>
        <Card variant="flat" padding="28px 32px" gap={14}>
          <Head title="Tokens de API" sub="Chaves usadas por integrações externas." action={<SoonBtn variant="tonal">Gerar token</SoonBtn>} />
          <span style={{ fontSize: 14, color: 'var(--text-muted)' }}>Nenhum token de API existe nesta versão. As integrações usam credenciais configuradas no servidor, fora do navegador.</span>
        </Card>
      </>}
      {tab === 'ambientes' && <><DemoNotice>A lista abaixo é ilustrativa. Os ambientes reais da sua conta aparecem no seletor de contexto do menu lateral.</DemoNotice><Card variant="flat" padding="28px 32px" gap={10}>
        <div style={{ paddingBottom: 8 }}><Head title="Ambientes" sub="Dados e permissões são isolados por ambiente da organização." action={<Button variant="secondary" icon="ph-tree-structure" onClick={() => go('orgs')}>Organizações e ambientes</Button>} /></div>
        {window.VXAdmin.ORGS[0].envs.map(e => (
          <SettingRow key={e.id} icon="ph-stack" title={e.name} description={window.VXAdmin.ENV_KIND[e.kind].label + ' · chave ' + e.key + ' · ' + e.members + (e.members === 1 ? ' membro' : ' membros')}>
            <Badge variant="meta" tone={window.VXAdmin.ENV_KIND[e.kind].tone}>{e.kind}</Badge>
          </SettingRow>))}
        <span style={{ fontSize: 13, color: 'var(--text-muted)', paddingTop: 8 }}>Usuários e integrações agora têm telas próprias: <a href="#" onClick={ev => { ev.preventDefault(); go('users'); }}>Usuários</a> · <a href="#" onClick={ev => { ev.preventDefault(); go('integrations'); }}>Integrações</a>.</span>
      </Card></>}
      {tab === 'preferencias' && <Card variant="flat" radius="lg" padding="32px 36px" gap={0}>
        <div style={{ paddingBottom: 20 }}><Head title="Preferências" sub="Ajustes da interface para o seu usuário neste navegador." /></div>
        <SettingRow title="Tema" description="Selecione sua preferência de tema.">{ThemeSelect ? <ThemeSelect onChange={v => flash('Tema ' + v.toLowerCase() + ' aplicado')} /> : null}</SettingRow>
        <SettingRow title="Menu lateral" description="Como o menu abre ao carregar uma página."><Badge variant="meta" tone="neutral">Em breve</Badge></SettingRow>
        <SettingRow title="Tamanho da interface" description="Ajuste a densidade de tabelas e textos."><Badge variant="meta" tone="neutral">Em breve</Badge></SettingRow>
        <SettingRow title="Animação de abertura" description="Oculta a animação do logo até você fechar o navegador."><Button variant="secondary" icon="ph-eye-slash" disabled={intro} onClick={() => { setIntro(true); flash('Animação oculta até fechar o navegador'); }}>{intro ? 'Oculta nesta sessão' : 'Ocultar'}</Button></SettingRow>
        <SettingRow title="Atalho da busca" description="A busca abre com ⌘ K (Mac) ou Ctrl K."><Badge variant="meta" tone="neutral">⌘ K</Badge></SettingRow>
      </Card>}
      {toast && <Toast>{toast}</Toast>}
    </>
  );
}
window.ConfigScreen = ConfigScreen;