// ===== Empresa · perfil + equipe + permissões + histórico =====

const EMPRESA_TABS = [
  { id: "perfil",     n: "Dados da empresa", emoji: "🏢" },
  { id: "equipe",     n: "Equipe",           emoji: "👥" },
  { id: "permissoes", n: "Permissões",       emoji: "🔐" },
  { id: "historico",  n: "Histórico",        emoji: "📜" },
];

const TEAM = [
  { ini: "MS", nome: "Marcos Souza",      email: "marcos@souzaeng.com.br",    role: "admin",    ult: "agora",          ativ: 142, foto: "ink" },
  { ini: "AL", nome: "Ana Lima",          email: "ana@souzaeng.com.br",       role: "operador", ult: "há 12 min",      ativ:  87 },
  { ini: "RC", nome: "Renato Castro",     email: "renato@souzaeng.com.br",    role: "operador", ult: "há 2h",          ativ:  64 },
  { ini: "JP", nome: "Joana Pereira",     email: "joana@souzaeng.com.br",     role: "leitor",   ult: "ontem",          ativ:  19 },
  { ini: "FR", nome: "Fernanda Ribeiro",  email: "fernanda@contadora.com.br", role: "contador", ult: "há 3 dias",      ativ:   8 },
];

const ROLES = {
  admin:    { n: "Administrador", c: "bg-pleita-ink text-pleita-paper",          d: "Tudo · inclusive faturamento, equipe, exclusão de tenant" },
  operador: { n: "Operador",      c: "bg-pleita-lime/30 text-pleita-ink",        d: "Decide editais · participa de pregões · envia peças" },
  leitor:   { n: "Leitor",        c: "bg-surface-2 text-pleita-stone-2",         d: "Apenas visualiza · não toma decisões nem envia" },
  contador: { n: "Contador",      c: "bg-pleita-info/15 text-pleita-info",       d: "Acessa documentos financeiros e cofre · sem permissão para pregão" },
};

const PERMISSIONS_MATRIX = [
  { secao: "Editais",         it: ["Ver lista de oportunidades", "Aprovar veredicto do agente", "Cancelar participação"] },
  { secao: "Pregão",          it: ["Acompanhar pregão ao vivo", "Pausar o robô de lances", "Ajustar estratégia em pregão"] },
  { secao: "Cofre",           it: ["Ver documentos", "Anexar novos", "Excluir / arquivar"] },
  { secao: "Peças jurídicas", it: ["Gerar peças", "Aprovar antes do envio", "Enviar ao órgão"] },
  { secao: "Financeiro",      it: ["Ver custo de IA por tenant", "Trocar plano", "Cancelar assinatura"] },
  { secao: "Equipe",          it: ["Convidar usuários", "Trocar papéis", "Remover usuários"] },
];
const PERM_ROLES = ["admin", "operador", "leitor", "contador"];
const PERM_GRID = {
  // por linha: 1 = pode, 0 = não pode, p = pode com aprovação
  "Ver lista de oportunidades":   [1, 1, 1, 0],
  "Aprovar veredicto do agente":  [1, 1, 0, 0],
  "Cancelar participação":        [1, "p", 0, 0],
  "Acompanhar pregão ao vivo":    [1, 1, 1, 0],
  "Pausar o robô de lances":      [1, 1, 0, 0],
  "Ajustar estratégia em pregão": [1, "p", 0, 0],
  "Ver documentos":               [1, 1, 1, 1],
  "Anexar novos":                 [1, 1, 0, 1],
  "Excluir / arquivar":           [1, 0, 0, 0],
  "Gerar peças":                  [1, 1, 0, 0],
  "Aprovar antes do envio":       [1, 1, 0, 0],
  "Enviar ao órgão":              [1, "p", 0, 0],
  "Ver custo de IA por tenant":   [1, 1, 0, 1],
  "Trocar plano":                 [1, 0, 0, 0],
  "Cancelar assinatura":          [1, 0, 0, 0],
  "Convidar usuários":            [1, 0, 0, 0],
  "Trocar papéis":                [1, 0, 0, 0],
  "Remover usuários":             [1, 0, 0, 0],
};

const AUDIT = [
  { t: "agora",       who: "MS", w: "publicou", o: "edital EDT-2026-04-A1B2",            tag: "edital",   ip: "201.18.x" },
  { t: "há 8 min",    who: "AL", w: "atualizou", o: "estratégia de lances pra Equilibrada", tag: "config",   ip: "189.40.x" },
  { t: "há 12 min",   who: "AL", w: "anexou",   o: "Certidão Federal renovada",           tag: "cofre",    ip: "189.40.x" },
  { t: "há 1h",       who: "MS", w: "convidou", o: "fernanda@contadora.com.br · papel contador", tag: "equipe", ip: "201.18.x" },
  { t: "há 4h",       who: "RC", w: "gerou",    o: "minuta de impugnação · cláusula 4.3", tag: "peça",     ip: "187.12.x" },
  { t: "ontem 18:42", who: "MS", w: "alterou",  o: "papel de Ana Lima · operador → admin", tag: "equipe",   ip: "201.18.x" },
  { t: "ontem 14:08", who: "JP", w: "exportou", o: "Resultados Q1 (CSV · 487 registros)", tag: "dados",    ip: "200.55.x" },
  { t: "27/abr 09:11",who: "MS", w: "ativou",   o: "MFA obrigatório para administradores", tag: "segurança",ip: "201.18.x" },
];

function PerfilEmpresa() {
  return (
    <div className="grid lg:grid-cols-3 gap-6">
      <section className="lg:col-span-2 rounded-2xl bg-surface-card border border-pleita-line shadow-pl-sm">
        <header className="p-6 border-b border-pleita-line flex items-center justify-between">
          <h3 className="font-display text-lg text-pleita-ink">Dados cadastrais</h3>
          <button className="pl-num text-xs text-pleita-info hover:underline">Atualizar pela Receita</button>
        </header>
        <div className="p-6 grid md:grid-cols-2 gap-x-8 gap-y-5">
          {[
            ["Razão social",      "Souza Engenharia LTDA-ME"],
            ["Nome fantasia",     "Souza Engenharia"],
            ["CNPJ",              "32.948.117/0001-50"],
            ["Inscrição estadual", "742.918.301.114"],
            ["Inscrição municipal","12.847"],
            ["Porte",             "EPP — Empresa de Pequeno Porte"],
            ["Natureza jurídica", "Sociedade Empresária Limitada"],
            ["Capital social",    "R$ 250.000"],
            ["Abertura",          "14 mar 2019 · 7 anos · 2 meses"],
            ["Situação",          "ATIVA na Receita"],
          ].map(([k, v]) => (
            <div key={k}>
              <div className="pl-num text-[10px] uppercase tracking-wider text-pleita-stone-2 mb-1">{k}</div>
              <div className="text-sm text-pleita-ink">{v}</div>
            </div>
          ))}
        </div>
        <footer className="p-6 border-t border-pleita-line">
          <div className="pl-num text-[10px] uppercase tracking-wider text-pleita-stone-2 mb-2">CNAEs ativos</div>
          <div className="flex flex-wrap gap-2">
            {[
              ["42.21-9-04", "Construção de redes de energia · principal"],
              ["43.21-5-00", "Instalações elétricas prediais"],
              ["71.12-0-00", "Engenharia consultoria"],
              ["43.99-1-04", "Serviços especializados para construção"],
            ].map(([c, n]) => (
              <span key={c} className="inline-flex items-center gap-2 px-3 py-1.5 rounded-md border border-pleita-line bg-surface-2 text-xs text-pleita-ink">
                <span className="pl-num text-pleita-stone-2">{c}</span>{n}
              </span>
            ))}
          </div>
        </footer>
      </section>

      <aside className="space-y-4">
        <div className="rounded-2xl bg-surface-card border border-pleita-line p-5">
          <div className="pl-num text-[10px] uppercase tracking-wider text-pleita-stone-2 mb-2">Endereço fiscal</div>
          <div className="text-sm text-pleita-ink leading-relaxed">
            R. das Hortênsias, 482<br />
            Sala 12, Centro<br />
            Campinas — SP, 13010-110
          </div>
          <div className="mt-3 rounded-md bg-surface-2 border border-pleita-line h-24 relative overflow-hidden" style={{ backgroundImage: "linear-gradient(45deg, transparent 49%, rgb(var(--pleita-line)) 50%, transparent 51%)", backgroundSize: "16px 16px" }}>
            <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 size-3 rounded-full bg-pleita-lime ring-4 ring-pleita-paper" />
          </div>
        </div>

        <div className="rounded-2xl bg-surface-card border border-pleita-line p-5">
          <div className="pl-num text-[10px] uppercase tracking-wider text-pleita-stone-2 mb-3">Saúde da empresa</div>
          {[
            ["Receita Federal",    "regular",   "verdict-go"],
            ["Estadual SP",        "regular",   "verdict-go"],
            ["Municipal Campinas", "irregular", "verdict-stop"],
            ["FGTS",               "regular",   "verdict-go"],
            ["Trabalhista",        "regular",   "verdict-go"],
          ].map(([k, v, c]) => (
            <div key={k} className="flex items-center justify-between py-2 border-b border-pleita-line last:border-0">
              <span className="text-sm text-pleita-stone">{k}</span>
              <span className={`pl-num text-[10px] uppercase tracking-wider px-2 py-0.5 rounded font-semibold bg-${c}/15 text-${c}`}>{v}</span>
            </div>
          ))}
        </div>
      </aside>
    </div>
  );
}

function Equipe() {
  const [invite, setInvite] = React.useState(false);
  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h3 className="font-display text-lg text-pleita-ink">5 pessoas no time</h3>
          <p className="text-xs text-pleita-stone-2 mt-0.5">Plano Veterano · até 10 usuários</p>
        </div>
        <PleitaButton variant="lime" onClick={() => setInvite(true)}>
          <Icons.Plus className="size-4" /> Convidar
        </PleitaButton>
      </div>

      <div className="rounded-2xl bg-surface-card border border-pleita-line overflow-hidden">
        <div className="grid grid-cols-[1fr_140px_120px_120px_60px] px-5 py-3 bg-surface-2/40 pl-num text-[10px] uppercase tracking-wider text-pleita-stone-2">
          <div>Pessoa</div><div>Papel</div><div>Ativ. 30d</div><div>Última ação</div><div></div>
        </div>
        {TEAM.map((p, i) => (
          <div key={p.email} className={`grid grid-cols-[1fr_140px_120px_120px_60px] items-center px-5 py-4 ${i > 0 ? "border-t border-pleita-line" : ""}`}>
            <div className="flex items-center gap-3 min-w-0">
              <span className={`size-9 rounded-full grid place-items-center pl-num text-xs font-semibold shrink-0 ${p.foto === "ink" ? "bg-pleita-ink text-pleita-paper" : "bg-surface-2 text-pleita-stone"}`}>{p.ini}</span>
              <div className="min-w-0">
                <div className="text-sm text-pleita-ink truncate">{p.nome}{p.role === "admin" && <span className="ml-2 pl-num text-[9px] uppercase tracking-wider text-pleita-lime">você</span>}</div>
                <div className="pl-num text-[11px] text-pleita-stone-2 truncate">{p.email}</div>
              </div>
            </div>
            <div>
              <span className={`pl-num text-[10px] uppercase tracking-wider px-2 py-1 rounded font-semibold ${ROLES[p.role].c}`}>{ROLES[p.role].n}</span>
            </div>
            <div className="pl-num text-sm text-pleita-ink">{p.ativ}</div>
            <div className="pl-num text-xs text-pleita-stone-2">{p.ult}</div>
            <div className="text-right"><button className="size-7 rounded grid place-items-center text-pleita-stone-2 hover:bg-surface-2"><Icons.GripVertical /></button></div>
          </div>
        ))}
      </div>

      <div className="grid md:grid-cols-2 gap-4">
        <div className="rounded-2xl bg-surface-card border border-pleita-line p-5">
          <div className="font-display text-base text-pleita-ink">Convites pendentes</div>
          <div className="mt-3 p-4 rounded-md bg-surface-2 border border-pleita-line flex items-center justify-between">
            <div>
              <div className="text-sm text-pleita-ink">camila@souzaeng.com.br</div>
              <div className="pl-num text-[11px] text-pleita-stone-2 mt-0.5">papel operador · enviado ontem · expira em 6 dias</div>
            </div>
            <div className="flex gap-2"><button className="pl-num text-xs px-3 py-1.5 rounded border border-pleita-line hover:bg-surface-2">Reenviar</button><button className="pl-num text-xs text-pleita-stone-2">Cancelar</button></div>
          </div>
        </div>
        <div className="rounded-2xl bg-pleita-info/5 border border-pleita-info/30 p-5">
          <div className="text-pleita-info text-lg mb-1">💡</div>
          <div className="font-display text-base text-pleita-ink">Use papéis pra dividir bem o trabalho</div>
          <p className="text-xs text-pleita-stone leading-relaxed mt-2">
            <b>Admin</b> mexe em plano e equipe. <b>Operador</b> decide e participa de pregões. <b>Leitor</b> só acompanha — bom pra sócios distantes. <b>Contador</b> tem acesso restrito ao financeiro e cofre.
          </p>
        </div>
      </div>

      {invite && <InviteModal onClose={() => setInvite(false)} />}
    </div>
  );
}

function InviteModal({ onClose }) {
  return (
    <div className="fixed inset-0 z-50 bg-pleita-ink/40 grid place-items-center p-4" onClick={onClose}>
      <div className="w-full max-w-md rounded-2xl bg-surface-card border border-pleita-line shadow-pl-md p-6" onClick={(e) => e.stopPropagation()}>
        <div className="flex items-start justify-between mb-4">
          <div>
            <h3 className="font-display text-xl text-pleita-ink">Convidar pessoa</h3>
            <p className="text-xs text-pleita-stone-2 mt-1">Recebe e-mail com link único · expira em 7 dias.</p>
          </div>
          <button onClick={onClose} className="size-8 rounded grid place-items-center hover:bg-surface-2"><Icons.X /></button>
        </div>
        <div className="space-y-4">
          <div>
            <label className="pl-num text-[10px] uppercase tracking-wider text-pleita-stone-2">E-mail</label>
            <input placeholder="nome@empresa.com.br" className="w-full mt-1 px-3 py-2.5 rounded-md border border-pleita-line bg-surface-1 text-sm pl-num" />
          </div>
          <div>
            <label className="pl-num text-[10px] uppercase tracking-wider text-pleita-stone-2">Papel</label>
            <div className="grid grid-cols-2 gap-2 mt-1">
              {Object.entries(ROLES).map(([id, r]) => (
                <label key={id} className="flex items-start gap-2 p-3 rounded-md border border-pleita-line hover:bg-surface-2 cursor-pointer">
                  <input type="radio" name="role" defaultChecked={id === "operador"} className="mt-0.5 accent-pleita-ink" />
                  <div><div className="text-sm font-medium text-pleita-ink">{r.n}</div><div className="text-[11px] text-pleita-stone-2 leading-tight mt-0.5">{r.d}</div></div>
                </label>
              ))}
            </div>
          </div>
          <div>
            <label className="pl-num text-[10px] uppercase tracking-wider text-pleita-stone-2">Mensagem (opcional)</label>
            <textarea placeholder="Ana, te convidei pra começar a olhar os editais conosco." className="w-full mt-1 px-3 py-2 rounded-md border border-pleita-line bg-surface-1 text-sm h-20" />
          </div>
        </div>
        <div className="flex justify-end gap-2 mt-6">
          <button onClick={onClose} className="pl-num text-xs px-4 py-2 rounded-md text-pleita-stone-2 hover:text-pleita-ink">Cancelar</button>
          <PleitaButton variant="ink">Enviar convite</PleitaButton>
        </div>
      </div>
    </div>
  );
}

function Permissoes() {
  return (
    <div className="space-y-6">
      <div className="rounded-2xl bg-surface-card border border-pleita-line overflow-hidden">
        <div className="px-6 py-5 border-b border-pleita-line">
          <h3 className="font-display text-lg text-pleita-ink">Matriz de permissões</h3>
          <p className="text-xs text-pleita-stone-2 mt-1">Quem pode fazer o quê. <code className="pl-num text-[10px] px-1 py-0.5 rounded bg-surface-2">p</code> = precisa aprovação de admin.</p>
        </div>
        <div className="overflow-x-auto scrollbar-pl">
          <table className="w-full text-sm">
            <thead className="bg-surface-2/40">
              <tr>
                <th className="text-left px-6 py-3 pl-num text-[10px] uppercase tracking-wider text-pleita-stone-2 font-medium">Ação</th>
                {PERM_ROLES.map((r) => (
                  <th key={r} className="px-3 py-3 pl-num text-[10px] uppercase tracking-wider text-pleita-stone-2 font-medium text-center w-24">{ROLES[r].n}</th>
                ))}
              </tr>
            </thead>
            <tbody>
              {PERMISSIONS_MATRIX.map((s) => (
                <React.Fragment key={s.secao}>
                  <tr className="bg-surface-2/20">
                    <td colSpan={5} className="px-6 py-2 pl-num text-[10px] uppercase tracking-[0.14em] text-pleita-stone-2 font-medium">{s.secao}</td>
                  </tr>
                  {s.it.map((act) => (
                    <tr key={act} className="border-t border-pleita-line">
                      <td className="px-6 py-3 text-pleita-ink">{act}</td>
                      {PERM_GRID[act].map((v, i) => (
                        <td key={i} className="text-center">
                          {v === 1 && <span className="text-verdict-go text-base">✓</span>}
                          {v === "p" && <span className="pl-num text-[10px] px-1.5 py-0.5 rounded bg-verdict-caution/20 text-verdict-caution font-semibold">p</span>}
                          {v === 0 && <span className="text-pleita-line text-base">·</span>}
                        </td>
                      ))}
                    </tr>
                  ))}
                </React.Fragment>
              ))}
            </tbody>
          </table>
        </div>
      </div>
      <div className="rounded-2xl bg-surface-card border border-pleita-line p-6">
        <div className="font-display text-base text-pleita-ink mb-4">Aprovações pendentes</div>
        {[
          { t: "Ana Lima quer aprovar veredicto",  e: "EDT-2026-04-9F2C · TJ-MG · R$ 742k",      h: "há 22min" },
          { t: "Renato quer enviar peça ao órgão", e: "Impugnação cláusula §4 · Pref. Campinas", h: "há 1h" },
        ].map((r) => (
          <div key={r.t} className="flex items-center justify-between py-3 border-b border-pleita-line last:border-0">
            <div>
              <div className="text-sm text-pleita-ink font-medium">{r.t}</div>
              <div className="pl-num text-[11px] text-pleita-stone-2 mt-0.5">{r.e} · {r.h}</div>
            </div>
            <div className="flex gap-2">
              <button className="pl-num text-xs px-3 py-1.5 rounded border border-pleita-line hover:bg-surface-2 text-pleita-stone">Negar</button>
              <PleitaButton variant="lime" size="sm">Aprovar</PleitaButton>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

function Historico() {
  return (
    <div className="rounded-2xl bg-surface-card border border-pleita-line overflow-hidden">
      <div className="px-6 py-5 border-b border-pleita-line flex items-center justify-between">
        <div>
          <h3 className="font-display text-lg text-pleita-ink">Audit log</h3>
          <p className="text-xs text-pleita-stone-2 mt-1">Tudo que aconteceu na sua conta — imutável, retenção 7 anos.</p>
        </div>
        <div className="flex gap-2">
          <select className="pl-num text-xs px-3 py-1.5 rounded-md border border-pleita-line bg-surface-card">
            <option>Todos os tipos</option><option>edital</option><option>config</option><option>cofre</option><option>peça</option><option>equipe</option><option>segurança</option>
          </select>
          <button className="pl-num text-xs px-3 py-1.5 rounded-md border border-pleita-line hover:bg-surface-2 inline-flex items-center gap-1.5"><Icons.Download className="size-3" /> Exportar CSV</button>
        </div>
      </div>
      <div className="divide-y divide-pleita-line">
        {AUDIT.map((a, i) => (
          <div key={i} className="flex items-start gap-4 px-6 py-4">
            <div className="pl-num text-[11px] text-pleita-stone-2 w-28 shrink-0 pt-0.5">{a.t}</div>
            <div className="flex-1 min-w-0">
              <div className="text-sm text-pleita-ink leading-snug">
                <span className="font-semibold">{a.who}</span> <span className="text-pleita-stone-2">{a.w}</span> <span>{a.o}</span>
              </div>
              <div className="pl-num text-[11px] text-pleita-stone-2 mt-1 flex items-center gap-2">
                <span className="px-1.5 py-0.5 rounded bg-surface-2 text-pleita-stone">{a.tag}</span>
                <span>IP {a.ip}</span>
              </div>
            </div>
          </div>
        ))}
      </div>
      <div className="px-6 py-3 border-t border-pleita-line text-center">
        <button className="pl-num text-xs text-pleita-info hover:underline">Ver mais 132 eventos →</button>
      </div>
    </div>
  );
}

function ScreenEmpresa({ beginnerMode, setBeginnerMode }) {
  const [tab, setTab] = React.useState("perfil");
  const [navOpen, setNavOpen] = React.useState(false);
  const Active = { perfil: PerfilEmpresa, equipe: Equipe, permissoes: Permissoes, historico: Historico }[tab];
  return (
    <div className="h-full flex bg-pleita-paper">
      <Sidebar beginnerMode={beginnerMode} setBeginnerMode={setBeginnerMode} active="empresa" mobileOpen={navOpen} onCloseMobile={() => setNavOpen(false)} />
      <div className="flex-1 flex flex-col min-w-0">
        <Topbar crumb={["Configurações", "Empresa"]} onOpenMobileNav={() => setNavOpen(true)} />
        <main className="flex-1 overflow-y-auto scrollbar-pl">
          <div className="max-w-7xl mx-auto px-4 md:px-8 py-8">
            <SectionHeader
              eyebrow="Configurações"
              title="Sua empresa, do CNPJ até quem tem o que tocar"
              description="O perfil completo da Souza Engenharia e quem pode fazer o quê dentro da Pleita."
            />
            <nav className="flex items-center gap-1 mb-6 border-b border-pleita-line">
              {EMPRESA_TABS.map((t) => (
                <button
                  key={t.id}
                  onClick={() => setTab(t.id)}
                  className={`px-4 py-3 text-sm border-b-2 transition-colors inline-flex items-center gap-2 ${tab === t.id ? "border-pleita-ink text-pleita-ink font-semibold" : "border-transparent text-pleita-stone-2 hover:text-pleita-ink"}`}
                >
                  <span>{t.emoji}</span>{t.n}
                </button>
              ))}
            </nav>
            <Active />
          </div>
        </main>
      </div>
    </div>
  );
}

Object.assign(window, { ScreenEmpresa });