import { useState } from 'react';
import { StatCard, Tabs } from '@cameleer/design-system';
import { useRbacStats } from '../../api/queries/admin/rbac';
import styles from './UserManagement.module.css';

// Lazy imports for tab components (will be created in tasks 17-19)
// For now, use placeholder components so the page compiles
const UsersTab = () => <div>Users tab — coming soon</div>;
const GroupsTab = () => <div>Groups tab — coming soon</div>;
const RolesTab = () => <div>Roles tab — coming soon</div>;

export default function RbacPage() {
  const { data: stats } = useRbacStats();
  const [tab, setTab] = useState('users');

  return (
    <div>
      <h2 style={{ margin: '0 0 16px' }}>User Management</h2>
      <div className={styles.statStrip}>
        <StatCard label="Users" value={stats?.userCount ?? 0} />
        <StatCard label="Groups" value={stats?.groupCount ?? 0} />
        <StatCard label="Roles" value={stats?.roleCount ?? 0} />
      </div>
      <Tabs
        tabs={[
          { label: 'Users', value: 'users' },
          { label: 'Groups', value: 'groups' },
          { label: 'Roles', value: 'roles' },
        ]}
        active={tab}
        onChange={setTab}
      />
      {tab === 'users' && <UsersTab />}
      {tab === 'groups' && <GroupsTab />}
      {tab === 'roles' && <RolesTab />}
    </div>
  );
}