import React, { useState, useEffect } from 'react';
import {
  Box,
  Paper,
  Typography,
  IconButton,
  Button,
  Avatar,
  Tooltip,
  CircularProgress,
  Menu,
  MenuItem,
  ListItemIcon,
  ListItemText,
  Checkbox,
  FormControlLabel,
  Fab,
  Dialog,
  DialogTitle,
  DialogContent,
  DialogActions,
  TextField,
  List,
  ListItem,
  ListItemButton,
  Alert,
  FormControl,
  InputLabel,
  Select,
  Chip,
  Divider,
  InputAdornment,
} from '@mui/material';
import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
import ChevronRightIcon from '@mui/icons-material/ChevronRight';
import AddIcon from '@mui/icons-material/Add';
import DeleteIcon from '@mui/icons-material/Delete';
import ContentCopyIcon from '@mui/icons-material/ContentCopy';
import ContentPasteIcon from '@mui/icons-material/ContentPaste';
import SelectAllIcon from '@mui/icons-material/SelectAll';
import CloseIcon from '@mui/icons-material/Close';
import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
import DownloadIcon from '@mui/icons-material/Download';
import ViewSidebarIcon from '@mui/icons-material/ViewSidebar';
import PeopleIcon from '@mui/icons-material/People';
import SearchIcon from '@mui/icons-material/Search';
import LocalHospitalIcon from '@mui/icons-material/LocalHospital';
import BeachAccessIcon from '@mui/icons-material/BeachAccess';
import CheckCircleIcon from '@mui/icons-material/CheckCircle';
import CancelIcon from '@mui/icons-material/Cancel';
import PlaylistAddCheckIcon from '@mui/icons-material/PlaylistAddCheck';
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 { Shift, WeekInfo, Department, ShiftTemplate, User, Group } from '../types/shift';
import { getCurrentWeekInfo, getPreviousWeek, getNextWeek, getWeekInfo } from '../utils/weekUtils';
import { stringToColor, getContrastColor } from '../utils/colorUtils';
import CreateShiftModal from '../components/CreateShiftModal';
import EditShiftModal from '../components/EditShiftModal';
import DayCoverageIndicator from '../components/DayCoverageIndicator';
import CoverageDetailsModal from '../components/CoverageDetailsModal';
import UserAvatar from '../components/UserAvatar';
import { DayCoverageAnalysis } from '../components/DayCoverageIndicator';
import { useTour, TOUR_IDS } from '../hooks/useTour';
import { useShiftManagement } from '../hooks/useShiftManagement';
import {
  LoadingState,
  ErrorAlert,
  EmptyState,
  WeekNavigator,
  DepartmentSelector,
  ShiftCard,
  UserList,
} from '../components/shared';

const ShiftTab = () => {
  const { i18n } = useLingui();
  const [weekInfo, setWeekInfo] = useState<WeekInfo>(getCurrentWeekInfo());
  const [loading, setLoading] = useState(true);
  const [selectedDepartment, setSelectedDepartment] = useState<number | ''>('');
  const [selectedGroup, setSelectedGroup] = useState<number | 'all'>('all');

  const {
    shifts,
    loading: shiftsLoading,
    error: shiftsError,
    loadShifts,
    createShift,
    updateShift,
    deleteShift,
    duplicateShift,
    bulkConfirmWeek,
  } = useShiftManagement({
    weekInfo,
    selectedDepartment,
    selectedGroup,
  });
  const [createModalOpen, setCreateModalOpen] = useState(false);
  const [editModalOpen, setEditModalOpen] = useState(false);
  const [selectedDate, setSelectedDate] = useState<string>('');
  const [selectedShift, setSelectedShift] = useState<Shift | null>(null);
  const [contextMenu, setContextMenu] = useState<{
    mouseX: number;
    mouseY: number;
    shift?: Shift;
    targetDate?: string;
  } | null>(null);
  const [copiedShift, setCopiedShift] = useState<Shift | null>(null);
  const [selectionMode, setSelectionMode] = useState(false);
  const [selectedShifts, setSelectedShifts] = useState<Set<number>>(new Set());
  const [savePlanDialogOpen, setSavePlanDialogOpen] = useState(false);
  const [applyPlanDialogOpen, setApplyPlanDialogOpen] = useState(false);
  const [exportDialogOpen, setExportDialogOpen] = useState(false);
  const [planName, setPlanName] = useState('');
  const [planDescription, setPlanDescription] = useState('');
  const [planWeekCount, setPlanWeekCount] = useState(1);
  const [exportWeekCount, setExportWeekCount] = useState(1);
  const [plans, setPlans] = useState<any[]>([]);
  const [planError, setPlanError] = useState('');
  const [exportError, setExportError] = useState('');
  const [includeUserAssignments, setIncludeUserAssignments] = useState(true);
  const [departments, setDepartments] = useState<Department[]>([]);
  const [groups, setGroups] = useState<Group[]>([]);
  const [coverageDetailsOpen, setCoverageDetailsOpen] = useState(false);
  const [selectedCoverage, setSelectedCoverage] = useState<DayCoverageAnalysis | null>(null);
  const [coverageRefreshKey, setCoverageRefreshKey] = useState(0);
  const [templates, setTemplates] = useState<ShiftTemplate[]>([]);
  const [users, setUsers] = useState<User[]>([]);
  const [filteredUsers, setFilteredUsers] = useState<User[]>([]);
  const [userSearchTerm, setUserSearchTerm] = useState('');
  const [templatesLoading, setTemplatesLoading] = useState(false);
  const [usersLoading, setUsersLoading] = useState(false);
  const [showTemplatesPanel, setShowTemplatesPanel] = useState(true);
  const [showUsersPanel, setShowUsersPanel] = useState(true);
  const [allRoles, setAllRoles] = useState<any[]>([]);

  // Role assignment dialog state
  const [roleSelectionOpen, setRoleSelectionOpen] = useState(false);
  const [pendingAssignment, setPendingAssignment] = useState<{
    userId: number;
    userName: string;
    shift: Shift;
  } | null>(null);
  const [selectedRole, setSelectedRole] = useState<number | null>(null);
  const [availableRolesForUser, setAvailableRolesForUser] = useState<any[]>([]);

  // Template drop role selection state
  const [templateRoleDialogOpen, setTemplateRoleDialogOpen] = useState(false);
  const [pendingTemplateData, setPendingTemplateData] = useState<{
    template: ShiftTemplate;
    date: string;
  } | null>(null);
  const [selectedTemplateRole, setSelectedTemplateRole] = useState<number | null>(null);

  // Role legend carousel state
  const [roleLegendPage, setRoleLegendPage] = useState(0);
  const rolesPerPage = 4;

  // Use the tour hook instead of localStorage
  const {
    runTour,
    setRunTour,
    tourStepIndex,
    setTourStepIndex,
    markTourCompleted,
  } = useTour(TOUR_IDS.ZEITERFASSUNG_SHIFTS, true, 1000);

  // Load departments, groups, and roles on mount
  useEffect(() => {
    loadDepartments();
    loadGroups();
    loadRoles();
  }, []);

  // Load shifts, templates, and users when week, department, or group changes
  useEffect(() => {
    // Only load data if a department is selected
    if (selectedDepartment) {
      loadShifts();
      loadTemplates();
      loadUsers();
      setLoading(false);
    }
  }, [weekInfo.week, weekInfo.year, selectedDepartment, selectedGroup, loadShifts]);

  // Load copied shift from localStorage on mount
  useEffect(() => {
    const storedShift = localStorage.getItem('copiedShift');
    if (storedShift) {
      try {
        setCopiedShift(JSON.parse(storedShift));
      } catch (error) {
        console.error('Error parsing copied shift:', error);
      }
    }
  }, []);

  const loadDepartments = async () => {
    try {
      const response = await axios.get('/zeiterfassung/departments');
      setDepartments(response.data);
      // Select first department by default if available
      if (response.data.length > 0) {
        setSelectedDepartment(response.data[0].ber_id);
      }
    } catch (error) {
      console.error('Error loading departments:', error);
    }
  };

  const loadGroups = async () => {
    try {
      // Load all groups (independent of department)
      const response = await axios.get('/zeiterfassung/groups');
      setGroups(response.data);
    } catch (error) {
      console.error('Error loading groups:', error);
    }
  };

  const loadRoles = async () => {
    try {
      const response = await axios.get('/zeiterfassung/roles');
      setAllRoles(response.data);
    } catch (error) {
      console.error('Error loading roles:', error);
    }
  };

  const loadTemplates = async () => {
    try {
      setTemplatesLoading(true);
      const params: any = {};
      if (selectedDepartment) {
        params.ber_id = selectedDepartment;
      }
      const response = await axios.get('/zeiterfassung/shift-templates', { params });
      setTemplates(response.data.filter((t: ShiftTemplate) => t.zst_active));
    } catch (error) {
      console.error('Error loading templates:', error);
    } finally {
      setTemplatesLoading(false);
    }
  };

  const loadUsers = async () => {
    try {
      setUsersLoading(true);
      const params: any = {};
      if (selectedDepartment) {
        params.ber_id = selectedDepartment;
      }
      if (selectedGroup && selectedGroup !== 'all') {
        params.usg_id = selectedGroup;
      }
      const response = await axios.get('/zeiterfassung/users', { params });

      // Get week start and end dates
      const weekStart = weekInfo.days[0]?.dateString;
      const weekEnd = weekInfo.days[6]?.dateString;

      // Fetch sick leave and vacation data for the current week
      const [sickLeaveResponse, vacationResponse] = await Promise.all([
        weekStart && weekEnd ? axios.get('/zeiterfassung/sick-requests', {
          params: { status: 'approved', from_date: weekStart, to_date: weekEnd }
        }) : Promise.resolve({ data: [] }),
        weekStart && weekEnd ? axios.get('/zeiterfassung/vacation-requests', {
          params: { status: 'approved', from_date: weekStart, to_date: weekEnd }
        }) : Promise.resolve({ data: [] }),
      ]);

      const sickLeaveData = sickLeaveResponse.data || [];
      const vacationData = vacationResponse.data || [];

      // Enhance users with leave information
      const usersWithLeaveInfo = response.data.map((user: User) => {
        const sickLeave = sickLeaveData.find((leave: any) => leave.zsr_user_id === user.usr_id);
        const vacation = vacationData.find((vac: any) => vac.zvr_user_id === user.usr_id);

        let leaveInfo = null;

        if (sickLeave) {
          const leaveStart = new Date(sickLeave.zsr_from_date);
          const leaveEnd = new Date(sickLeave.zsr_to_date);
          const weekStartDate = new Date(weekStart);
          const weekEndDate = new Date(weekEnd);

          const coversEntireWeek = leaveStart <= weekStartDate && leaveEnd >= weekEndDate;

          leaveInfo = {
            type: 'sick',
            from: sickLeave.zsr_from_date,
            to: sickLeave.zsr_to_date,
            coversEntireWeek,
          };
        } else if (vacation) {
          const leaveStart = new Date(vacation.zvr_from_date);
          const leaveEnd = new Date(vacation.zvr_to_date);
          const weekStartDate = new Date(weekStart);
          const weekEndDate = new Date(weekEnd);

          const coversEntireWeek = leaveStart <= weekStartDate && leaveEnd >= weekEndDate;

          leaveInfo = {
            type: 'vacation',
            from: vacation.zvr_from_date,
            to: vacation.zvr_to_date,
            coversEntireWeek,
          };
        }

        return {
          ...user,
          leaveInfo,
        };
      });

      setUsers(usersWithLeaveInfo);
      setFilteredUsers(usersWithLeaveInfo);
    } catch (error) {
      console.error('Error loading users:', error);
    } finally {
      setUsersLoading(false);
    }
  };

  // Filter users based on search term
  useEffect(() => {
    if (userSearchTerm.trim() === '') {
      setFilteredUsers(users);
    } else {
      const searchLower = userSearchTerm.toLowerCase();
      const filtered = users.filter((user) => {
        const fullName = user.full_name.toLowerCase();
        const departments = user.department_string?.toLowerCase() || '';
        return fullName.includes(searchLower) || departments.includes(searchLower);
      });
      setFilteredUsers(filtered);
    }
  }, [userSearchTerm, users]);

  // Tour steps configuration
  const tourSteps: Step[] = [
    {
      target: 'body',
      content: i18n._(t`Willkommen zur Schichtplanung! Diese interaktive Tour zeigt Ihnen alle wichtigen Funktionen der Schichtverwaltung. Sie können die Tour jederzeit mit "Überspringen" beenden.`),
      placement: 'center',
    },
    {
      target: '.department-selector',
      content: i18n._(t`🏢 Bereichsauswahl: Wählen Sie hier den Bereich aus, für den Sie Schichten planen möchten. Jeder Bereich hat eigene Schichten und Vorlagen. Probieren Sie es aus!`),
      disableBeacon: true,
      spotlightClicks: true,
    },
    {
      target: '.week-navigator',
      content: i18n._(t`📅 Wochennavigation: Springen Sie mit den Pfeiltasten zwischen Kalenderwochen. Der "Heute"-Button bringt Sie zur aktuellen Woche. Die angezeigte KW hilft bei der Orientierung.`),
      disableBeacon: true,
    },
    {
      target: '.export-pdf-button',
      content: i18n._(t`📄 PDF Export: Exportieren Sie Schichtpläne als PDF für 1-6 Wochen. Perfekt zum Ausdrucken oder Versenden an Ihr Team. Der Export enthält alle Schichten mit Mitarbeitern und Rollen.`),
      disableBeacon: true,
      spotlightClicks: false,
    },
    {
      target: '.plan-buttons',
      content: i18n._(t`💾 Planverwaltung: Speichern Sie wiederkehrende Schichtmuster als Plan. Pläne können bereichsspezifisch (nur für einen Bereich) oder global (alle Bereiche) sein und 1-6 Wochen umfassen.`),
      disableBeacon: true,
    },
    {
      target: '.calendar-grid',
      content: i18n._(t`📊 Wochenkalender: Ihre zentrale Übersicht! Jede Spalte zeigt einen Tag (Mo-So). Schichten erscheinen farbcodiert mit Zeit, Vorlage und zugewiesenen Mitarbeitern.`),
      disableBeacon: true,
    },
    {
      target: '.add-shift-button',
      content: i18n._(t`➕ Neue Schicht: Klicken Sie auf das + um eine Schicht zu erstellen. Sie können eine Vorlage wählen oder manuelle Zeiten eingeben. Danach weisen Sie Mitarbeiter mit passenden Rollen zu.`),
      disableBeacon: true,
      spotlightClicks: false,
    },
    {
      target: '.calendar-grid',
      content: i18n._(t`🖱️ Drag & Drop: Schichten können per Maus zwischen Tagen verschoben werden! Ziehen Sie eine Schicht einfach auf einen anderen Tag. Alle Zuweisungen bleiben erhalten.`),
      disableBeacon: true,
    },
    {
      target: '.calendar-grid',
      content: i18n._(t`⚡ Rechtsklick-Menü: Rechtsklick auf Schicht → Kopieren/Löschen. Rechtsklick auf leeren Bereich → Einfügen/Alle auswählen. Schnelle Bearbeitung vieler Schichten!`),
      disableBeacon: true,
    },
    {
      target: '.calendar-grid',
      content: i18n._(t`✏️ Schicht bearbeiten: Klicken Sie auf eine Schicht um Details zu ändern: Zeit, Pausen, Notizen und Mitarbeiterzuweisungen. Sie sehen sofort ob Rollen korrekt besetzt sind.`),
      disableBeacon: true,
    },
    {
      target: 'body',
      content: i18n._(t`🎉 Tour abgeschlossen! Sie kennen jetzt alle Hauptfunktionen. Tipp: Nutzen Sie das Fragezeichen-Icon oben rechts um die Tour erneut zu starten.`),
      placement: 'center',
    },
  ];

  const handleJoyrideCallback = (data: CallBackProps) => {
    const { status, type, index } = data;

    if (([STATUS.FINISHED, STATUS.SKIPPED] as string[]).includes(status)) {
      // Mark tour as completed in database
      markTourCompleted();
    } else if (type === EVENTS.STEP_AFTER || type === EVENTS.TARGET_NOT_FOUND) {
      // Move to next step
      setTourStepIndex(index + (type === EVENTS.STEP_AFTER ? 1 : 0));
    }
  };

  const handleStartTour = () => {
    setRunTour(true);
    setTourStepIndex(0);
  };

  const handleCreateShift = (dateString: string) => {
    setSelectedDate(dateString);
    setCreateModalOpen(true);
  };

  const handleCloseModal = () => {
    setCreateModalOpen(false);
    setSelectedDate('');
  };

  const handleShiftCreated = (newShift?: Shift) => {
    loadShifts();
    setCoverageRefreshKey(prev => prev + 1); // Refresh coverage indicators

    if (newShift) {
      // If a new shift was provided (from EditShiftModal), open it for editing
      setSelectedShift(newShift);
      setEditModalOpen(true);
    } else {
      // Otherwise, just close the create modal
      handleCloseModal();
    }
  };

  const handleShiftClick = (shift: Shift) => {
    if (selectionMode) {
      toggleShiftSelection(shift.zs_id);
    } else {
      setSelectedShift(shift);
      setEditModalOpen(true);
    }
  };

  const toggleShiftSelection = (shiftId: number) => {
    setSelectedShifts(prev => {
      const newSet = new Set(prev);
      if (newSet.has(shiftId)) {
        newSet.delete(shiftId);
      } else {
        newSet.add(shiftId);
      }
      return newSet;
    });
  };

  const handleSelectAll = () => {
    // Select all shifts from the context menu's target date only
    const targetDate = contextMenu?.targetDate;
    if (!targetDate) return;

    // Group shifts by date
    const shiftsByDate: Record<string, Shift[]> = {};
    shifts.forEach((shift) => {
      if (!shiftsByDate[shift.zs_date]) {
        shiftsByDate[shift.zs_date] = [];
      }
      shiftsByDate[shift.zs_date].push(shift);
    });

    const shiftsForDay = shiftsByDate[targetDate] || [];
    const shiftIds = shiftsForDay.map(s => s.zs_id);
    setSelectedShifts(new Set(shiftIds));
    setSelectionMode(true);
    handleCloseContextMenu();
  };

  const handleDeselectAll = () => {
    setSelectedShifts(new Set());
    setSelectionMode(false);
  };

  const handleCloseEditModal = () => {
    setEditModalOpen(false);
    setSelectedShift(null);
  };

  const handleShiftUpdated = () => {
    loadShifts();
    setCoverageRefreshKey(prev => prev + 1); // Refresh coverage indicators
    handleCloseEditModal();
  };

  const handleShowCoverageDetails = (coverage: DayCoverageAnalysis) => {
    setSelectedCoverage(coverage);
    setCoverageDetailsOpen(true);
  };

  const handleCloseCoverageDetails = () => {
    setCoverageDetailsOpen(false);
    setSelectedCoverage(null);
  };

  // Plan handlers
  const handleOpenSavePlanDialog = () => {
    setPlanName('');
    setPlanDescription('');
    setPlanError('');
    setSavePlanDialogOpen(true);
  };

  const handleOpenApplyPlanDialog = async () => {
    setPlanError('');
    setApplyPlanDialogOpen(true);
    try {
      const params: any = {};
      if (selectedDepartment) {
        params.ber_id = selectedDepartment;
      }
      const response = await axios.get('/zeiterfassung/plans', { params });
      setPlans(response.data);
    } catch (error) {
      console.error('Error loading plans:', error);
      setPlanError(i18n._(t`Fehler beim Laden der Pläne`));
    }
  };

  const handleSavePlan = async () => {
    if (!planName.trim()) {
      setPlanError(i18n._(t`Bitte geben Sie einen Plan-Namen ein`));
      return;
    }

    if (!selectedDepartment) {
      setPlanError(i18n._(t`Bitte wählen Sie einen Bereich aus`));
      return;
    }

    try {
      await axios.post('/zeiterfassung/plans/save-current', {
        year: weekInfo.year,
        week: weekInfo.week,
        zp_name: planName,
        zp_description: planDescription,
        zp_ber_id: selectedDepartment,
        zp_week_count: planWeekCount,
      });

      setSavePlanDialogOpen(false);
      setPlanName('');
      setPlanDescription('');
      setPlanWeekCount(1);
      setPlanError('');
    } catch (error: any) {
      console.error('Error saving plan:', error);
      if (error.response?.data?.errors) {
        const errorMessages = Object.values(error.response.data.errors)
          .flat()
          .join(', ');
        setPlanError(errorMessages as string);
      } else {
        setPlanError(i18n._(t`Fehler beim Speichern des Plans`));
      }
    }
  };

  const handleApplyPlan = async (planId: number) => {
    try {
      await axios.post(`/zeiterfassung/plans/${planId}/apply`, {
        year: weekInfo.year,
        week: weekInfo.week,
        include_user_assignments: includeUserAssignments,
      });

      setApplyPlanDialogOpen(false);
      loadShifts(); // Reload shifts to show the applied plan
    } catch (error: any) {
      console.error('Error applying plan:', error);
      if (error.response?.data?.errors) {
        const errorMessages = Object.values(error.response.data.errors)
          .flat()
          .join(', ');
        setPlanError(errorMessages as string);
      } else {
        setPlanError(i18n._(t`Fehler beim Anwenden des Plans`));
      }
    }
  };

  // Export handlers
  const handleOpenExportDialog = () => {
    setExportError('');
    setExportDialogOpen(true);
  };

  const handleExportPlan = async () => {
    if (!selectedDepartment) {
      setExportError(i18n._(t`Bitte wählen Sie einen Bereich aus`));
      return;
    }

    try {
      // Get department name for filename
      const dept = departments.find(d => d.ber_id === selectedDepartment);
      const deptName = dept?.ber_name || 'Bereich';

      const response = await axios.post(
        '/zeiterfassung/shifts/export-pdf',
        {
          year: weekInfo.year,
          week: weekInfo.week,
          ber_id: selectedDepartment,
          week_count: exportWeekCount,
        },
        { responseType: 'blob' }
      );

      // Create download link
      const url = window.URL.createObjectURL(new Blob([response.data]));
      const link = document.createElement('a');
      link.href = url;
      link.setAttribute('download', `schichtplan_${deptName}_KW${weekInfo.week}-${weekInfo.week + exportWeekCount - 1}_${weekInfo.year}.pdf`);
      document.body.appendChild(link);
      link.click();
      link.remove();
      window.URL.revokeObjectURL(url);

      setExportDialogOpen(false);
      setExportWeekCount(1);
    } catch (error: any) {
      console.error('Error exporting shifts:', error);
      if (error.response?.data?.errors) {
        const errorMessages = Object.values(error.response.data.errors)
          .flat()
          .join(', ');
        setExportError(errorMessages as string);
      } else {
        setExportError(i18n._(t`Fehler beim Exportieren`));
      }
    }
  };

  // Drag-and-drop for moving shifts between days
  const handleShiftDragStart = (e: React.DragEvent, shift: Shift) => {
    e.dataTransfer.setData('shiftId', shift.zs_id.toString());
    e.dataTransfer.setData('type', 'shift');
    e.dataTransfer.effectAllowed = 'move';
  };

  const handleDayDragOver = (e: React.DragEvent) => {
    e.preventDefault();
    // Check if this is a template drag (copy) or shift drag (move)
    const hasTemplateData = e.dataTransfer.types.includes('application/x-templateid') ||
                            e.dataTransfer.types.includes('templateid');
    e.dataTransfer.dropEffect = hasTemplateData ? 'copy' : 'move';
  };

  const handleDayDrop = async (e: React.DragEvent, newDate: string) => {
    e.preventDefault();
    const shiftId = e.dataTransfer.getData('shiftId');
    const templateId = e.dataTransfer.getData('templateId');
    const type = e.dataTransfer.getData('type');

    // Handle shift move - optimistic update
    if (type === 'shift' && shiftId) {
      const shiftIdInt = parseInt(shiftId);
      const originalShifts = [...shifts];

      // Optimistic: Update UI immediately
      setShifts(prevShifts =>
        prevShifts.map(shift =>
          shift.zs_id === shiftIdInt
            ? { ...shift, zs_date: newDate }
            : shift
        )
      );
      setCoverageRefreshKey(prev => prev + 1);

      try {
        await axios.put(`/zeiterfassung/shifts/${shiftId}`, {
          zs_date: newDate,
        });
      } catch (error: any) {
        // Rollback on error
        setShifts(originalShifts);
        setCoverageRefreshKey(prev => prev + 1);
        console.error('Error moving shift:', error);
        if (error.response?.data?.errors) {
          const errorMsg = Object.values(error.response.data.errors).flat().join(', ');
          alert(`${i18n._(t`Fehler`)}: ${errorMsg}`);
        } else {
          alert(i18n._(t`Fehler beim Verschieben der Schicht`));
        }
      }
    }

    // Handle template drop - show role selection dialog
    if (type === 'template' && templateId) {
      const template = templates.find(t => t.zst_id === parseInt(templateId));
      if (!template) return;

      // Open role selection dialog
      setPendingTemplateData({ template, date: newDate });
      setSelectedTemplateRole(null);
      setTemplateRoleDialogOpen(true);
    }
  };

  // Drag-and-drop for templates
  const handleTemplateDragStart = (e: React.DragEvent, template: ShiftTemplate) => {
    e.dataTransfer.setData('templateId', template.zst_id.toString());
    e.dataTransfer.setData('type', 'template');
    e.dataTransfer.effectAllowed = 'copy';
  };

  // Drag-and-drop for assigning users to shifts
  const handleUserDragStart = (e: React.DragEvent, userId: number, userName: string) => {
    e.dataTransfer.setData('userId', userId.toString());
    e.dataTransfer.setData('userName', userName);
    e.dataTransfer.setData('type', 'user');
    e.dataTransfer.effectAllowed = 'copy';
  };

  const handleShiftDragOver = (e: React.DragEvent) => {
    e.preventDefault();
    e.stopPropagation();
    const type = e.dataTransfer.types.find(t => t === 'type') ? null : 'unknown';
    // Only allow copy for user drops
    e.dataTransfer.dropEffect = 'copy';
  };

  const handleUserDrop = async (e: React.DragEvent, shift: Shift) => {
    e.preventDefault();
    e.stopPropagation();
    const userId = e.dataTransfer.getData('userId');
    const userName = e.dataTransfer.getData('userName');
    const type = e.dataTransfer.getData('type');

    if (type === 'user' && userId) {
      const userIdInt = parseInt(userId);
      const user = users.find(u => u.usr_id === userIdInt);

      // Check if shift has assigned users (not unassigned)
      const hasAssignedUsers = shift.assigned_users?.some(a => !a.is_unassigned) || false;

      // Check if shift has any role requirement (from unassigned or existing assigned users)
      let shiftRoleId: number | null = null;
      let shiftRoleName: string | null = null;

      // First check for unassigned assignment with role
      const unassignedWithRole = shift.assigned_users?.find(a => a.is_unassigned && a.role_id);
      if (unassignedWithRole) {
        shiftRoleId = unassignedWithRole.role_id || null;
        shiftRoleName = unassignedWithRole.role_name || null;
      } else {
        // Check if any existing assigned user has a role
        const assignedWithRole = shift.assigned_users?.find(a => !a.is_unassigned && a.role_id);
        if (assignedWithRole) {
          shiftRoleId = assignedWithRole.role_id || null;
          shiftRoleName = assignedWithRole.role_name || null;
        }
      }

      // Case 1: Shift has assigned users AND a role → Check if user has matching role, then create new shift
      if (hasAssignedUsers && shiftRoleId) {
        const userHasRole = user?.roles?.some(r => r.role_id === shiftRoleId);

        if (!userHasRole) {
          // User doesn't have the required role - reject
          alert(
            i18n._(t`Fehler: Benutzer ${userName} hat nicht die erforderliche Rolle "${shiftRoleName}" für diese Schicht.`)
          );
          return;
        }

        // User has the role - create new shift directly with that role
        try {
          const newShiftData: any = {
            zs_template_id: shift.zs_template_id,
            zs_ber_id: shift.zs_ber_id || selectedDepartment,
            zs_date: shift.zs_date,
            zs_start_time: shift.zs_start_time,
            zs_end_time: shift.zs_end_time,
            zs_name: shift.zs_name,
            zs_notes: shift.zs_notes,
            zs_color: shift.zs_color,
            zs_status: 'planned',
          };

          const shiftResponse = await axios.post('/zeiterfassung/shifts', newShiftData);
          const newShift = shiftResponse.data;

          // Assign user to the new shift with the required role
          const assignPayload = {
            user_id: userIdInt,
            role_id: shiftRoleId,
          };

          const assignResponse = await axios.post(`/zeiterfassung/shifts/${newShift.zs_id}/assign`, assignPayload);

          // Update the new shift with assignment data
          const updatedNewShift = {
            ...newShift,
            assigned_users: assignResponse.data.assigned_users || [assignResponse.data],
            assigned_count: assignResponse.data.assigned_users ? assignResponse.data.assigned_users.length : 1,
          };

          // Add the new shift to state
          setShifts(prevShifts => [...prevShifts, updatedNewShift]);
          setCoverageRefreshKey(prev => prev + 1);
        } catch (error: any) {
          console.error('Error creating new shift:', error);
          if (error.response?.data?.errors) {
            const errorMsg = Object.values(error.response.data.errors).flat().join(', ');
            alert(`${i18n._(t`Fehler`)}: ${errorMsg}`);
          } else {
            alert(i18n._(t`Fehler beim Erstellen der neuen Schicht`));
          }
        }
        return;
      }

      // Case 2: Shift has unassigned assignment with role → Check role match
      if (unassignedWithRole && shiftRoleId) {
        const userHasRole = user?.roles?.some(r => r.role_id === shiftRoleId);

        if (userHasRole) {
          // User has the required role - assign directly
          try {
            const assignPayload = {
              user_id: userIdInt,
              role_id: shiftRoleId,
            };

            const response = await axios.post(`/zeiterfassung/shifts/${shift.zs_id}/assign`, assignPayload);

            // Update shift with assignment data
            setShifts(prevShifts =>
              prevShifts.map(s =>
                s.zs_id === shift.zs_id
                  ? {
                      ...s,
                      assigned_users: response.data.assigned_users || [response.data],
                      assigned_count: response.data.assigned_users ? response.data.assigned_users.length : (s.assigned_count + 1)
                    }
                  : s
              )
            );
            setCoverageRefreshKey(prev => prev + 1);
          } catch (error: any) {
            console.error('Error assigning user:', error);
            if (error.response?.data?.errors) {
              const errorMsg = Object.values(error.response.data.errors).flat().join(', ');
              alert(`${i18n._(t`Fehler`)}: ${errorMsg}`);
            } else {
              alert(i18n._(t`Fehler beim Zuweisen des Benutzers`));
            }
          }
        } else {
          // User doesn't have the required role - show error and reject assignment
          alert(
            i18n._(t`Fehler: Benutzer ${userName} hat nicht die erforderliche Rolle "${shiftRoleName}" für diese Schicht.`)
          );
          return;
        }
        return;
      }

      // Case 3: Shift has NO assigned users and NO role → Show role selection dialog with user's roles only
      // Get the user's roles to filter the dialog
      const userRoles = user?.roles || [];
      setAvailableRolesForUser(userRoles);

      setPendingAssignment({
        userId: userIdInt,
        userName: userName,
        shift: shift,
      });
      setSelectedRole(null);
      setRoleSelectionOpen(true);
    }
  };

  const handleConfirmRoleAssignment = async () => {
    if (!pendingAssignment) return;

    const { userId: userIdInt, userName, shift } = pendingAssignment;

    // Check if shift has assigned users (not unassigned) - if yes, create new shift
    const hasAssignedUsers = shift.assigned_users?.some(a => !a.is_unassigned) || false;

    if (hasAssignedUsers) {
      // Create a new shift with the new user
      try {
        const newShiftData: any = {
          zs_template_id: shift.zs_template_id,
          zs_ber_id: shift.zs_ber_id || selectedDepartment,
          zs_date: shift.zs_date,
          zs_start_time: shift.zs_start_time,
          zs_end_time: shift.zs_end_time,
          zs_name: shift.zs_name,
          zs_notes: shift.zs_notes,
          zs_color: shift.zs_color,
          zs_status: 'planned',
        };

        const shiftResponse = await axios.post('/zeiterfassung/shifts', newShiftData);
        const newShift = shiftResponse.data;

        // Assign user to the new shift with selected role
        const assignPayload: { user_id: number; role_id?: number } = {
          user_id: userIdInt,
        };
        if (selectedRole) {
          assignPayload.role_id = selectedRole;
        }

        const assignResponse = await axios.post(`/zeiterfassung/shifts/${newShift.zs_id}/assign`, assignPayload);

        // Update the new shift with assignment data
        const updatedNewShift = {
          ...newShift,
          assigned_users: assignResponse.data.assigned_users || [assignResponse.data],
          assigned_count: assignResponse.data.assigned_users ? assignResponse.data.assigned_users.length : 1,
        };

        // Add the new shift to state
        setShifts(prevShifts => [...prevShifts, updatedNewShift]);
        setCoverageRefreshKey(prev => prev + 1);
      } catch (error: any) {
        console.error('Error creating new shift:', error);
        if (error.response?.data?.errors) {
          const errorMsg = Object.values(error.response.data.errors).flat().join(', ');
          alert(`${i18n._(t`Fehler`)}: ${errorMsg}`);
        } else {
          alert(i18n._(t`Fehler beim Erstellen der neuen Schicht`));
        }
      }
    } else {
      // Assign to the existing shift (no assigned users yet)
      try {
        const assignPayload: { user_id: number; role_id?: number } = {
          user_id: userIdInt,
        };
        if (selectedRole) {
          assignPayload.role_id = selectedRole;
        }

        const response = await axios.post(`/zeiterfassung/shifts/${shift.zs_id}/assign`, assignPayload);

        // Update with actual server data including role information
        setShifts(prevShifts =>
          prevShifts.map(s =>
            s.zs_id === shift.zs_id
              ? {
                  ...s,
                  assigned_users: response.data.assigned_users || [response.data],
                  assigned_count: response.data.assigned_users ? response.data.assigned_users.length : (s.assigned_count + 1)
                }
              : s
          )
        );
        setCoverageRefreshKey(prev => prev + 1);
      } catch (error: any) {
        console.error('Error assigning user:', error);
        if (error.response?.data?.errors) {
          const errorMsg = Object.values(error.response.data.errors).flat().join(', ');
          alert(`${i18n._(t`Fehler`)}: ${errorMsg}`);
        } else {
          alert(i18n._(t`Fehler beim Zuweisen des Benutzers`));
        }
      }
    }

    // Close dialog and reset
    setRoleSelectionOpen(false);
    setPendingAssignment(null);
    setSelectedRole(null);
  };

  const handleCancelRoleAssignment = () => {
    setRoleSelectionOpen(false);
    setPendingAssignment(null);
    setSelectedRole(null);
  };

  // Template role selection handlers
  const handleConfirmTemplateRole = async () => {
    if (!pendingTemplateData) return;

    const { template, date } = pendingTemplateData;

    try {
      const shiftData: any = {
        zs_template_id: template.zst_id,
        zs_ber_id: selectedDepartment,
        zs_date: date,
        zs_start_time: template.zst_start_time,
        zs_end_time: template.zst_end_time,
        zs_status: 'planned',
      };

      // Include role_id if selected
      if (selectedTemplateRole) {
        shiftData.role_id = selectedTemplateRole;
      }

      const response = await axios.post('/zeiterfassung/shifts', shiftData);

      // Add the new shift to the state
      const newShift = response.data;
      setShifts(prevShifts => [...prevShifts, newShift]);
      setCoverageRefreshKey(prev => prev + 1);

      // Close dialog and reset
      setTemplateRoleDialogOpen(false);
      setPendingTemplateData(null);
      setSelectedTemplateRole(null);
    } catch (error: any) {
      console.error('Error creating shift from template:', error);
      if (error.response?.data?.errors) {
        const errorMsg = Object.values(error.response.data.errors).flat().join(', ');
        alert(`${i18n._(t`Fehler`)}: ${errorMsg}`);
      } else {
        alert(i18n._(t`Fehler beim Erstellen der Schicht`));
      }
      // Still close the dialog on error
      setTemplateRoleDialogOpen(false);
      setPendingTemplateData(null);
      setSelectedTemplateRole(null);
    }
  };

  const handleCancelTemplateRole = () => {
    setTemplateRoleDialogOpen(false);
    setPendingTemplateData(null);
    setSelectedTemplateRole(null);
  };

  // Context menu handlers
  const handleContextMenu = (e: React.MouseEvent, shift?: Shift, targetDate?: string) => {
    e.preventDefault();
    e.stopPropagation(); // Prevent event from bubbling to parent day container

    // Close existing menu first, then open new one
    // This ensures smooth transition when right-clicking different items
    setContextMenu(null);

    // Use setTimeout to allow the menu to close before opening the new one
    setTimeout(() => {
      setContextMenu({
        mouseX: e.clientX - 2,
        mouseY: e.clientY - 4,
        shift,
        targetDate,
      });
    }, 0);
  };

  const handleCloseContextMenu = () => {
    setContextMenu(null);
  };

  const handleCopyShift = () => {
    if (contextMenu) {
      setCopiedShift(contextMenu.shift);
      localStorage.setItem('copiedShift', JSON.stringify(contextMenu.shift));
      handleCloseContextMenu();
    }
  };

  const handlePasteShift = async (targetDate: string) => {
    if (!copiedShift) return;

    try {
      const shiftData: any = {
        zs_template_id: copiedShift.zs_template_id,
        zs_ber_id: copiedShift.zs_ber_id || selectedDepartment,
        zs_date: targetDate,
        zs_start_time: copiedShift.zs_start_time,
        zs_end_time: copiedShift.zs_end_time,
        zs_name: copiedShift.zs_name,
        zs_notes: copiedShift.zs_notes,
        zs_color: copiedShift.zs_color,
        zs_status: 'planned',
      };

      const response = await axios.post('/zeiterfassung/shifts', shiftData);
      const newShift = response.data;

      // Copy user assignments
      for (const assignment of copiedShift.assigned_users) {
        try {
          await axios.post(`/zeiterfassung/shifts/${newShift.zs_id}/assign`, {
            user_id: assignment.user_id,
            role_id: assignment.role_id,
          });
        } catch (err) {
          console.error('Error assigning user:', err);
        }
      }

      loadShifts();
      setCoverageRefreshKey(prev => prev + 1); // Refresh coverage indicators
      handleCloseContextMenu();
    } catch (error: any) {
      console.error('Error pasting shift:', error);
      if (error.response?.data?.errors) {
        const errorMsg = Object.values(error.response.data.errors).flat().join(', ');
        alert(`${i18n._(t`Fehler`)}: ${errorMsg}`);
      } else {
        alert(i18n._(t`Fehler beim Einfügen der Schicht`));
      }
    }
  };

  const handleDeleteShift = async () => {
    if (!contextMenu?.shift) return;

    if (confirm(i18n._(t`Möchten Sie diese Schicht wirklich löschen?`))) {
      const success = await deleteShift(contextMenu.shift.zs_id);
      if (success) {
        setCoverageRefreshKey(prev => prev + 1);
        handleCloseContextMenu();
      }
    }
  };

  const handleContextMenuPaste = async () => {
    if (!contextMenu) return;

    // Use targetDate if right-clicking on day, or shift's date if right-clicking on shift
    const pasteDate = contextMenu.targetDate || contextMenu.shift?.zs_date;
    if (pasteDate) {
      await handlePasteShift(pasteDate);
    }
  };

  const handleBulkDelete = async () => {
    if (selectedShifts.size === 0) return;

    if (confirm(i18n._(t`Möchten Sie wirklich ${selectedShifts.size} Schicht(en) löschen?`))) {
      const deletePromises = Array.from(selectedShifts).map(shiftId => deleteShift(shiftId));
      await Promise.all(deletePromises);
      handleDeselectAll();
    }
  };

  const handleBulkConfirmWeek = async () => {
    if (!selectedDepartment) {
      alert(i18n._(t`Bitte wählen Sie einen Bereich aus`));
      return;
    }

    if (confirm(i18n._(t`Möchten Sie alle geplanten Schichten ab jetzt bis zum Ende dieser Woche bestätigen?`))) {
      const success = await bulkConfirmWeek();
      if (success) {
        setCoverageRefreshKey(prev => prev + 1);
      }
    }
  };

  // Group shifts by date
  const shiftsByDate: Record<string, Shift[]> = {};
  shifts.forEach((shift) => {
    if (!shiftsByDate[shift.zs_date]) {
      shiftsByDate[shift.zs_date] = [];
    }
    shiftsByDate[shift.zs_date].push(shift);
  });

  if (loading) {
    return <LoadingState />;
  }

  return (
    <Box>
      {/* Error Alert */}
      {shiftsError && (
        <ErrorAlert
          message={shiftsError}
          onRetry={loadShifts}
          sx={{ mb: 3 }}
        />
      )}

      {/* Joyride Tour */}
      <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`),
        }}
      />

      {/* Header */}
      <Box display="flex" justifyContent="space-between" alignItems="center" mb={3}>
        <Box display="flex" alignItems="center" gap={2}>
          <Typography variant="h5" fontWeight="bold">
            <Trans>Schichten</Trans>
          </Typography>

          {/* Department Selector */}
          {departments.length > 0 && (
            <FormControl size="small" sx={{ minWidth: 200 }} className="department-selector">
              <InputLabel id="department-select-label">
                <Trans>Bereich</Trans>
              </InputLabel>
              <Select
                labelId="department-select-label"
                value={selectedDepartment}
                label={i18n._(t`Bereich`)}
                onChange={(e) => setSelectedDepartment(e.target.value as number)}
              >
                {departments.map((dept) => (
                  <MenuItem key={dept.ber_id} value={dept.ber_id}>
                    {dept.ber_name}
                  </MenuItem>
                ))}
              </Select>
            </FormControl>
          )}

          {/* Group Selector */}
          {selectedDepartment && (
            <FormControl size="small" sx={{ minWidth: 180 }} className="group-selector">
              <InputLabel id="group-select-label">
                <Trans>Gruppe</Trans>
              </InputLabel>
              <Select
                labelId="group-select-label"
                value={selectedGroup}
                label={i18n._(t`Gruppe`)}
                onChange={(e) => setSelectedGroup(e.target.value as number | 'all')}
              >
                <MenuItem value="all">
                  <Trans>Alle Gruppen</Trans>
                </MenuItem>
                {groups.map((group) => (
                  <MenuItem key={group.usg_id} value={group.usg_id}>
                    {group.usg_name}
                  </MenuItem>
                ))}
              </Select>
            </FormControl>
          )}

          <Tooltip title={i18n._(t`Vorlagen ${showTemplatesPanel ? 'ausblenden' : 'anzeigen'}`)}>
            <IconButton
              onClick={() => setShowTemplatesPanel(!showTemplatesPanel)}
              size="small"
              color={showTemplatesPanel ? "primary" : "default"}
            >
              <ViewSidebarIcon />
            </IconButton>
          </Tooltip>

          <Tooltip title={i18n._(t`Mitarbeiter ${showUsersPanel ? 'ausblenden' : 'anzeigen'}`)}>
            <IconButton
              onClick={() => setShowUsersPanel(!showUsersPanel)}
              size="small"
              color={showUsersPanel ? "primary" : "default"}
            >
              <PeopleIcon />
            </IconButton>
          </Tooltip>

          <IconButton onClick={handleStartTour} size="small" color="primary">
            <HelpOutlineIcon />
          </IconButton>
        </Box>
        <Box display="flex" gap={2} className="plan-buttons">
          <Button
            variant="outlined"
            color="success"
            startIcon={<PlaylistAddCheckIcon />}
            onClick={handleBulkConfirmWeek}
            disabled={!selectedDepartment}
          >
            <Trans>Woche bestätigen</Trans>
          </Button>
          <Button
            variant="outlined"
            color="primary"
            startIcon={<DownloadIcon />}
            onClick={handleOpenExportDialog}
            className="export-pdf-button"
          >
            <Trans>PDF Exportieren</Trans>
          </Button>
          <Button variant="outlined" color="primary" onClick={handleOpenApplyPlanDialog}>
            <Trans>Plan anwenden</Trans>
          </Button>
          <Button variant="contained" color="primary" onClick={handleOpenSavePlanDialog}>
            <Trans>Aktuellen Plan speichern</Trans>
          </Button>
        </Box>
      </Box>

      {/* Role Legend Carousel */}
      {allRoles.length > 0 && (
        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 3 }}>
          <Typography variant="caption" color="text.secondary" sx={{ fontWeight: 'bold' }}>
            <Trans>Rollen:</Trans>
          </Typography>
          {allRoles.length > rolesPerPage && (
            <IconButton
              size="small"
              onClick={() => setRoleLegendPage(Math.max(0, roleLegendPage - 1))}
              disabled={roleLegendPage === 0}
            >
              <ChevronLeftIcon fontSize="small" />
            </IconButton>
          )}
          <Box sx={{ display: 'flex', gap: 1 }}>
            {allRoles
              .slice(roleLegendPage * rolesPerPage, (roleLegendPage + 1) * rolesPerPage)
              .map((role) => (
                <Chip
                  key={role.zr_id}
                  label={role.zr_name}
                  size="small"
                  sx={{
                    height: 20,
                    fontSize: '0.7rem',
                    backgroundColor: role.zr_color,
                    color: role.zr_color ? getContrastColor(role.zr_color) : 'inherit',
                    '& .MuiChip-label': {
                      px: 1,
                    },
                  }}
                />
              ))}
          </Box>
          {allRoles.length > rolesPerPage && (
            <IconButton
              size="small"
              onClick={() => setRoleLegendPage(Math.min(Math.ceil(allRoles.length / rolesPerPage) - 1, roleLegendPage + 1))}
              disabled={roleLegendPage >= Math.ceil(allRoles.length / rolesPerPage) - 1}
            >
              <ChevronRightIcon fontSize="small" />
            </IconButton>
          )}
          {allRoles.length > rolesPerPage && (
            <Typography variant="caption" color="text.secondary">
              {roleLegendPage * rolesPerPage + 1}-{Math.min((roleLegendPage + 1) * rolesPerPage, allRoles.length)} / {allRoles.length}
            </Typography>
          )}
        </Box>
      )}

      {/* Week Navigator */}
      <WeekNavigator
        weekInfo={weekInfo}
        onWeekChange={setWeekInfo}
        showYear={false}
      />

      {/* Main Layout with Side Panels */}
      <Box display="flex" gap={2} sx={{ height: 'calc(100vh - 350px)', minHeight: '500px' }}>
        {/* Left Panel - Shift Templates */}
        {showTemplatesPanel && (
          <Paper elevation={2} sx={{ width: { xs: '200px', md: '220px', lg: '250px' }, overflow: 'auto', p: 2 }}>
          <Typography variant="h6" gutterBottom>
            <Trans>Schichtvorlagen</Trans>
          </Typography>
          <Divider sx={{ mb: 2 }} />
          {templatesLoading ? (
            <LoadingState size={24} />
          ) : templates.length === 0 ? (
            <EmptyState
              message={i18n._(t`Keine Vorlagen verfügbar`)}
            />
          ) : (
            <Box display="flex" flexDirection="column" gap={1}>
              {templates.map((template) => (
                <Box
                  key={template.zst_id}
                  draggable
                  onDragStart={(e) => handleTemplateDragStart(e, template)}
                  sx={{
                    p: 1.5,
                    borderRadius: 1,
                    backgroundColor: template.zst_color,
                    color: getContrastColor(template.zst_color),
                    cursor: 'grab',
                    '&:active': {
                      cursor: 'grabbing',
                    },
                    '&:hover': {
                      opacity: 0.9,
                      boxShadow: 2,
                    },
                  }}
                >
                  <Typography variant="body2" fontWeight="bold">
                    {template.zst_name}
                  </Typography>
                  <Typography variant="caption" display="block">
                    {template.zst_start_time.substring(0, 5)} - {template.zst_end_time.substring(0, 5)}
                  </Typography>
                  {template.zst_min_workers > 0 && (
                    <Chip
                      label={`Min: ${template.zst_min_workers}`}
                      size="small"
                      sx={{
                        mt: 0.5,
                        height: 18,
                        fontSize: '0.65rem',
                        backgroundColor: 'rgba(255, 255, 255, 0.2)',
                        color: 'inherit',
                      }}
                    />
                  )}
                </Box>
              ))}
            </Box>
          )}
          </Paper>
        )}

        {/* Center - Calendar Grid */}
        <Paper elevation={2} sx={{ flex: 1, overflow: 'auto', maxHeight: '100%' }} className="calendar-grid">
          <Box display="flex" flexDirection="column" sx={{ height: '100%' }}>
            {/* Calendar Header (Days) */}
            <Box
              display="flex"
              sx={{
                borderBottom: '2px solid #dee2e6',
                position: 'sticky',
                top: 0,
                backgroundColor: '#fff',
                zIndex: 10,
              }}
            >
              {weekInfo.days.map((day) => (
                <Box
                  key={day.dateString}
                  sx={{
                    flex: 1,
                    minWidth: '150px',
                    p: 2,
                    textAlign: 'center',
                    borderRight: '1px solid #dee2e6',
                    backgroundColor: day.isToday ? '#e3f2fd' : 'transparent',
                    position: 'relative',
                  }}
                >
                  <Typography variant="caption" color="text.secondary">
                    {day.dayName}
                  </Typography>
                  <Box display="flex" alignItems="center" justifyContent="center" gap={0.5}>
                    <Typography variant="h6" fontWeight="bold">
                      {day.dayOfMonth}. {day.month}
                    </Typography>
                    {/* Coverage Indicator */}
                    <DayCoverageIndicator
                      key={`${day.dateString}-${coverageRefreshKey}`}
                      date={day.dateString}
                      berId={selectedDepartment}
                      onShowDetails={handleShowCoverageDetails}
                    />
                  </Box>
                </Box>
              ))}
            </Box>

            {/* Calendar Body (Shifts) */}
            <Box display="flex" sx={{ minHeight: '400px', flex: 1 }}>
              {shiftsLoading ? (
                <Box display="flex" justifyContent="center" alignItems="center" width="100%">
                  <LoadingState />
                </Box>
              ) : (
                weekInfo.days.map((day) => (
                  <Box
                    key={day.dateString}
                    onDragOver={handleDayDragOver}
                    onDrop={(e) => handleDayDrop(e, day.dateString)}
                    onContextMenu={(e) => handleContextMenu(e, undefined, day.dateString)}
                    sx={{
                      flex: 1,
                      minWidth: '150px',
                      borderRight: '1px solid #dee2e6',
                      display: 'flex',
                      flexDirection: 'column',
                      overflow: 'hidden',
                    }}
                  >
                    {/* Scrollable shifts container */}
                    <Box
                      sx={{
                        flex: 1,
                        overflow: 'auto',
                        p: 1,
                        display: 'flex',
                        flexDirection: 'column',
                        gap: 1,
                      }}
                    >
                      {/* Shifts for this day */}
                      {shiftsByDate[day.dateString]?.map((shift) => (
                      <Box
                        key={shift.zs_id}
                        draggable={!selectionMode}
                        onDragStart={(e) => !selectionMode && handleShiftDragStart(e, shift)}
                        onDragOver={handleShiftDragOver}
                        onDrop={(e) => handleUserDrop(e, shift)}
                        onClick={() => handleShiftClick(shift)}
                        onContextMenu={(e) => handleContextMenu(e, shift)}
                        sx={{
                          p: 1.5,
                          borderRadius: 1,
                          backgroundColor: shift.display_color,
                          color: getContrastColor(shift.display_color),
                          cursor: selectionMode ? 'pointer' : 'move',
                          '&:hover': {
                            opacity: 0.9,
                            boxShadow: 2,
                          },
                          position: 'relative',
                          border: selectedShifts.has(shift.zs_id) ? '2px solid #fff' : 'none',
                          display: 'flex',
                          flexDirection: 'column',
                        }}
                      >
                        {/* Selection Checkbox */}
                        {selectionMode && (
                          <Checkbox
                            checked={selectedShifts.has(shift.zs_id)}
                            onChange={() => toggleShiftSelection(shift.zs_id)}
                            onClick={(e) => e.stopPropagation()}
                            sx={{
                              position: 'absolute',
                              top: 4,
                              right: 4,
                              color: 'white',
                              '&.Mui-checked': {
                                color: 'white',
                              },
                              padding: 0,
                            }}
                          />
                        )}

                        {/* Status Indicator */}
                        {!selectionMode && (shift.zs_status === 'confirmed' || shift.zs_status === 'cancelled') && (
                          <Box
                            sx={{
                              position: 'absolute',
                              top: 4,
                              right: 4,
                            }}
                          >
                            {shift.zs_status === 'confirmed' && (
                              <Tooltip title={i18n._(t`Bestätigt`)}>
                                <CheckCircleIcon
                                  sx={{
                                    fontSize: 20,
                                    color: '#4caf50',
                                    filter: 'drop-shadow(0px 1px 2px rgba(0,0,0,0.3))',
                                  }}
                                />
                              </Tooltip>
                            )}
                            {shift.zs_status === 'cancelled' && (
                              <Tooltip title={i18n._(t`Abgesagt`)}>
                                <CancelIcon
                                  sx={{
                                    fontSize: 20,
                                    color: '#f44336',
                                    filter: 'drop-shadow(0px 1px 2px rgba(0,0,0,0.3))',
                                  }}
                                />
                              </Tooltip>
                            )}
                          </Box>
                        )}

                        <Typography variant="caption" fontWeight="bold" display="block">
                          {shift.zs_start_time} - {shift.zs_end_time}
                        </Typography>
                        <Typography variant="caption" display="block" sx={{ opacity: 0.9 }}>
                          {shift.display_name}
                        </Typography>

                        {/* Role Indicators */}
                        {shift.assigned_users.some(a => a.role_name) && (
                          <Box display="flex" gap={0.5} mt={0.5} flexWrap="wrap" alignItems="center">
                            {shift.assigned_users
                              .filter(a => a.role_name)
                              .map((assignment, idx) => (
                                <Chip
                                  key={`${assignment.assignment_id}-${idx}`}
                                  label={assignment.role_name}
                                  size="small"
                                  sx={{
                                    height: 18,
                                    fontSize: '0.65rem',
                                    backgroundColor: assignment.role_color,
                                    color: assignment.role_color ? getContrastColor(assignment.role_color) : 'inherit',
                                    '& .MuiChip-label': {
                                      px: 0.75,
                                    },
                                  }}
                                />
                              ))}
                          </Box>
                        )}

                        {/* Assigned Users Avatars */}
                        {shift.assigned_users.filter(a => !a.is_unassigned).length > 0 && (
                          <Box display="flex" gap={0.5} mt={1} flexWrap="wrap">
                            {shift.assigned_users.filter(a => !a.is_unassigned).map((assignment) => (
                              <Tooltip key={assignment.assignment_id} title={assignment.user_name}>
                                <UserAvatar
                                  photoUrl={assignment.user_photourl}
                                  initials={assignment.user_avatar}
                                  fullName={assignment.user_name || 'Unknown'}
                                  sx={{
                                    width: 24,
                                    height: 24,
                                    fontSize: '0.7rem',
                                  }}
                                />
                              </Tooltip>
                            ))}
                          </Box>
                        )}
                      </Box>
                    ))}
                    </Box>

                    {/* Add Shift Button - Fixed at bottom */}
                    <Box sx={{ p: 1, borderTop: '1px solid #dee2e6' }}>
                      <Button
                        variant="outlined"
                        color="primary"
                        size="small"
                        fullWidth
                        startIcon={<AddIcon />}
                        onClick={() => handleCreateShift(day.dateString)}
                        className="add-shift-button"
                        sx={{
                          textTransform: 'none',
                          borderStyle: 'dashed',
                        }}
                      >
                        <Trans>Schicht</Trans>
                      </Button>
                    </Box>
                  </Box>
                ))
              )}
            </Box>
          </Box>
        </Paper>

        {/* Right Panel - Users */}
        {showUsersPanel && (
          <Paper elevation={2} sx={{ width: { xs: '200px', md: '220px', lg: '250px' }, overflow: 'auto', p: 2 }}>
          <Typography variant="h6" gutterBottom>
            <Trans>Mitarbeiter</Trans>
          </Typography>
          <Divider sx={{ mb: 2 }} />

          {/* Search Field */}
          <TextField
            fullWidth
            placeholder={i18n._(t`Mitarbeiter suchen...`)}
            variant="outlined"
            size="small"
            value={userSearchTerm}
            onChange={(e) => setUserSearchTerm(e.target.value)}
            sx={{ mb: 2 }}
            InputProps={{
              startAdornment: (
                <InputAdornment position="start">
                  <SearchIcon />
                </InputAdornment>
              ),
            }}
          />

          <Typography variant="subtitle2" gutterBottom>
            <Trans>Verfügbare Mitarbeiter</Trans> ({filteredUsers.length})
          </Typography>

          {usersLoading ? (
            <LoadingState size={24} />
          ) : filteredUsers.length === 0 ? (
            <EmptyState
              message={i18n._(t`Keine Mitarbeiter verfügbar`)}
            />
          ) : (
            <Box display="flex" flexDirection="column" gap={1}>
              {filteredUsers.map((user: any) => {
                const hasLeave = user.leaveInfo !== null;
                const coversEntireWeek = user.leaveInfo?.coversEntireWeek || false;
                const leaveType = user.leaveInfo?.type;
                const leaveFrom = user.leaveInfo?.from;
                const leaveTo = user.leaveInfo?.to;

                return (
                  <Box
                    key={user.usr_id}
                    draggable={!coversEntireWeek}
                    onDragStart={(e) => !coversEntireWeek && handleUserDragStart(e, user.usr_id, user.full_name)}
                    sx={{
                      p: 1.5,
                      borderRadius: 1,
                      backgroundColor: hasLeave ? (leaveType === 'sick' ? '#ffebee' : '#e8f5e9') : '#f5f5f5',
                      cursor: coversEntireWeek ? 'not-allowed' : 'grab',
                      display: 'flex',
                      alignItems: 'flex-start',
                      gap: 1,
                      opacity: coversEntireWeek ? 0.6 : 1,
                      border: hasLeave ? (leaveType === 'sick' ? '1px solid #ef5350' : '1px solid #66bb6a') : 'none',
                      '&:active': {
                        cursor: coversEntireWeek ? 'not-allowed' : 'grabbing',
                      },
                      '&:hover': {
                        backgroundColor: coversEntireWeek
                          ? (leaveType === 'sick' ? '#ffebee' : '#e8f5e9')
                          : (hasLeave ? (leaveType === 'sick' ? '#ffcdd2' : '#c8e6c9') : '#e0e0e0'),
                        boxShadow: coversEntireWeek ? 0 : 2,
                      },
                    }}
                  >
                    {hasLeave && (
                      <Box sx={{ display: 'flex', alignItems: 'center', mt: 0.5 }}>
                        {leaveType === 'sick' ? (
                          <LocalHospitalIcon sx={{ fontSize: 18, color: '#ef5350' }} />
                        ) : (
                          <BeachAccessIcon sx={{ fontSize: 18, color: '#ffa726' }} />
                        )}
                      </Box>
                    )}
                    <UserAvatar
                      photoUrl={user.photourl}
                      initials={user.initials}
                      fullName={user.full_name}
                      sx={{
                        width: 32,
                        height: 32,
                        fontSize: '0.75rem',
                      }}
                    />
                    <Box sx={{ flex: 1, minWidth: 0 }}>
                      <Typography variant="body2" fontWeight="bold" noWrap>
                        {user.full_name}
                      </Typography>
                      {hasLeave && (
                        <Typography variant="caption" display="block" sx={{ color: leaveType === 'sick' ? '#d32f2f' : '#f57c00', mt: 0.25 }}>
                          {leaveType === 'sick' ? <Trans>Krank</Trans> : <Trans>Urlaub</Trans>}
                          {!coversEntireWeek && (
                            <> ({new Date(leaveFrom).toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit' })} - {new Date(leaveTo).toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit' })})</>
                          )}
                        </Typography>
                      )}
                      {user.roles && user.roles.length > 0 && (
                        <Box display="flex" gap={0.5} flexWrap="wrap" mt={0.5}>
                          {user.roles.slice(0, 2).map((role: any) => (
                            <Chip
                              key={role.role_id}
                              label={role.role_name}
                              size="small"
                              sx={{
                                height: 18,
                                fontSize: '0.65rem',
                                backgroundColor: role.role_color,
                                color: getContrastColor(role.role_color),
                              }}
                            />
                          ))}
                          {user.roles.length > 2 && (
                            <Chip
                              label={`+${user.roles.length - 2}`}
                              size="small"
                              sx={{
                                height: 18,
                                fontSize: '0.65rem',
                              }}
                            />
                          )}
                        </Box>
                      )}
                    </Box>
                  </Box>
                );
              })}
            </Box>
          )}
          </Paper>
        )}
      </Box>

      {/* Create Shift Modal */}
      <CreateShiftModal
        open={createModalOpen}
        onClose={handleCloseModal}
        selectedDate={selectedDate}
        selectedDepartment={selectedDepartment}
        onShiftCreated={handleShiftCreated}
      />

      {/* Edit Shift Modal */}
      {selectedShift && (
        <EditShiftModal
          open={editModalOpen}
          onClose={handleCloseEditModal}
          shift={selectedShift}
          onShiftUpdated={handleShiftUpdated}
          onShiftCreated={handleShiftCreated}
        />
      )}

      {/* Context Menu */}
      <Menu
        open={contextMenu !== null}
        onClose={handleCloseContextMenu}
        anchorReference="anchorPosition"
        anchorPosition={
          contextMenu !== null
            ? { top: contextMenu.mouseY, left: contextMenu.mouseX }
            : undefined
        }
      >
        {/* Context menu for SHIFT (right-click on shift box) */}
        {contextMenu?.shift && (
          <>
            <MenuItem onClick={handleCopyShift}>
              <ListItemIcon>
                <ContentCopyIcon fontSize="small" />
              </ListItemIcon>
              <ListItemText><Trans>Kopieren</Trans></ListItemText>
            </MenuItem>
            <MenuItem onClick={handleContextMenuPaste} disabled={!copiedShift}>
              <ListItemIcon>
                <ContentPasteIcon fontSize="small" />
              </ListItemIcon>
              <ListItemText><Trans>Einfügen</Trans></ListItemText>
            </MenuItem>
            <MenuItem onClick={handleDeleteShift}>
              <ListItemIcon>
                <DeleteIcon fontSize="small" />
              </ListItemIcon>
              <ListItemText><Trans>Löschen</Trans></ListItemText>
            </MenuItem>
          </>
        )}

        {/* Context menu for DAY (right-click on empty area in day column) */}
        {!contextMenu?.shift && contextMenu?.targetDate && (
          <>
            <MenuItem onClick={handleContextMenuPaste} disabled={!copiedShift}>
              <ListItemIcon>
                <ContentPasteIcon fontSize="small" />
              </ListItemIcon>
              <ListItemText><Trans>Einfügen</Trans></ListItemText>
            </MenuItem>
            <MenuItem onClick={handleSelectAll}>
              <ListItemIcon>
                <SelectAllIcon fontSize="small" />
              </ListItemIcon>
              <ListItemText><Trans>Alle auswählen</Trans></ListItemText>
            </MenuItem>
          </>
        )}
      </Menu>

      {/* Floating Action Buttons for Selection Mode */}
      {selectionMode && (
        <Box
          sx={{
            position: 'fixed',
            bottom: 24,
            right: 24,
            display: 'flex',
            flexDirection: 'column',
            gap: 2,
            zIndex: 1000,
          }}
        >
          <Fab
            color="error"
            onClick={handleBulkDelete}
            disabled={selectedShifts.size === 0}
            sx={{ boxShadow: 3 }}
          >
            <DeleteIcon />
          </Fab>
          <Fab
            color="default"
            onClick={handleDeselectAll}
            sx={{ boxShadow: 3 }}
          >
            <CloseIcon />
          </Fab>
        </Box>
      )}

      {/* Save Plan Dialog */}
      <Dialog open={savePlanDialogOpen} onClose={() => setSavePlanDialogOpen(false)} maxWidth="sm" fullWidth>
        <DialogTitle><Trans>Aktuellen Plan speichern</Trans></DialogTitle>
        <DialogContent>
          {planError && (
            <Alert severity="error" sx={{ mb: 2 }} onClose={() => setPlanError('')}>
              {planError}
            </Alert>
          )}
          <TextField
            autoFocus
            margin="dense"
            label={i18n._(t`Plan Name`)}
            type="text"
            fullWidth
            value={planName}
            onChange={(e) => setPlanName(e.target.value)}
            required
          />
          <TextField
            margin="dense"
            label={i18n._(t`Beschreibung (optional)`)}
            type="text"
            fullWidth
            multiline
            rows={3}
            value={planDescription}
            onChange={(e) => setPlanDescription(e.target.value)}
          />
          <FormControl fullWidth margin="dense">
            <InputLabel id="week-count-label">
              <Trans>Anzahl Wochen</Trans>
            </InputLabel>
            <Select
              labelId="week-count-label"
              value={planWeekCount}
              label={i18n._(t`Anzahl Wochen`)}
              onChange={(e) => setPlanWeekCount(e.target.value as number)}
            >
              {[1, 2, 3, 4, 5, 6].map((count) => (
                <MenuItem key={count} value={count}>
                  {count} {count === 1 ? i18n._(t`Woche`) : i18n._(t`Wochen`)} (KW {weekInfo.week}-{weekInfo.week + count - 1})
                </MenuItem>
              ))}
            </Select>
          </FormControl>
          <Typography variant="caption" color="text.secondary" sx={{ mt: 1, display: 'block' }}>
            <Trans>Der Plan speichert alle Schichten des ausgewählten Bereichs für die nächsten {planWeekCount} Woche(n).</Trans>
          </Typography>
        </DialogContent>
        <DialogActions>
          <Button onClick={() => setSavePlanDialogOpen(false)}><Trans>Abbrechen</Trans></Button>
          <Button onClick={handleSavePlan} variant="contained" color="primary"><Trans>Speichern</Trans></Button>
        </DialogActions>
      </Dialog>

      {/* Apply Plan Dialog */}
      <Dialog open={applyPlanDialogOpen} onClose={() => setApplyPlanDialogOpen(false)} maxWidth="sm" fullWidth>
        <DialogTitle><Trans>Plan anwenden</Trans></DialogTitle>
        <DialogContent>
          {planError && (
            <Alert severity="error" sx={{ mb: 2 }} onClose={() => setPlanError('')}>
              {planError}
            </Alert>
          )}
          <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
            <Trans>Wählen Sie einen gespeicherten Plan aus, um ihn auf KW {weekInfo.week} anzuwenden.</Trans>
          </Typography>

          <FormControlLabel
            control={
              <Checkbox
                checked={includeUserAssignments}
                onChange={(e) => setIncludeUserAssignments(e.target.checked)}
                color="primary"
              />
            }
            label={i18n._(t`Benutzerzuweisungen übernehmen`)}
            sx={{ mb: 2 }}
          />

          {plans.length === 0 ? (
            <Typography variant="body2" color="text.secondary" align="center" sx={{ py: 3 }}>
              <Trans>Keine gespeicherten Pläne verfügbar</Trans>
            </Typography>
          ) : (
            <List>
              {plans.map((plan) => (
                <ListItem key={plan.zp_id} disablePadding>
                  <ListItemButton onClick={() => handleApplyPlan(plan.zp_id)}>
                    <Box sx={{ width: '100%' }}>
                      <Typography variant="subtitle1" fontWeight="bold">
                        {plan.zp_name}
                      </Typography>
                      {plan.zp_description && (
                        <Typography variant="body2" color="text.secondary">
                          {plan.zp_description}
                        </Typography>
                      )}
                      <Typography variant="caption" color="text.secondary" display="block">
                        {plan.shifts_count} <Trans>Schichten</Trans> • {plan.zp_week_count || 1} {(plan.zp_week_count || 1) === 1 ? i18n._(t`Woche`) : i18n._(t`Wochen`)}
                        {plan.department && ` • ${plan.department.ber_name}`}
                      </Typography>
                    </Box>
                  </ListItemButton>
                </ListItem>
              ))}
            </List>
          )}
        </DialogContent>
        <DialogActions>
          <Button onClick={() => setApplyPlanDialogOpen(false)}><Trans>Abbrechen</Trans></Button>
        </DialogActions>
      </Dialog>

      {/* Export Dialog */}
      <Dialog open={exportDialogOpen} onClose={() => setExportDialogOpen(false)} maxWidth="sm" fullWidth>
        <DialogTitle><Trans>Schichtplan exportieren</Trans></DialogTitle>
        <DialogContent>
          {exportError && (
            <Alert severity="error" sx={{ mb: 2 }} onClose={() => setExportError('')}>
              {exportError}
            </Alert>
          )}
          <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
            <Trans>Exportieren Sie den Schichtplan für den ausgewählten Bereich als PDF.</Trans>
          </Typography>
          <FormControl fullWidth margin="dense">
            <InputLabel id="export-week-count-label">
              <Trans>Anzahl Wochen</Trans>
            </InputLabel>
            <Select
              labelId="export-week-count-label"
              value={exportWeekCount}
              label={i18n._(t`Anzahl Wochen`)}
              onChange={(e) => setExportWeekCount(e.target.value as number)}
            >
              {[1, 2, 3, 4, 5, 6].map((count) => (
                <MenuItem key={count} value={count}>
                  {count} {count === 1 ? i18n._(t`Woche`) : i18n._(t`Wochen`)} (KW {weekInfo.week}-{weekInfo.week + count - 1})
                </MenuItem>
              ))}
            </Select>
          </FormControl>
          <Typography variant="caption" color="text.secondary" sx={{ mt: 1, display: 'block' }}>
            <Trans>Der Export umfasst alle Schichten aller Mitarbeiter im ausgewählten Bereich für die gewählte Anzahl an Wochen.</Trans>
          </Typography>
        </DialogContent>
        <DialogActions>
          <Button onClick={() => setExportDialogOpen(false)}><Trans>Abbrechen</Trans></Button>
          <Button onClick={handleExportPlan} variant="contained" color="primary" startIcon={<DownloadIcon />}>
            <Trans>Exportieren</Trans>
          </Button>
        </DialogActions>
      </Dialog>

      {/* Coverage Details Modal */}
      <CoverageDetailsModal
        open={coverageDetailsOpen}
        onClose={handleCloseCoverageDetails}
        coverage={selectedCoverage}
      />

      {/* Role Selection Dialog */}
      <Dialog open={roleSelectionOpen} onClose={handleCancelRoleAssignment} maxWidth="sm" fullWidth>
        <DialogTitle>
          <Trans>Rolle auswählen</Trans>
        </DialogTitle>
        <DialogContent>
          <Box sx={{ pt: 2 }}>
            <FormControl fullWidth>
              <InputLabel id="role-select-label">
                <Trans>Rolle (optional)</Trans>
              </InputLabel>
              <Select
                labelId="role-select-label"
                value={selectedRole || ''}
                label={i18n._(t`Rolle (optional)`)}
                onChange={(e) => setSelectedRole(e.target.value ? Number(e.target.value) : null)}
              >
                <MenuItem value="">
                  <em><Trans>Keine Rolle</Trans></em>
                </MenuItem>
                {availableRolesForUser.map((userRole) => {
                  // Find the full role data from allRoles
                  const role = allRoles.find(r => r.zr_id === userRole.role_id);
                  if (!role) return null;
                  return (
                    <MenuItem key={role.zr_id} value={role.zr_id}>
                      <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
                        <Box
                          sx={{
                            width: 16,
                            height: 16,
                            borderRadius: '50%',
                            backgroundColor: role.zr_color,
                          }}
                        />
                        {role.zr_name}
                      </Box>
                    </MenuItem>
                  );
                })}
              </Select>
            </FormControl>
          </Box>
        </DialogContent>
        <DialogActions>
          <Button onClick={handleCancelRoleAssignment}>
            <Trans>Abbrechen</Trans>
          </Button>
          <Button onClick={handleConfirmRoleAssignment} variant="contained" color="primary">
            <Trans>Zuweisen</Trans>
          </Button>
        </DialogActions>
      </Dialog>

      {/* Template Role Selection Dialog */}
      <Dialog open={templateRoleDialogOpen} onClose={handleCancelTemplateRole} maxWidth="sm" fullWidth>
        <DialogTitle>
          <Trans>Rollenanforderung für neue Schicht</Trans>
        </DialogTitle>
        <DialogContent>
          <Box sx={{ pt: 2 }}>
            <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
              Möchten Sie eine Rollenanforderung für diese Schicht festlegen? Nur Mitarbeiter mit der ausgewählten Rolle können sich später für diese Schicht melden.
            </Typography>
            <FormControl fullWidth>
              <InputLabel id="template-role-select-label">
                <Trans>Rolle (optional)</Trans>
              </InputLabel>
              <Select
                labelId="template-role-select-label"
                value={selectedTemplateRole || ''}
                label={i18n._(t`Rolle (optional)`)}
                onChange={(e) => setSelectedTemplateRole(e.target.value ? Number(e.target.value) : null)}
              >
                <MenuItem value="">
                  <em><Trans>Keine Rollenanforderung</Trans></em>
                </MenuItem>
                {allRoles.map((role) => (
                  <MenuItem key={role.zr_id} value={role.zr_id}>
                    <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
                      <Box
                        sx={{
                          width: 16,
                          height: 16,
                          borderRadius: '50%',
                          backgroundColor: role.zr_color,
                        }}
                      />
                      {role.zr_name}
                    </Box>
                  </MenuItem>
                ))}
              </Select>
            </FormControl>
          </Box>
        </DialogContent>
        <DialogActions>
          <Button onClick={handleCancelTemplateRole}>
            <Trans>Abbrechen</Trans>
          </Button>
          <Button onClick={handleConfirmTemplateRole} variant="contained" color="primary">
            <Trans>Schicht erstellen</Trans>
          </Button>
        </DialogActions>
      </Dialog>
    </Box>
  );
};

export default ShiftTab;