// Organizações e ambientes (Administração, interno): organizações que a pessoa pode ver e, por organização,
// ambientes e equipe. Dados reais (RLS). Criar organização exige fluxo de onboarding versionado (ainda não existe).
function OrgsScreen() {
  const { PageHeader, Alert, Card, Badge, Skeleton, EmptyState, Drawer } = window.VRticeDesignSystem_d763eb;
  const [open, setOpen] = React.useState(null);
  const [st] = useRemote(async () => {
    const c = window.VxAuth.db();
    const [o, e] = await Promise.all([c.from('organizations').select('id,name,legal_name,kind,status').order('name'), c.from('environments').select('id,organization_id,key,name,kind,status').order('name')]);
    if (o.error) throw new Error(window.VxAccessAdmin.explain(o.error));
    if (e.error) throw new Error(window.VxAccessAdmin.explain(e.error));
    return (o.data || []).map(x => ({ ...x, envs: (e.data || []).filter(v => v.organization_id === x.id) }));
  }, []);
  const sel = st.data && st.data.find(x => x.id === open);
  return (
    <>
      <PageHeader size="lg" eyebrow="ADMINISTRAÇÃO" title="Organizações e ambientes" description="Organizações a que você tem acesso, seus ambientes e equipes." actions={<SoonBtn icon="ph-plus">Nova organização</SoonBtn>} />
      <Alert tone="info" title="Modelo de acesso">Organização → ambiente → papel → permissão. Um papel de um ambiente não autoriza outro ambiente, e o RLS do banco é o limite final dos dados.</Alert>
      {st.loading ? <Skeleton height={200} radius={20} />
        : st.error ? <Alert tone="danger" title="Não foi possível carregar">{st.error}</Alert>
        : !st.data.length ? <EmptyState variant="block" icon="ph-buildings" title="Nenhuma organização visível">Você não tem acesso a nenhuma organização.</EmptyState>
        : <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))', gap: 16 }}>
          {st.data.map(o => (
            <Card key={o.id} variant="flat" padding={20} gap={10} interactive onClick={() => setOpen(o.id)}>
              <strong style={{ fontSize: 16, fontWeight: 600, overflowWrap: 'anywhere' }}>{o.name}</strong>
              <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
                <Badge variant="meta" tone="info">{VX_ORG_KIND[o.kind] || o.kind}</Badge>
                <Badge variant="meta" tone={o.status === 'ACTIVE' ? 'success' : 'warning'}>{VX_ORG_STATUS[o.status] || o.status}</Badge>
              </div>
              <span style={{ fontSize: 13, color: 'var(--text-muted)' }}>{o.envs.length} {o.envs.length === 1 ? 'ambiente' : 'ambientes'}</span>
            </Card>
          ))}
        </div>}
      {sel && <Drawer kicker="Organização" title={sel.name} subtitle={(VX_ORG_KIND[sel.kind] || sel.kind) + ' · ' + (VX_ORG_STATUS[sel.status] || sel.status)} width={720} onClose={() => setOpen(null)}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
          <EnvList envs={sel.envs} />
          <TeamPanel orgId={sel.id} orgKind={sel.kind} envs={sel.envs} />
        </div>
      </Drawer>}
    </>
  );
}
window.OrgsScreen = OrgsScreen;