import React, { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { SettingsUsersPage } from './SettingsUsers';
import { SettingsRolesPage } from './SettingsRoles';
import { SettingsGroupsPage } from './SettingsGroups';

export function SettingsUserManagementPage() {
  const { t } = useTranslation();
  const [activeTab, setActiveTab] = useState('users');

  const tabs = [
    { key: 'users', label: t('settings.users', 'Benutzer') },
    { key: 'roles', label: t('settings.roles', 'Rollen') },
    { key: 'groups', label: t('settings.groups', 'Gruppen') },
  ];

  return (
    <div className="space-y-6" data-testid="settings-user-management-page">
      <h1 className="text-2xl font-bold text-secondary-900">Nutzerverwaltung</h1>

      <div className="border-b border-secondary-200">
        <nav className="flex gap-4" role="tablist" aria-label="Nutzerverwaltung Tabs">
          {tabs.map((tab) => (
            <button
              key={tab.key}
              onClick={() => setActiveTab(tab.key)}
              role="tab"
              aria-selected={activeTab === tab.key}
              className={`px-4 py-2 text-sm font-medium border-b-2 transition-colors ${
                activeTab === tab.key
                  ? 'border-primary-500 text-primary-700'
                  : 'border-transparent text-secondary-600 hover:text-secondary-900 hover:border-secondary-300'
              }`}
            >
              {tab.label}
            </button>
          ))}
        </nav>
      </div>

      <div role="tabpanel">
        {activeTab === 'users' && <SettingsUsersPage />}
        {activeTab === 'roles' && <SettingsRolesPage />}
        {activeTab === 'groups' && <SettingsGroupsPage />}
      </div>
    </div>
  );
}