import React, { useState, useEffect, useCallback, useRef } from 'react';
import Box from '@mui/material/Box';
import Paper from '@mui/material/Paper';
import Table from '@mui/material/Table';
import TableBody from '@mui/material/TableBody';
import TableCell from '@mui/material/TableCell';
import TableContainer from '@mui/material/TableContainer';
import TableHead from '@mui/material/TableHead';
import TableRow from '@mui/material/TableRow';
import Typography from '@mui/material/Typography';
import Chip from '@mui/material/Chip';
import IconButton from '@mui/material/IconButton';
import TextField from '@mui/material/TextField';
import InputAdornment from '@mui/material/InputAdornment';
import Tooltip from '@mui/material/Tooltip';
import Tabs from '@mui/material/Tabs';
import Tab from '@mui/material/Tab';
import Button from '@mui/material/Button';
import Select from '@mui/material/Select';
import MenuItem from '@mui/material/MenuItem';
import FormControl from '@mui/material/FormControl';
import InputLabel from '@mui/material/InputLabel';
import Alert from '@mui/material/Alert';
import Dialog from '@mui/material/Dialog';
import DialogTitle from '@mui/material/DialogTitle';
import DialogContent from '@mui/material/DialogContent';
import DialogActions from '@mui/material/DialogActions';
import CircularProgress from '@mui/material/CircularProgress';
import TablePagination from '@mui/material/TablePagination';
import Stepper from '@mui/material/Stepper';
import { default as MuiStep } from '@mui/material/Step';
import StepLabel from '@mui/material/StepLabel';
import SettingsIcon from '@mui/icons-material/Settings';
import CalendarMonthIcon from '@mui/icons-material/CalendarMonth';
import QrCode2Icon from '@mui/icons-material/QrCode2';
import SearchIcon from '@mui/icons-material/Search';
import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
import AssessmentIcon from '@mui/icons-material/Assessment';
import ReceiptLongIcon from '@mui/icons-material/ReceiptLong';
import SmartphoneIcon from '@mui/icons-material/Smartphone';
import PersonOffIcon from '@mui/icons-material/PersonOff';
import PersonAddIcon from '@mui/icons-material/PersonAdd';
import PersonRemoveIcon from '@mui/icons-material/PersonRemove';
import CheckCircleIcon from '@mui/icons-material/CheckCircle';
import CancelIcon from '@mui/icons-material/Cancel';
import GroupIcon from '@mui/icons-material/Group';
import PeopleOutlineIcon from '@mui/icons-material/PeopleOutline';
import Joyride, { Step, CallBackProps, STATUS, EVENTS } from 'react-joyride';
import axios from 'axios';
import { Trans, t } from '@lingui/macro';
import { useLingui } from '@lingui/react';
import UserSettingsModal from '../components/UserSettingsModal';
import UserShiftCalendarModal from '../components/UserShiftCalendarModal';
import UserDevicePairingModal from '../components/UserDevicePairingModal';
import UserStatisticsModal from '../components/UserStatisticsModal';
import UserDeviceInfoModal from '../components/UserDeviceInfoModal';
import TimeReportModal from '../components/TimeReportModal';
import UserAvatar from '../components/UserAvatar';
import LoadingState from '../components/shared/LoadingState';
import ErrorAlert from '../components/shared/ErrorAlert';
import ConfirmDialog, { useConfirmDialog } from '../components/shared/ConfirmDialog';
import EmptyState from '../components/shared/EmptyState';
import { getContrastColor } from '../utils/colorUtils';
import { handleApiError } from '../utils/errorHandler';
import { useTour, TOUR_IDS } from '../hooks/useTour';
import useUserPermissions from '../hooks/useUserPermissions';
import { useToast } from '../components/shared/ToastProvider';

interface UserRole {
  role_id: number;
  role_name: string;
  role_color: string;
}

interface LinkedDevice {
  device_id: number;
  device_name: string | null;
  device_type: string;
  device_model: string | null;
  paired_at: string | null;
  last_active_at: string | null;
}

interface User {
  usr_id: number;
  usr_Name: string;
  usr_Vorname: string;
  full_name: string;
  initials: string;
  photourl?: string | null;
  departments: string[];
  department_string: string;
  roles: UserRole[];
  linked_device: LinkedDevice | null;
}

interface SystemUser {
  usr_id: number;
  usr_Name: string;
  usr_Vorname: string;
  full_name: string;
  initials: string;
  photourl?: string | null;
  departments: string[];
  department_string: string;
  zeiterfassung_active: boolean;
  zeiterfassung_level: 'zeiterfassung' | 'zeiterfassung_planner' | 'zeiterfassung_admin' | null;
  can_deactivate?: boolean;
}

interface ActivationLimit {
  limit: number;
  active_count: number;
  remaining: number;
  unlimited: boolean;
  license_missing?: boolean;
}

interface SelectedUser {
  id: number;
  name: string;
  photourl?: string | null;
  initials: string;
}

type PermissionLevel = 'zeiterfassung' | 'zeiterfassung_planner' | 'zeiterfassung_admin';

const STORAGE_KEY = 'zeiterfassung_users_tab_state';

const loadPersistedState = () => {
  try {
    const raw = sessionStorage.getItem(STORAGE_KEY);
    if (raw) return JSON.parse(raw);
  } catch { /* ignore */ }
  return {};
};

const persistState = (patch: Record<string, number>) => {
  try {
    const current = loadPersistedState();
    sessionStorage.setItem(STORAGE_KEY, JSON.stringify({ ...current, ...patch }));
  } catch { /* ignore */ }
};

const UsersTab = () => {
  const { i18n } = useLingui();
  const toast = useToast();
  const { confirm, dialogProps } = useConfirmDialog();
  const { permissions } = useUserPermissions();

  const persisted = loadPersistedState();
  const [subTab, setSubTab] = useState<number>(persisted.subTab ?? 0);
  // Active Users State
  const [users, setUsers] = useState<User[]>([]);
  const [filteredUsers, setFilteredUsers] = useState<User[]>([]);
  const [searchTerm, setSearchTerm] = useState('');
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [page, setPage] = useState<number>(persisted.page ?? 0);
  const [rowsPerPage, setRowsPerPage] = useState<number>(persisted.rowsPerPage ?? 10);

  // System Users State
  const [systemUsers, setSystemUsers] = useState<SystemUser[]>([]);
  const [filteredSystemUsers, setFilteredSystemUsers] = useState<SystemUser[]>([]);
  const [systemSearchTerm, setSystemSearchTerm] = useState('');
  const [systemLoading, setSystemLoading] = useState(false);
  const [systemError, setSystemError] = useState<string | null>(null);
  const [activationLimit, setActivationLimit] = useState<ActivationLimit | null>(null);
  const [systemPage, setSystemPage] = useState<number>(persisted.systemPage ?? 0);
  const [systemRowsPerPage, setSystemRowsPerPage] = useState<number>(persisted.systemRowsPerPage ?? 10);

  // Modals State
  const [settingsModalOpen, setSettingsModalOpen] = useState(false);
  const [calendarModalOpen, setCalendarModalOpen] = useState(false);
  const [pairingModalOpen, setPairingModalOpen] = useState(false);
  const [statisticsModalOpen, setStatisticsModalOpen] = useState(false);
  const [deviceInfoModalOpen, setDeviceInfoModalOpen] = useState(false);
  const [timeReportModalOpen, setTimeReportModalOpen] = useState(false);
  const [selectedUser, setSelectedUser] = useState<SelectedUser | null>(null);
  const [selectedDevice, setSelectedDevice] = useState<LinkedDevice | null>(null);

  // Activation Dialog State
  const [activationDialogOpen, setActivationDialogOpen] = useState(false);
  const [userToActivate, setUserToActivate] = useState<SystemUser | null>(null);
  const [selectedLevel, setSelectedLevel] = useState<PermissionLevel>('zeiterfassung');
  const [activating, setActivating] = useState(false);

  // Onboarding wizard state
  const [wizardStep, setWizardStep] = useState<number>(0);
  const [onboardingStartDate, setOnboardingStartDate] = useState<string>('');
  const [onboardingWeeklyHours, setOnboardingWeeklyHours] = useState<number>(40);
  const [onboardingDistrict, setOnboardingDistrict] = useState<string>('');
  const [onboardingVacationDays, setOnboardingVacationDays] = useState<number>(30);
  const [onboardingRoleIds, setOnboardingRoleIds] = useState<number[]>([]);
  const [onboardingRoles, setOnboardingRoles] = useState<Array<{zr_id: number; zr_name: string; zr_color: string}>>([]);
  const [onboardingRolesLoading, setOnboardingRolesLoading] = useState<boolean>(false);
  const [isExistingEmployee, setIsExistingEmployee] = useState<boolean>(false);
  const [hasExistingSettings, setHasExistingSettings] = useState<boolean>(false);
  const [onboardingVacationDaysTaken, setOnboardingVacationDaysTaken] = useState<number>(0);
  const [onboardingOvertimeBalance, setOnboardingOvertimeBalance] = useState<number>(0);

  const {
    runTour,
    setRunTour,
    tourStepIndex,
    setTourStepIndex,
    markTourCompleted,
  } = useTour(TOUR_IDS.ZEITERFASSUNG_USERS, true, 500);

  // Fetch active users (users with zeiterfassung permission)
  const fetchUsers = useCallback(async () => {
    try {
      setLoading(true);
      setError(null);
      const response = await axios.get('/zeiterfassung/users');
      setUsers(response.data);
      setFilteredUsers(response.data);
    } catch (err) {
      const errorMessage = handleApiError('UsersTab.fetchUsers', err);
      setError(errorMessage);
    } finally {
      setLoading(false);
    }
  }, []);

  // Fetch all system users
  const fetchSystemUsers = useCallback(async () => {
    try {
      setSystemLoading(true);
      setSystemError(null);
      const [usersRes, limitRes] = await Promise.all([
        axios.get('/zeiterfassung/system-users'),
        axios.get('/zeiterfassung/activation-limit'),
      ]);
      setSystemUsers(usersRes.data);
      setFilteredSystemUsers(usersRes.data);
      setActivationLimit(limitRes.data);
    } catch (err) {
      const errorMessage = handleApiError('UsersTab.fetchSystemUsers', err);
      setSystemError(errorMessage);
    } finally {
      setSystemLoading(false);
    }
  }, []);

  useEffect(() => {
    fetchUsers();
  }, [fetchUsers]);

  // Reset to active users tab if user lacks admin access
  useEffect(() => {
    if (subTab === 1 && !permissions.hasAdminAccess) {
      setSubTab(0);
    }
  }, [subTab, permissions.hasAdminAccess]);

  useEffect(() => {
    // Only fetch system users if user has admin access
    if (subTab === 1 && systemUsers.length === 0 && permissions.hasAdminAccess) {
      fetchSystemUsers();
    }
  }, [subTab, systemUsers.length, fetchSystemUsers, permissions.hasAdminAccess]);

  // Persist tab/pagination state to sessionStorage
  useEffect(() => {
    persistState({ subTab, page, rowsPerPage, systemPage, systemRowsPerPage });
  }, [subTab, page, rowsPerPage, systemPage, systemRowsPerPage]);

  // Filter active users
  const prevSearchRef = useRef(searchTerm);
  useEffect(() => {
    if (prevSearchRef.current !== searchTerm) {
      setPage(0); // Reset to first page only when search changes
      prevSearchRef.current = searchTerm;
    }
    if (searchTerm.trim() === '') {
      setFilteredUsers(users);
    } else {
      const search = searchTerm.toLowerCase();
      setFilteredUsers(
        users.filter(
          (user) =>
            user.full_name.toLowerCase().includes(search) ||
            user.department_string.toLowerCase().includes(search)
        )
      );
    }
  }, [searchTerm, users]);

  // Clamp page if it exceeds available pages (e.g. after data changes)
  useEffect(() => {
    if (filteredUsers.length > 0) {
      const maxPage = Math.max(0, Math.ceil(filteredUsers.length / rowsPerPage) - 1);
      if (page > maxPage) setPage(maxPage);
    }
  }, [filteredUsers.length, rowsPerPage, page]);

  useEffect(() => {
    if (filteredSystemUsers.length > 0) {
      const maxPage = Math.max(0, Math.ceil(filteredSystemUsers.length / systemRowsPerPage) - 1);
      if (systemPage > maxPage) setSystemPage(maxPage);
    }
  }, [filteredSystemUsers.length, systemRowsPerPage, systemPage]);

  // Filter system users
  const prevSystemSearchRef = useRef(systemSearchTerm);
  useEffect(() => {
    if (prevSystemSearchRef.current !== systemSearchTerm) {
      setSystemPage(0); // Reset to first page only when search changes
      prevSystemSearchRef.current = systemSearchTerm;
    }
    if (systemSearchTerm.trim() === '') {
      setFilteredSystemUsers(systemUsers);
    } else {
      const search = systemSearchTerm.toLowerCase();
      setFilteredSystemUsers(
        systemUsers.filter(
          (user) =>
            user.full_name.toLowerCase().includes(search) ||
            user.department_string.toLowerCase().includes(search)
        )
      );
    }
  }, [systemSearchTerm, systemUsers]);

  const openModal = (
    modalSetter: React.Dispatch<React.SetStateAction<boolean>>,
    user: User
  ) => {
    setSelectedUser({
      id: user.usr_id,
      name: user.full_name,
      photourl: user.photourl,
      initials: user.initials,
    });
    modalSetter(true);
  };

  const closeModal = (modalSetter: React.Dispatch<React.SetStateAction<boolean>>) => {
    modalSetter(false);
    setSelectedUser(null);
  };

  const updateUserInLists = (userId: number, updateFn: (user: User) => User) => {
    setUsers((prev) => prev.map((user) => (user.usr_id === userId ? updateFn(user) : user)));
    setFilteredUsers((prev) => prev.map((user) => (user.usr_id === userId ? updateFn(user) : user)));
  };

  const handleUserUpdated = (updatedUser: User) => {
    updateUserInLists(updatedUser.usr_id, () => updatedUser);
  };

  const handleDeviceInfo = (user: User, device: LinkedDevice) => {
    setSelectedUser({
      id: user.usr_id,
      name: user.full_name,
      photourl: user.photourl,
      initials: user.initials,
    });
    setSelectedDevice(device);
    setDeviceInfoModalOpen(true);
  };

  const handleCloseDeviceInfo = () => {
    setDeviceInfoModalOpen(false);
    setSelectedUser(null);
    setSelectedDevice(null);
  };

  const handleUnlinkDevice = async () => {
    if (!selectedUser) return;

    try {
      await axios.delete(`/zeiterfassung/users/${selectedUser.id}/device`);
      updateUserInLists(selectedUser.id, (user) => ({
        ...user,
        linked_device: null,
        photourl: null,
      }));
      handleCloseDeviceInfo();
    } catch (err) {
      const errorMessage = handleApiError('UsersTab.handleUnlinkDevice', err);
      toast.error({ title: i18n._(t`Fehler`), description: errorMessage });
    }
  };

  const germanStates: string[] = [
    'Baden-Württemberg', 'Bayern', 'Berlin', 'Brandenburg', 'Bremen', 'Hamburg',
    'Hessen', 'Mecklenburg-Vorpommern', 'Niedersachsen', 'Nordrhein-Westfalen',
    'Rheinland-Pfalz', 'Saarland', 'Sachsen', 'Sachsen-Anhalt', 'Schleswig-Holstein', 'Thüringen',
  ];

  const wizardSteps: string[] = ['Beschäftigung', 'Urlaub', 'Rollen', 'Zusammenfassung'];

  const calculateProratedVacation = (startDate: string, contractDays: number): { prorated: number; employedMonths: number } => {
    if (!startDate) return { prorated: contractDays, employedMonths: 12 };
    const date = new Date(startDate);
    const currentYear: number = new Date().getFullYear();
    const startYear: number = date.getFullYear();

    if (startYear > currentYear) return { prorated: 0, employedMonths: 0 };
    if (startYear < currentYear) return { prorated: contractDays, employedMonths: 12 };

    const startMonth: number = date.getMonth();
    const notEmployedMonths: number = startMonth;
    const employedMonths: number = 12 - notEmployedMonths;
    const prorated: number = Math.max(0, contractDays - (contractDays / 12 * notEmployedMonths));
    return { prorated: Math.round(prorated * 10) / 10, employedMonths };
  };

  const fetchExistingSettings = async (userId: number) => {
    try {
      const response = await axios.get(`/zeiterfassung/users/${userId}/settings`);
      const data = response.data;
      const settings = data.settings;

      // Check if user has meaningful existing settings (was previously active)
      if (settings && (settings.us_required_hours_per_week || settings.us_employment_start_date || settings.us_work_district)) {
        setIsExistingEmployee(true);
        setHasExistingSettings(true);
        setOnboardingWeeklyHours(parseFloat(settings.us_required_hours_per_week) || 40);
        setOnboardingDistrict(settings.us_work_district || '');
        setOnboardingVacationDays(settings.us_vacation_days_allowed || 30);
        if (data.employment_start_date) {
          setOnboardingStartDate(data.employment_start_date);
        }
        if (settings.us_vacation_days_taken_before_system != null) {
          setOnboardingVacationDaysTaken(parseFloat(settings.us_vacation_days_taken_before_system) || 0);
        }
        // Pre-select existing roles
        if (data.user_roles && data.user_roles.length > 0) {
          setOnboardingRoleIds(data.user_roles.map((r: { role_id: number }) => r.role_id));
        }
      }
    } catch {
      // Settings don't exist yet — this is a new user, keep defaults
    }
  };

  const fetchOnboardingRoles = async () => {
    try {
      setOnboardingRolesLoading(true);
      const response = await axios.get('/zeiterfassung/roles');
      setOnboardingRoles(response.data);
    } catch (err) {
      handleApiError('UsersTab.fetchOnboardingRoles', err);
      setOnboardingRoles([]);
    } finally {
      setOnboardingRolesLoading(false);
    }
  };

  // Activation handlers
  const handleOpenActivationDialog = (user: SystemUser) => {
    setUserToActivate(user);
    setSelectedLevel(user.zeiterfassung_level || 'zeiterfassung');
    setWizardStep(0);
    setOnboardingStartDate('');
    setOnboardingWeeklyHours(40);
    setOnboardingDistrict('');
    setOnboardingVacationDays(30);
    setOnboardingRoleIds([]);
    setIsExistingEmployee(false);
    setHasExistingSettings(false);
    setOnboardingVacationDaysTaken(0);
    setOnboardingOvertimeBalance(0);
    setActivationDialogOpen(true);
    fetchOnboardingRoles();
    fetchExistingSettings(user.usr_id);
  };

  const handleCloseActivationDialog = () => {
    setActivationDialogOpen(false);
    setUserToActivate(null);
    setSelectedLevel('zeiterfassung');
    setWizardStep(0);
    setOnboardingStartDate('');
    setOnboardingWeeklyHours(40);
    setOnboardingDistrict('');
    setOnboardingVacationDays(30);
    setOnboardingRoleIds([]);
    setOnboardingRoles([]);
    setIsExistingEmployee(false);
    setHasExistingSettings(false);
    setOnboardingVacationDaysTaken(0);
    setOnboardingOvertimeBalance(0);
  };

  const handleActivateUser = async () => {
    if (!userToActivate) return;

    try {
      setActivating(true);
      await axios.post(`/zeiterfassung/users/${userToActivate.usr_id}/activate`, {
        level: selectedLevel,
        start_date: onboardingStartDate || undefined,
        vacation_days: onboardingVacationDays,
        weekly_hours: onboardingWeeklyHours,
        district: onboardingDistrict || undefined,
        role_ids: onboardingRoleIds,
        is_existing_employee: isExistingEmployee || undefined,
        vacation_days_taken: isExistingEmployee ? onboardingVacationDaysTaken : undefined,
        overtime_balance_hours: isExistingEmployee ? onboardingOvertimeBalance : undefined,
      });

      // Update local state - admins cannot be deactivated
      const canDeactivate = selectedLevel !== 'zeiterfassung_admin';
      setSystemUsers((prev) =>
        prev.map((u) =>
          u.usr_id === userToActivate.usr_id
            ? { ...u, zeiterfassung_active: true, zeiterfassung_level: selectedLevel, can_deactivate: canDeactivate }
            : u
        )
      );
      setFilteredSystemUsers((prev) =>
        prev.map((u) =>
          u.usr_id === userToActivate.usr_id
            ? { ...u, zeiterfassung_active: true, zeiterfassung_level: selectedLevel, can_deactivate: canDeactivate }
            : u
        )
      );

      // Refresh activation limit
      const limitRes = await axios.get('/zeiterfassung/activation-limit');
      setActivationLimit(limitRes.data);

      // Also refresh active users list
      fetchUsers();

      handleCloseActivationDialog();
    } catch (err: any) {
      const errorMessage = err.response?.data?.error || handleApiError('UsersTab.handleActivateUser', err);
      toast.error({ title: i18n._(t`Fehler`), description: errorMessage });
    } finally {
      setActivating(false);
    }
  };

  const handleDeactivateUser = async (user: SystemUser) => {
    if (!(await confirm({ title: i18n._(t`Benutzer deaktivieren`), message: i18n._(t`Möchten Sie "${user.full_name}" wirklich von der Zeiterfassung deaktivieren?`), color: 'warning' }))) {
      return;
    }

    try {
      await axios.post(`/zeiterfassung/users/${user.usr_id}/deactivate`);

      // Update local state
      setSystemUsers((prev) =>
        prev.map((u) =>
          u.usr_id === user.usr_id
            ? { ...u, zeiterfassung_active: false, zeiterfassung_level: null, can_deactivate: false }
            : u
        )
      );
      setFilteredSystemUsers((prev) =>
        prev.map((u) =>
          u.usr_id === user.usr_id
            ? { ...u, zeiterfassung_active: false, zeiterfassung_level: null, can_deactivate: false }
            : u
        )
      );

      // Refresh activation limit
      const limitRes = await axios.get('/zeiterfassung/activation-limit');
      setActivationLimit(limitRes.data);

      // Also refresh active users list
      fetchUsers();
    } catch (err) {
      const errorMessage = handleApiError('UsersTab.handleDeactivateUser', err);
      toast.error({ title: i18n._(t`Fehler`), description: errorMessage });
    }
  };

  const handleUpdateLevel = async (user: SystemUser, newLevel: PermissionLevel) => {
    try {
      await axios.put(`/zeiterfassung/users/${user.usr_id}/level`, {
        level: newLevel,
      });

      // Update local state - admins cannot be deactivated
      const canDeactivate = newLevel !== 'zeiterfassung_admin';
      setSystemUsers((prev) =>
        prev.map((u) =>
          u.usr_id === user.usr_id ? { ...u, zeiterfassung_level: newLevel, can_deactivate: canDeactivate } : u
        )
      );
      setFilteredSystemUsers((prev) =>
        prev.map((u) =>
          u.usr_id === user.usr_id ? { ...u, zeiterfassung_level: newLevel, can_deactivate: canDeactivate } : u
        )
      );
    } catch (err) {
      const errorMessage = handleApiError('UsersTab.handleUpdateLevel', err);
      toast.error({ title: i18n._(t`Fehler`), description: errorMessage });
    }
  };

  const tourSteps: Step[] = [
    { target: 'body', content: i18n._(t`Willkommen zur Benutzerverwaltung! Hier können Sie alle Mitarbeiter verwalten und ihre Rollen zuweisen.`), placement: 'center' },
    { target: '.search-users', content: i18n._(t`Suchen Sie Mitarbeiter nach Name oder Abteilung.`), disableBeacon: true },
    { target: '.users-table', content: i18n._(t`Diese Tabelle zeigt alle Mitarbeiter mit ihren Rollen und Abteilungen.`), disableBeacon: true },
    { target: '.users-table tbody tr:first-child td:last-child', content: i18n._(t`Nutzen Sie das Kalender-Icon um die Schichten eines Mitarbeiters anzuzeigen und zu exportieren.`), disableBeacon: true },
    { target: '.user-settings-button', content: i18n._(t`Klicken Sie auf das Einstellungen-Icon um Rollen für einen Mitarbeiter zu verwalten.`), disableBeacon: true },
  ];

  const handleJoyrideCallback = (data: CallBackProps) => {
    const { status, type, index } = data;
    if (([STATUS.FINISHED, STATUS.SKIPPED] as string[]).includes(status)) {
      markTourCompleted();
    } else if (type === EVENTS.STEP_AFTER || type === EVENTS.TARGET_NOT_FOUND) {
      setTourStepIndex(index + (type === EVENTS.STEP_AFTER ? 1 : 0));
    }
  };

  const renderDepartments = (departments: string[]) =>
    departments.length > 0 ? (
      <Box sx={{ display: 'flex', gap: 0.5, flexWrap: 'wrap', alignItems: 'center' }}>
        {departments.slice(0, 3).map((dept, index) => (
          <Chip key={index} label={dept} size="small" variant="outlined" />
        ))}
        {departments.length > 3 && (
          <Tooltip title={departments.slice(3).join(', ')}>
            <Chip label={`+${departments.length - 3}`} size="small" variant="outlined" />
          </Tooltip>
        )}
      </Box>
    ) : (
      <Typography variant="body2" color="text.secondary">
        <Trans>Keine Abteilung</Trans>
      </Typography>
    );

  const renderRoles = (roles: UserRole[]) =>
    roles.length > 0 ? (
      <Box sx={{ display: 'flex', gap: 0.5, flexWrap: 'wrap' }}>
        {roles.map((role) => (
          <Chip
            key={role.role_id}
            label={role.role_name}
            size="small"
            sx={{
              backgroundColor: role.role_color,
              color: getContrastColor(role.role_color),
              fontWeight: 500,
            }}
          />
        ))}
      </Box>
    ) : (
      <Typography variant="body2" color="text.secondary">
        <Trans>Keine Rollen</Trans>
      </Typography>
    );

  const renderActionButton = (
    title: string,
    icon: React.ReactNode,
    onClick: () => void,
    color: 'primary' | 'success' = 'primary',
    className?: string
  ) => (
    <Tooltip title={title}>
      <IconButton onClick={onClick} size="small" color={color} className={className}>
        {icon}
      </IconButton>
    </Tooltip>
  );

  const renderUserCell = (user: User | SystemUser) => (
    <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
      <UserAvatar
        photoUrl={user.photourl}
        initials={user.initials}
        fullName={user.full_name}
        sx={{ width: 40, height: 40, fontSize: '1rem', fontWeight: 600 }}
      />
      <Typography variant="body1">{user.full_name}</Typography>
    </Box>
  );

  const renderActionsCell = (user: User) => (
    <Box sx={{ display: 'flex', gap: 0.5, justifyContent: 'flex-end' }}>
      {renderActionButton(i18n._(t`Gerät koppeln`), <QrCode2Icon />, () => openModal(setPairingModalOpen, user))}
      {user.linked_device &&
        renderActionButton(
          user.linked_device.device_name
            ? i18n._(t`Geräteinformationen: ${user.linked_device.device_name} (${user.linked_device.device_type})`)
            : i18n._(t`Geräteinformationen: ${user.linked_device.device_type}`),
          <SmartphoneIcon />,
          () => handleDeviceInfo(user, user.linked_device!),
          'success'
        )}
      {renderActionButton(i18n._(t`Schichten anzeigen`), <CalendarMonthIcon />, () => openModal(setCalendarModalOpen, user))}
      {renderActionButton(i18n._(t`Statistiken`), <AssessmentIcon />, () => openModal(setStatisticsModalOpen, user))}
      {permissions.hasAdminAccess && renderActionButton(i18n._(t`Stempelkarte`), <ReceiptLongIcon />, () => openModal(setTimeReportModalOpen, user))}
      {renderActionButton(i18n._(t`Einstellungen`), <SettingsIcon />, () => openModal(setSettingsModalOpen, user), 'primary', 'user-settings-button')}
    </Box>
  );

  const getLevelLabel = (level: PermissionLevel | null): string => {
    switch (level) {
      case 'zeiterfassung_admin':
        return i18n._(t`Admin`);
      case 'zeiterfassung_planner':
        return i18n._(t`Planer`);
      case 'zeiterfassung':
        return i18n._(t`Benutzer`);
      default:
        return '-';
    }
  };

  const getLevelColor = (level: PermissionLevel | null): 'error' | 'warning' | 'info' | 'default' => {
    switch (level) {
      case 'zeiterfassung_admin':
        return 'error';
      case 'zeiterfassung_planner':
        return 'warning';
      case 'zeiterfassung':
        return 'info';
      default:
        return 'default';
    }
  };

  const renderSystemUserActionsCell = (user: SystemUser) => (
    <Box sx={{ display: 'flex', gap: 1, justifyContent: 'flex-end', alignItems: 'center' }}>
      {user.zeiterfassung_active ? (
        <>
          <FormControl size="small" sx={{ minWidth: 120 }}>
            <Select
              value={user.zeiterfassung_level || 'zeiterfassung'}
              onChange={(e) => handleUpdateLevel(user, e.target.value as PermissionLevel)}
              size="small"
            >
              <MenuItem value="zeiterfassung"><Trans>Benutzer</Trans></MenuItem>
              <MenuItem value="zeiterfassung_planner"><Trans>Planer</Trans></MenuItem>
              <MenuItem value="zeiterfassung_admin"><Trans>Admin</Trans></MenuItem>
            </Select>
          </FormControl>
          <Tooltip title={user.can_deactivate === false ? i18n._(t`Admins können nicht deaktiviert werden`) : i18n._(t`Deaktivieren`)}>
            <span>
              <IconButton
                onClick={() => handleDeactivateUser(user)}
                size="small"
                color="error"
                disabled={user.can_deactivate === false}
              >
                <PersonRemoveIcon />
              </IconButton>
            </span>
          </Tooltip>
        </>
      ) : (
        <Button
          variant="outlined"
          size="small"
          startIcon={<PersonAddIcon />}
          onClick={() => handleOpenActivationDialog(user)}
          disabled={
            activationLimit !== null && (
              activationLimit.license_missing ||
              (!activationLimit.unlimited && activationLimit.remaining <= 0)
            )
          }
        >
          <Trans>Aktivieren</Trans>
        </Button>
      )}
    </Box>
  );

  // Render Active Users Tab
  const renderActiveUsersTab = () => (
    <>
      <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 3 }}>
        <Box display="flex" alignItems="center" gap={2}>
          <Typography variant="h6"><Trans>Aktive Zeiterfassungs-Benutzer</Trans></Typography>
          <IconButton onClick={() => { setRunTour(true); setTourStepIndex(0); }} size="small" color="primary">
            <HelpOutlineIcon />
          </IconButton>
        </Box>
        <TextField
          placeholder={i18n._(t`Suche nach Name oder Abteilung...`)}
          value={searchTerm}
          onChange={(e) => setSearchTerm(e.target.value)}
          size="small"
          className="search-users"
          sx={{ minWidth: 300 }}
          InputProps={{
            startAdornment: (
              <InputAdornment position="start">
                <SearchIcon />
              </InputAdornment>
            ),
          }}
        />
      </Box>

      {error && <ErrorAlert message={error} onRetry={fetchUsers} />}

      {loading ? (
        <LoadingState message={i18n._(t`Lade Benutzer...`)} />
      ) : filteredUsers.length === 0 ? (
        <EmptyState
          icon={PersonOffIcon}
          title={searchTerm ? i18n._(t`Keine Benutzer gefunden`) : i18n._(t`Keine aktiven Benutzer vorhanden`)}
          message={searchTerm
            ? i18n._(t`Versuchen Sie einen anderen Suchbegriff`)
            : permissions.hasAdminAccess
              ? i18n._(t`Aktivieren Sie Benutzer im Tab "Systembenutzer"`)
              : i18n._(t`Kontaktieren Sie einen Administrator, um Benutzer zu aktivieren`)
          }
        />
      ) : (
        <>
          <TableContainer component={Paper} className="users-table">
            <Table>
              <TableHead>
                <TableRow>
                  <TableCell><Trans>Benutzer</Trans></TableCell>
                  <TableCell><Trans>Abteilung(en)</Trans></TableCell>
                  <TableCell><Trans>Rollen</Trans></TableCell>
                  <TableCell align="right"><Trans>Aktionen</Trans></TableCell>
                </TableRow>
              </TableHead>
              <TableBody>
                {filteredUsers
                  .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
                  .map((user) => (
                    <TableRow key={user.usr_id} hover>
                      <TableCell>{renderUserCell(user)}</TableCell>
                      <TableCell>{renderDepartments(user.departments)}</TableCell>
                      <TableCell>{renderRoles(user.roles)}</TableCell>
                      <TableCell align="right">{renderActionsCell(user)}</TableCell>
                    </TableRow>
                  ))}
              </TableBody>
            </Table>
          </TableContainer>
          <TablePagination
            component="div"
            count={filteredUsers.length}
            page={page}
            onPageChange={(_, newPage) => setPage(newPage)}
            rowsPerPage={rowsPerPage}
            onRowsPerPageChange={(e) => {
              setRowsPerPage(parseInt(e.target.value, 10));
              setPage(0);
            }}
            rowsPerPageOptions={[10, 25, 50]}
            labelRowsPerPage={<Trans>Zeilen pro Seite:</Trans>}
            labelDisplayedRows={({ from, to, count }) =>
              `${from}-${to} ${i18n._(t`von`)} ${count}`
            }
          />
        </>
      )}
    </>
  );

  // Render System Users Tab
  const renderSystemUsersTab = () => (
    <>
      <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 3 }}>
        <Box display="flex" alignItems="center" gap={2}>
          <Typography variant="h6"><Trans>Systembenutzer</Trans></Typography>
          {activationLimit && (
            <Chip
              icon={<GroupIcon />}
              label={
                activationLimit.unlimited
                  ? i18n._(t`Unbegrenzt aktiv: ${activationLimit.active_count}`)
                  : i18n._(t`Aktiv: ${activationLimit.active_count} / ${activationLimit.limit}`)
              }
              color={
                activationLimit.unlimited || activationLimit.remaining > 0
                  ? 'success'
                  : 'error'
              }
              variant="outlined"
            />
          )}
        </Box>
        <Box sx={{ display: 'flex', gap: 2, alignItems: 'center' }}>
          <Button
            variant="outlined"
            size="small"
            onClick={fetchSystemUsers}
            disabled={systemLoading}
          >
            <Trans>Aktualisieren</Trans>
          </Button>
          <TextField
            placeholder={i18n._(t`Suche nach Name oder Abteilung...`)}
            value={systemSearchTerm}
            onChange={(e) => setSystemSearchTerm(e.target.value)}
            size="small"
            sx={{ minWidth: 300 }}
            InputProps={{
              startAdornment: (
                <InputAdornment position="start">
                  <SearchIcon />
                </InputAdornment>
              ),
            }}
          />
        </Box>
      </Box>

      {activationLimit?.license_missing && (
        <Alert severity="error" sx={{ mb: 2 }}>
          <Trans>
            Zeiterfassung Lizenz nicht konfiguriert. Bitte kontaktieren Sie Ihren Administrator.
          </Trans>
        </Alert>
      )}

      {activationLimit && !activationLimit.license_missing && !activationLimit.unlimited && activationLimit.remaining <= 0 && (
        <Alert severity="warning" sx={{ mb: 2 }}>
          <Trans>
            Die maximale Anzahl von {activationLimit.limit} aktiven Benutzern wurde erreicht.
            Deaktivieren Sie einen Benutzer, um weitere zu aktivieren.
          </Trans>
        </Alert>
      )}

      {systemError && <ErrorAlert message={systemError} onRetry={fetchSystemUsers} />}

      {systemLoading ? (
        <LoadingState message={i18n._(t`Lade Systembenutzer...`)} />
      ) : filteredSystemUsers.length === 0 ? (
        <EmptyState
          icon={PersonOffIcon}
          title={systemSearchTerm ? i18n._(t`Keine Benutzer gefunden`) : i18n._(t`Keine Systembenutzer vorhanden`)}
          message={systemSearchTerm ? i18n._(t`Versuchen Sie einen anderen Suchbegriff`) : undefined}
        />
      ) : (
        <>
          <TableContainer component={Paper}>
            <Table>
              <TableHead>
                <TableRow>
                  <TableCell><Trans>Benutzer</Trans></TableCell>
                  <TableCell><Trans>Abteilung(en)</Trans></TableCell>
                  <TableCell><Trans>Status</Trans></TableCell>
                  <TableCell><Trans>Berechtigungsstufe</Trans></TableCell>
                  <TableCell align="right"><Trans>Aktionen</Trans></TableCell>
                </TableRow>
              </TableHead>
              <TableBody>
                {filteredSystemUsers
                  .slice(systemPage * systemRowsPerPage, systemPage * systemRowsPerPage + systemRowsPerPage)
                  .map((user) => (
                    <TableRow key={user.usr_id} hover>
                      <TableCell>{renderUserCell(user)}</TableCell>
                      <TableCell>{renderDepartments(user.departments)}</TableCell>
                      <TableCell>
                        {user.zeiterfassung_active ? (
                          <Chip
                            icon={<CheckCircleIcon />}
                            label={<Trans>Aktiv</Trans>}
                            color="success"
                            size="small"
                          />
                        ) : (
                          <Chip
                            icon={<CancelIcon />}
                            label={<Trans>Inaktiv</Trans>}
                            color="default"
                            size="small"
                            variant="outlined"
                          />
                        )}
                      </TableCell>
                      <TableCell>
                        {user.zeiterfassung_active ? (
                          <Chip
                            label={getLevelLabel(user.zeiterfassung_level)}
                            color={getLevelColor(user.zeiterfassung_level)}
                            size="small"
                          />
                        ) : (
                          <Typography variant="body2" color="text.secondary">-</Typography>
                        )}
                      </TableCell>
                      <TableCell align="right">{renderSystemUserActionsCell(user)}</TableCell>
                    </TableRow>
                  ))}
              </TableBody>
            </Table>
          </TableContainer>
          <TablePagination
            component="div"
            count={filteredSystemUsers.length}
            page={systemPage}
            onPageChange={(_, newPage) => setSystemPage(newPage)}
            rowsPerPage={systemRowsPerPage}
            onRowsPerPageChange={(e) => {
              setSystemRowsPerPage(parseInt(e.target.value, 10));
              setSystemPage(0);
            }}
            rowsPerPageOptions={[10, 25, 50]}
            labelRowsPerPage={<Trans>Zeilen pro Seite:</Trans>}
            labelDisplayedRows={({ from, to, count }) =>
              `${from}-${to} ${i18n._(t`von`)} ${count}`
            }
          />
        </>
      )}
    </>
  );

  return (
    <Box>
      <Joyride
        steps={tourSteps}
        run={runTour}
        stepIndex={tourStepIndex}
        continuous
        showProgress
        showSkipButton
        callback={handleJoyrideCallback}
        styles={{ options: { primaryColor: '#1976d2', zIndex: 10000 } }}
        locale={{ back: i18n._(t`Zurück`), close: i18n._(t`Schließen`), last: i18n._(t`Fertig`), next: i18n._(t`Weiter`), skip: i18n._(t`Überspringen`) }}
      />

      {/* Sub-tabs - Systembenutzer tab only visible for admins */}
      <Box sx={{ mb: 3 }}>
        <Typography variant="h5" sx={{ mb: 2 }}><Trans>Benutzer</Trans></Typography>
        {permissions.hasAdminAccess ? (
          <Tabs
            value={subTab}
            onChange={(_, newValue) => setSubTab(newValue)}
            sx={{ borderBottom: 1, borderColor: 'divider' }}
          >
            <Tab
              icon={<GroupIcon />}
              iconPosition="start"
              label={<Trans>Aktive Benutzer</Trans>}
            />
            <Tab
              icon={<PeopleOutlineIcon />}
              iconPosition="start"
              label={<Trans>Systembenutzer</Trans>}
            />
          </Tabs>
        ) : (
          <Box sx={{ borderBottom: 1, borderColor: 'divider', pb: 1 }}>
            <Chip
              icon={<GroupIcon />}
              label={<Trans>Aktive Benutzer</Trans>}
              color="primary"
              variant="outlined"
            />
          </Box>
        )}
      </Box>

      {/* Tab Content */}
      {subTab === 0 && renderActiveUsersTab()}
      {subTab === 1 && permissions.hasAdminAccess && renderSystemUsersTab()}

      {/* Modals */}
      {selectedUser && (
        <>
          <UserSettingsModal
            open={settingsModalOpen}
            onClose={() => closeModal(setSettingsModalOpen)}
            userId={selectedUser.id}
            userName={selectedUser.name}
            userPhoto={selectedUser.photourl}
            userInitials={selectedUser.initials}
            onUserUpdated={handleUserUpdated}
          />
          <UserShiftCalendarModal
            open={calendarModalOpen}
            onClose={() => closeModal(setCalendarModalOpen)}
            userId={selectedUser.id}
            userName={selectedUser.name}
          />
          <UserStatisticsModal
            open={statisticsModalOpen}
            onClose={() => closeModal(setStatisticsModalOpen)}
            userId={selectedUser.id}
            userName={selectedUser.name}
            userPhoto={selectedUser.photourl}
            userInitials={selectedUser.initials}
          />
          <UserDevicePairingModal
            open={pairingModalOpen}
            onClose={() => closeModal(setPairingModalOpen)}
            userId={selectedUser.id}
            userName={selectedUser.name}
          />
          <UserDeviceInfoModal
            open={deviceInfoModalOpen}
            onClose={handleCloseDeviceInfo}
            userName={selectedUser.name}
            device={selectedDevice}
            onUnlink={handleUnlinkDevice}
          />
          <TimeReportModal
            open={timeReportModalOpen}
            onClose={() => closeModal(setTimeReportModalOpen)}
            userId={selectedUser.id}
            userName={selectedUser.name}
            userPhoto={selectedUser.photourl}
            userInitials={selectedUser.initials}
          />
        </>
      )}

      {/* Activation Dialog — Onboarding Wizard */}
      <Dialog open={activationDialogOpen} onClose={handleCloseActivationDialog} maxWidth="sm" fullWidth>
        <DialogTitle>
          <Trans>Benutzer für Zeiterfassung aktivieren</Trans>
        </DialogTitle>
        <DialogContent>
          {userToActivate && (
            <Box sx={{ pt: 2 }}>
              <Box sx={{ display: 'flex', alignItems: 'center', gap: 2, mb: 3 }}>
                <UserAvatar
                  photoUrl={userToActivate.photourl}
                  initials={userToActivate.initials}
                  fullName={userToActivate.full_name}
                  sx={{ width: 48, height: 48 }}
                />
                <Typography variant="h6">{userToActivate.full_name}</Typography>
              </Box>

              <Stepper activeStep={wizardStep} sx={{ mb: 3 }}>
                {wizardSteps.map((label: string) => (
                  <MuiStep key={label}>
                    <StepLabel>{label}</StepLabel>
                  </MuiStep>
                ))}
              </Stepper>

              {wizardStep === 0 && (
                <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
                  <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
                    <Box sx={{ display: 'flex', gap: 1 }}>
                      <Button
                        variant={!isExistingEmployee ? 'contained' : 'outlined'}
                        onClick={() => setIsExistingEmployee(false)}
                        size="small"
                        disabled={hasExistingSettings}
                      >
                        <Trans>Neuer Mitarbeiter</Trans>
                      </Button>
                      <Button
                        variant={isExistingEmployee ? 'contained' : 'outlined'}
                        onClick={() => setIsExistingEmployee(true)}
                        size="small"
                        disabled={hasExistingSettings}
                      >
                        <Trans>Bestehender Mitarbeiter</Trans>
                      </Button>
                    </Box>
                    {hasExistingSettings && (
                      <Alert severity="info" sx={{ py: 0.5 }}>
                        <Trans>Dieser Benutzer war bereits in der Zeiterfassung aktiv. Die vorhandenen Einstellungen wurden übernommen.</Trans>
                      </Alert>
                    )}
                  </Box>
                  <TextField
                    label={i18n._(t`Beschäftigungsbeginn`)}
                    type="date"
                    value={onboardingStartDate}
                    onChange={(e) => setOnboardingStartDate(e.target.value)}
                    InputLabelProps={{ shrink: true }}
                    required
                    fullWidth
                  />
                  <TextField
                    label={i18n._(t`Wochenstunden`)}
                    type="number"
                    value={onboardingWeeklyHours}
                    onChange={(e) => setOnboardingWeeklyHours(Number(e.target.value))}
                    inputProps={{ min: 0, max: 168, step: 0.5 }}
                    fullWidth
                  />
                  <FormControl fullWidth>
                    <InputLabel><Trans>Bundesland</Trans></InputLabel>
                    <Select
                      value={onboardingDistrict}
                      onChange={(e) => setOnboardingDistrict(e.target.value as string)}
                      label={i18n._(t`Bundesland`)}
                    >
                      {germanStates.map((state: string) => (
                        <MenuItem key={state} value={state}>{state}</MenuItem>
                      ))}
                    </Select>
                  </FormControl>
                </Box>
              )}

              {wizardStep === 1 && (
                <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
                  <TextField
                    label={i18n._(t`Vertragliche Urlaubstage`)}
                    type="number"
                    value={onboardingVacationDays}
                    onChange={(e) => setOnboardingVacationDays(Number(e.target.value))}
                    inputProps={{ min: 0, max: 365, step: 1 }}
                    fullWidth
                  />
                  {(() => {
                    const { prorated, employedMonths } = calculateProratedVacation(onboardingStartDate, onboardingVacationDays);
                    const currentYear: number = new Date().getFullYear();
                    return (
                      <Alert severity="info">
                        <Trans>
                          Anteilige Urlaubstage für {currentYear}: {prorated} Tage ({employedMonths} von 12 Monaten)
                        </Trans>
                      </Alert>
                    );
                  })()}
                  {isExistingEmployee && (
                    <>
                      <TextField
                        label={i18n._(t`Bereits genommene Urlaubstage`)}
                        type="number"
                        value={onboardingVacationDaysTaken}
                        onChange={(e) => setOnboardingVacationDaysTaken(Number(e.target.value))}
                        inputProps={{ min: 0, max: 365, step: 0.5 }}
                        fullWidth
                        helperText={i18n._(t`Urlaubstage, die vor dem Systemwechsel bereits genommen wurden`)}
                      />
                      <TextField
                        label={i18n._(t`Überstunden-/Minusstundensaldo (Stunden)`)}
                        type="number"
                        value={onboardingOvertimeBalance}
                        onChange={(e) => setOnboardingOvertimeBalance(Number(e.target.value))}
                        inputProps={{ step: 0.5 }}
                        fullWidth
                        helperText={i18n._(t`Positiv = Überstunden, Negativ = Minusstunden`)}
                      />
                    </>
                  )}
                </Box>
              )}

              {wizardStep === 2 && (
                <Box>
                  <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
                    <Trans>Rollen für diesen Benutzer auswählen:</Trans>
                  </Typography>
                  {onboardingRolesLoading ? (
                    <Box sx={{ display: 'flex', justifyContent: 'center', py: 3 }}>
                      <CircularProgress size={24} />
                    </Box>
                  ) : onboardingRoles.length === 0 ? (
                    <Typography variant="body2" color="text.secondary">
                      <Trans>Keine Rollen verfügbar</Trans>
                    </Typography>
                  ) : (
                    <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1 }}>
                      {onboardingRoles.map((role) => (
                        <Chip
                          key={role.zr_id}
                          label={role.zr_name}
                          onClick={() => {
                            setOnboardingRoleIds((prev: number[]) =>
                              prev.includes(role.zr_id)
                                ? prev.filter((id: number) => id !== role.zr_id)
                                : [...prev, role.zr_id]
                            );
                          }}
                          color={onboardingRoleIds.includes(role.zr_id) ? 'primary' : 'default'}
                          variant={onboardingRoleIds.includes(role.zr_id) ? 'filled' : 'outlined'}
                          sx={{
                            backgroundColor: onboardingRoleIds.includes(role.zr_id) ? role.zr_color : 'transparent',
                            borderColor: role.zr_color,
                            color: onboardingRoleIds.includes(role.zr_id) ? getContrastColor(role.zr_color) : role.zr_color,
                            '&:hover': {
                              backgroundColor: onboardingRoleIds.includes(role.zr_id) ? role.zr_color : `${role.zr_color}20`,
                            },
                          }}
                        />
                      ))}
                    </Box>
                  )}
                </Box>
              )}

              {wizardStep === 3 && (
                <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
                  <FormControl fullWidth>
                    <Typography variant="body2" color="text.secondary" sx={{ mb: 1 }}>
                      <Trans>Berechtigungsstufe:</Trans>
                    </Typography>
                    <Select
                      value={selectedLevel}
                      onChange={(e) => setSelectedLevel(e.target.value as PermissionLevel)}
                    >
                      <MenuItem value="zeiterfassung">
                        <Box>
                          <Typography><Trans>Benutzer</Trans></Typography>
                          <Typography variant="caption" color="text.secondary">
                            <Trans>Nur Dashboard-Zugriff</Trans>
                          </Typography>
                        </Box>
                      </MenuItem>
                      <MenuItem value="zeiterfassung_planner">
                        <Box>
                          <Typography><Trans>Planer</Trans></Typography>
                          <Typography variant="caption" color="text.secondary">
                            <Trans>Kann Schichten planen und verwalten</Trans>
                          </Typography>
                        </Box>
                      </MenuItem>
                      <MenuItem value="zeiterfassung_admin">
                        <Box>
                          <Typography><Trans>Admin</Trans></Typography>
                          <Typography variant="caption" color="text.secondary">
                            <Trans>Voller Zugriff auf alle Funktionen</Trans>
                          </Typography>
                        </Box>
                      </MenuItem>
                    </Select>
                  </FormControl>

                  <Box sx={{ mt: 1, p: 2, bgcolor: 'grey.50', borderRadius: 1 }}>
                    <Typography variant="subtitle2" sx={{ mb: 1.5 }}>
                      <Trans>Zusammenfassung</Trans>
                    </Typography>
                    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
                      <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
                        <Typography variant="body2" color="text.secondary"><Trans>Beschäftigungsbeginn:</Trans></Typography>
                        <Typography variant="body2">{onboardingStartDate || '-'}</Typography>
                      </Box>
                      <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
                        <Typography variant="body2" color="text.secondary"><Trans>Wochenstunden:</Trans></Typography>
                        <Typography variant="body2">{onboardingWeeklyHours}</Typography>
                      </Box>
                      <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
                        <Typography variant="body2" color="text.secondary"><Trans>Bundesland:</Trans></Typography>
                        <Typography variant="body2">{onboardingDistrict || '-'}</Typography>
                      </Box>
                      <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
                        <Typography variant="body2" color="text.secondary"><Trans>Vertragliche Urlaubstage:</Trans></Typography>
                        <Typography variant="body2">{onboardingVacationDays}</Typography>
                      </Box>
                      <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
                        <Typography variant="body2" color="text.secondary"><Trans>Anteilige Urlaubstage:</Trans></Typography>
                        <Typography variant="body2">{calculateProratedVacation(onboardingStartDate, onboardingVacationDays).prorated}</Typography>
                      </Box>
                      {isExistingEmployee && (
                        <>
                          <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
                            <Typography variant="body2" color="text.secondary"><Trans>Bereits genommene Urlaubstage:</Trans></Typography>
                            <Typography variant="body2">{onboardingVacationDaysTaken}</Typography>
                          </Box>
                          <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
                            <Typography variant="body2" color="text.secondary"><Trans>Überstundensaldo:</Trans></Typography>
                            <Typography variant="body2">{onboardingOvertimeBalance >= 0 ? '+' : ''}{onboardingOvertimeBalance}h</Typography>
                          </Box>
                        </>
                      )}
                      <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
                        <Typography variant="body2" color="text.secondary"><Trans>Rollen:</Trans></Typography>
                        <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5, justifyContent: 'flex-end' }}>
                          {onboardingRoleIds.length === 0 ? (
                            <Typography variant="body2">-</Typography>
                          ) : (
                            onboardingRoles
                              .filter((r) => onboardingRoleIds.includes(r.zr_id))
                              .map((role) => (
                                <Chip
                                  key={role.zr_id}
                                  label={role.zr_name}
                                  size="small"
                                  sx={{
                                    backgroundColor: role.zr_color,
                                    color: getContrastColor(role.zr_color),
                                  }}
                                />
                              ))
                          )}
                        </Box>
                      </Box>
                      <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
                        <Typography variant="body2" color="text.secondary"><Trans>Berechtigungsstufe:</Trans></Typography>
                        <Chip label={getLevelLabel(selectedLevel)} color={getLevelColor(selectedLevel)} size="small" />
                      </Box>
                    </Box>
                  </Box>

                  {activationLimit && !activationLimit.unlimited && (
                    <Alert severity="info">
                      <Trans>
                        Nach der Aktivierung: {activationLimit.active_count + 1} von {activationLimit.limit} Plätzen belegt
                      </Trans>
                    </Alert>
                  )}
                </Box>
              )}
            </Box>
          )}
        </DialogContent>
        <DialogActions>
          <Button onClick={handleCloseActivationDialog}>
            <Trans>Abbrechen</Trans>
          </Button>
          {wizardStep > 0 && (
            <Button onClick={() => setWizardStep((prev: number) => prev - 1)}>
              <Trans>Zurück</Trans>
            </Button>
          )}
          {wizardStep < wizardSteps.length - 1 ? (
            <Button
              variant="contained"
              onClick={() => setWizardStep((prev: number) => prev + 1)}
              disabled={wizardStep === 0 && !onboardingStartDate}
            >
              <Trans>Weiter</Trans>
            </Button>
          ) : (
            <Button
              variant="contained"
              onClick={handleActivateUser}
              disabled={activating}
              startIcon={activating ? <CircularProgress size={16} /> : <PersonAddIcon />}
            >
              <Trans>Aktivieren</Trans>
            </Button>
          )}
        </DialogActions>
      </Dialog>

      <ConfirmDialog {...dialogProps} />
    </Box>
  );
};

export default UsersTab;