import React, { useState, useEffect } from 'react';
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 Button from '@mui/material/Button';
import Typography from '@mui/material/Typography';
import Box from '@mui/material/Box';
import Grid from '@mui/material/Grid';
import TextField from '@mui/material/TextField';
import CircularProgress from '@mui/material/CircularProgress';
import Alert from '@mui/material/Alert';
import Divider from '@mui/material/Divider';
import Chip from '@mui/material/Chip';
import Paper from '@mui/material/Paper';
import List from '@mui/material/List';
import ListItem from '@mui/material/ListItem';
import ListItemText from '@mui/material/ListItemText';
import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV2';
import { de } from 'date-fns/locale';
import { format, parseISO } from 'date-fns';
import axios from 'axios';
import { Trans } from '@lingui/macro';
import HistoryIcon from '@mui/icons-material/History';
import AddIcon from '@mui/icons-material/Add';
import { Break, PunctualityMetrics } from '../types/shift';
import PunctualityBadge from './PunctualityBadge';
import BreakTimelineCard from './BreakTimelineCard';

interface EditWorkSessionModalProps {
  open: boolean;
  onClose: () => void;
  sessionId: number;
  onSessionUpdated?: () => void;
}

interface WorkSession {
  zfws_id: number;
  zfws_assignment_id: number;
  zfws_clock_in_time: string;
  zfws_clock_out_time: string | null;
  zfws_should_start_time: string | null;
  zfws_should_end_time: string | null;
  zfws_break_duration: number;
  zfws_notes: string | null;
  worked_hours: number | null;
  assignment: {
    zsa_id: number;
    shift: {
      zs_id: number;
      zs_date: string;
      zs_start_time: string;
      zs_end_time: string;
      zs_title?: string;
      template?: {
        zst_id: number;
        zst_name: string;
        zst_color: string;
      };
    };
    user: {
      usr_id: number;
      usr_Name: string;
      usr_Vorname: string;
    };
  };
  breaks: Break[];
  punctuality: PunctualityMetrics | null;
  audit_log: Array<{
    zfwsa_id: number;
    zfwsa_field_name: string;
    zfwsa_old_value: string;
    zfwsa_new_value: string;
    zfwsa_change_reason: string;
    zfwsa_changed_at: string;
    changed_by_user: {
      usr_id: number;
      name: string;
    } | null;
    description: string;
  }>;
}

const EditWorkSessionModal: React.FC<EditWorkSessionModalProps> = ({
  open,
  onClose,
  sessionId,
  onSessionUpdated,
}) => {
  const [loading, setLoading] = useState(false);
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [session, setSession] = useState<WorkSession | null>(null);

  // Form fields
  const [clockInTime, setClockInTime] = useState<Date | null>(null);
  const [clockOutTime, setClockOutTime] = useState<Date | null>(null);
  const [shouldStartTime, setShouldStartTime] = useState<Date | null>(null);
  const [shouldEndTime, setShouldEndTime] = useState<Date | null>(null);
  const [breakDuration, setBreakDuration] = useState<number>(0);
  const [notes, setNotes] = useState<string>('');
  const [auditReason, setAuditReason] = useState<string>('');

  // Break management
  const [breaks, setBreaks] = useState<Break[]>([]);
  const [editingBreak, setEditingBreak] = useState<Break | null>(null);
  const [showBreakDialog, setShowBreakDialog] = useState(false);
  const [breakStartTime, setBreakStartTime] = useState<Date | null>(null);
  const [breakEndTime, setBreakEndTime] = useState<Date | null>(null);
  const [breakAuditReason, setBreakAuditReason] = useState<string>('');

  useEffect(() => {
    if (open && sessionId) {
      setError(null);
      setSession(null);
      fetchSession();
    }
  }, [open, sessionId]);

  const fetchSession = async () => {
    try {
      setLoading(true);
      setError(null);
      const response = await axios.get(`/zeiterfassung/work-sessions/${sessionId}`);
      const sessionData = response.data;
      setSession(sessionData);

      // Initialize form fields
      setClockInTime(parseISO(sessionData.zfws_clock_in_time));
      setClockOutTime(sessionData.zfws_clock_out_time ? parseISO(sessionData.zfws_clock_out_time) : null);
      setShouldStartTime(sessionData.zfws_should_start_time ? parseISO(sessionData.zfws_should_start_time) : null);
      setShouldEndTime(sessionData.zfws_should_end_time ? parseISO(sessionData.zfws_should_end_time) : null);
      setBreakDuration(sessionData.zfws_break_duration || 0);
      setNotes(sessionData.zfws_notes || '');
      setAuditReason('');
      setBreaks(sessionData.breaks || []);
    } catch (err: any) {
      console.error('Error fetching session:', err);
      setError(err.response?.data?.error || 'Fehler beim Laden der Arbeitssitzung');
    } finally {
      setLoading(false);
    }
  };

  const handleAddBreak = () => {
    setEditingBreak(null);
    setBreakStartTime(clockInTime);
    setBreakEndTime(null);
    setBreakAuditReason('');
    setShowBreakDialog(true);
  };

  const handleEditBreak = (breakData: Break) => {
    setEditingBreak(breakData);
    setBreakStartTime(parseISO(breakData.start_time));
    setBreakEndTime(breakData.end_time ? parseISO(breakData.end_time) : null);
    setBreakAuditReason('');
    setShowBreakDialog(true);
  };

  const handleSaveBreak = async () => {
    if (!breakAuditReason.trim()) {
      setError('Bitte geben Sie einen Grund für die Änderung an');
      return;
    }

    if (!breakStartTime) {
      setError('Pausenstart ist erforderlich');
      return;
    }

    try {
      setSaving(true);
      setError(null);

      if (editingBreak) {
        await axios.put(`/zeiterfassung/breaks/${editingBreak.id}`, {
          start_time: format(breakStartTime, "yyyy-MM-dd'T'HH:mm:ss"),
          end_time: breakEndTime ? format(breakEndTime, "yyyy-MM-dd'T'HH:mm:ss") : null,
          audit_reason: breakAuditReason,
        });
      } else {
        await axios.post(`/zeiterfassung/work-sessions/${sessionId}/breaks`, {
          start_time: format(breakStartTime, "yyyy-MM-dd'T'HH:mm:ss"),
          end_time: breakEndTime ? format(breakEndTime, "yyyy-MM-dd'T'HH:mm:ss") : null,
          audit_reason: breakAuditReason,
        });
      }

      setShowBreakDialog(false);
      await fetchSession();
    } catch (err: any) {
      console.error('Error saving break:', err);
      setError(err.response?.data?.error || 'Fehler beim Speichern der Pause');
    } finally {
      setSaving(false);
    }
  };

  const handleDeleteBreak = async (breakId: number) => {
    const reason = prompt('Bitte geben Sie einen Grund für das Löschen der Pause an:');
    if (!reason || !reason.trim()) {
      return;
    }

    try {
      setSaving(true);
      setError(null);

      await axios.delete(`/zeiterfassung/breaks/${breakId}`, {
        data: { audit_reason: reason },
      });

      await fetchSession();
    } catch (err: any) {
      console.error('Error deleting break:', err);
      setError(err.response?.data?.error || 'Fehler beim Löschen der Pause');
    } finally {
      setSaving(false);
    }
  };

  const handleSave = async () => {
    if (!auditReason.trim()) {
      setError('Bitte geben Sie einen Grund für die Änderung an');
      return;
    }

    if (!clockInTime) {
      setError('Einstempelzeit ist erforderlich');
      return;
    }

    try {
      setSaving(true);
      setError(null);

      const isActive = session && !session.zfws_clock_out_time;
      const payload: Record<string, any> = {
        session_id: sessionId,
        clock_in_time: format(clockInTime, "yyyy-MM-dd'T'HH:mm:ss"),
        should_start_time: shouldStartTime ? format(shouldStartTime, "yyyy-MM-dd'T'HH:mm:ss") : null,
        should_end_time: shouldEndTime ? format(shouldEndTime, "yyyy-MM-dd'T'HH:mm:ss") : null,
        notes,
        audit_reason: auditReason,
      };

      // Only send clock_out_time and break_duration for completed sessions
      if (!isActive) {
        payload.clock_out_time = clockOutTime ? format(clockOutTime, "yyyy-MM-dd'T'HH:mm:ss") : null;
        payload.break_duration = breakDuration;
      }

      await axios.put(`/zeiterfassung/work-sessions/${sessionId}`, payload);

      if (onSessionUpdated) {
        onSessionUpdated();
      }

      onClose();
    } catch (err: any) {
      console.error('Error updating session:', err);
      setError(err.response?.data?.error || 'Fehler beim Aktualisieren der Arbeitssitzung');
    } finally {
      setSaving(false);
    }
  };

  const getFieldLabel = (fieldName: string) => {
    const labels: Record<string, string> = {
      zfws_clock_in_time: 'Einstempelzeit',
      zfws_clock_out_time: 'Ausstempelzeit',
      zfws_should_start_time: 'Geplanter Beginn',
      zfws_should_end_time: 'Geplantes Ende',
      zfws_break_duration: 'Pausenzeit',
      zfws_notes: 'Notizen',
    };
    return labels[fieldName] || fieldName;
  };

  return (
    <Dialog open={open} onClose={onClose} maxWidth="md" fullWidth>
      <DialogTitle>
        <Trans>Arbeitssitzung bearbeiten</Trans>
      </DialogTitle>
      <DialogContent>
        {loading ? (
          <Box sx={{ display: 'flex', justifyContent: 'center', py: 4 }}>
            <CircularProgress />
          </Box>
        ) : session ? (
          <Box sx={{ mt: 2 }}>
            {error && (
              <Alert severity="error" sx={{ mb: 2 }}>
                {error}
              </Alert>
            )}
            {/* Shift Information */}
            <Paper sx={{ p: 2, mb: 3, bgcolor: 'grey.50' }}>
              <Typography variant="h6" gutterBottom>
                <Trans>Schichtinformationen</Trans>
              </Typography>
              <Grid container spacing={2}>
                <Grid size={12}>
                  <Typography variant="body2" color="textSecondary">
                    <Trans>Benutzer</Trans>
                  </Typography>
                  <Typography variant="body1">
                    {session.assignment.user.usr_Vorname} {session.assignment.user.usr_Name}
                  </Typography>
                </Grid>
                <Grid size={6}>
                  <Typography variant="body2" color="textSecondary">
                    <Trans>Datum</Trans>
                  </Typography>
                  <Typography variant="body1">
                    {format(parseISO(session.assignment.shift.zs_date), 'dd.MM.yyyy', { locale: de })}
                  </Typography>
                </Grid>
                <Grid size={6}>
                  <Typography variant="body2" color="textSecondary">
                    <Trans>Schicht</Trans>
                  </Typography>
                  <Typography variant="body1">
                    {session.assignment.shift.zs_start_time.substring(0, 5)} -{' '}
                    {session.assignment.shift.zs_end_time.substring(0, 5)}
                  </Typography>
                </Grid>
                {session.assignment.shift.template && (
                  <Grid size={12}>
                    <Chip
                      label={session.assignment.shift.template.zst_name}
                      size="small"
                      sx={{
                        bgcolor: session.assignment.shift.template.zst_color,
                        color: '#fff',
                      }}
                    />
                  </Grid>
                )}
              </Grid>
            </Paper>

            {/* Original Values */}
            <Paper sx={{ p: 2, mb: 3, bgcolor: 'info.50', borderLeft: 3, borderColor: 'info.main' }}>
              <Typography variant="subtitle2" gutterBottom>
                <Trans>Ursprüngliche Werte</Trans>
              </Typography>
              <Grid container spacing={2}>
                <Grid size={6}>
                  <Typography variant="caption" color="textSecondary">
                    <Trans>Einstempelzeit</Trans>
                  </Typography>
                  <Typography variant="body2">
                    {format(parseISO(session.zfws_clock_in_time), 'dd.MM.yyyy HH:mm', { locale: de })}
                  </Typography>
                </Grid>
                <Grid size={6}>
                  <Typography variant="caption" color="textSecondary">
                    <Trans>Ausstempelzeit</Trans>
                  </Typography>
                  <Typography variant="body2">
                    {session.zfws_clock_out_time
                      ? format(parseISO(session.zfws_clock_out_time), 'dd.MM.yyyy HH:mm', { locale: de })
                      : 'Nicht ausgestempelt'}
                  </Typography>
                </Grid>
                <Grid size={6}>
                  <Typography variant="caption" color="textSecondary">
                    <Trans>Pausenzeit</Trans>
                  </Typography>
                  <Typography variant="body2">{session.zfws_break_duration} Minuten</Typography>
                </Grid>
                <Grid size={6}>
                  <Typography variant="caption" color="textSecondary">
                    <Trans>Arbeitsstunden</Trans>
                  </Typography>
                  <Typography variant="body2">
                    {session.worked_hours ? `${session.worked_hours} Stunden` : 'N/A'}
                  </Typography>
                </Grid>
              </Grid>
            </Paper>

            {/* Punctuality Metrics */}
            {session.punctuality && (
              <>
                <Divider sx={{ my: 3 }} />
                <Typography variant="h6" gutterBottom>
                  <Trans>Pünktlichkeit</Trans>
                </Typography>
                <PunctualityBadge punctuality={session.punctuality} detailed />
              </>
            )}

            {/* Break Management */}
            <Divider sx={{ my: 3 }} />
            <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>
              <Typography variant="h6">
                <Trans>Pausen</Trans>
              </Typography>
              <Button
                variant="outlined"
                size="small"
                startIcon={<AddIcon />}
                onClick={handleAddBreak}
              >
                <Trans>Pause hinzufügen</Trans>
              </Button>
            </Box>
            {breaks.length === 0 ? (
              <Paper sx={{ p: 2, textAlign: 'center', bgcolor: 'grey.50' }}>
                <Typography variant="body2" color="text.secondary">
                  <Trans>Keine Pausen aufgezeichnet</Trans>
                </Typography>
              </Paper>
            ) : (
              <Box>
                {breaks.map((breakItem) => (
                  <BreakTimelineCard
                    key={breakItem.id}
                    breakData={breakItem}
                    onEdit={handleEditBreak}
                    onDelete={handleDeleteBreak}
                  />
                ))}
              </Box>
            )}

            <Divider sx={{ my: 3 }} />

            {/* Edit Form */}
            <Typography variant="h6" gutterBottom>
              <Trans>Werte bearbeiten</Trans>
            </Typography>

            {!session.zfws_clock_out_time && (
              <Alert severity="info" sx={{ mb: 2 }}>
                <Trans>Diese Sitzung ist aktiv. Es kann nur die Einstempelzeit geändert werden.</Trans>
              </Alert>
            )}

            <LocalizationProvider dateAdapter={AdapterDateFns} adapterLocale={de}>
              <Grid container spacing={2}>
                <Grid size={{ xs: 12, sm: 6 }}>
                  <DateTimePicker
                    label={<Trans>Einstempelzeit</Trans>}
                    value={clockInTime}
                    onChange={(newValue) => setClockInTime(newValue)}
                    format="dd.MM.yyyy HH:mm"
                    slotProps={{
                      textField: {
                        fullWidth: true,
                        required: true,
                      },
                    }}
                  />
                </Grid>
                {session.zfws_clock_out_time && (
                  <>
                    <Grid size={{ xs: 12, sm: 6 }}>
                      <DateTimePicker
                        label={<Trans>Ausstempelzeit</Trans>}
                        value={clockOutTime}
                        onChange={(newValue) => setClockOutTime(newValue)}
                        format="dd.MM.yyyy HH:mm"
                        slotProps={{
                          textField: {
                            fullWidth: true,
                          },
                        }}
                      />
                    </Grid>
                    <Grid size={{ xs: 12, sm: 6 }}>
                      <TextField
                        label={<Trans>Pausenzeit (Minuten)</Trans>}
                        type="number"
                        value={breakDuration}
                        onChange={(e) => setBreakDuration(parseInt(e.target.value) || 0)}
                        fullWidth
                        inputProps={{ min: 0 }}
                      />
                    </Grid>
                  </>
                )}
                <Grid size={12}>
                  <Typography variant="caption" color="text.secondary">
                    <Trans>Geplante Schichtzeit (Soll) — Zeit außerhalb dieses Fensters wird nicht vergütet</Trans>
                  </Typography>
                </Grid>
                <Grid size={{ xs: 12, sm: 6 }}>
                  <DateTimePicker
                    label={<Trans>Geplanter Beginn</Trans>}
                    value={shouldStartTime}
                    onChange={(newValue) => setShouldStartTime(newValue)}
                    format="dd.MM.yyyy HH:mm"
                    slotProps={{
                      textField: {
                        fullWidth: true,
                      },
                    }}
                  />
                </Grid>
                <Grid size={{ xs: 12, sm: 6 }}>
                  <DateTimePicker
                    label={<Trans>Geplantes Ende</Trans>}
                    value={shouldEndTime}
                    onChange={(newValue) => setShouldEndTime(newValue)}
                    format="dd.MM.yyyy HH:mm"
                    slotProps={{
                      textField: {
                        fullWidth: true,
                      },
                    }}
                  />
                </Grid>
                <Grid size={12}>
                  <TextField
                    label={<Trans>Notizen</Trans>}
                    value={notes}
                    onChange={(e) => setNotes(e.target.value)}
                    fullWidth
                    multiline
                    rows={2}
                  />
                </Grid>
                <Grid size={12}>
                  <TextField
                    label={<Trans>Grund für die Änderung</Trans>}
                    value={auditReason}
                    onChange={(e) => setAuditReason(e.target.value)}
                    fullWidth
                    required
                    multiline
                    rows={2}
                    helperText="Erforderlich für die Protokollierung"
                  />
                </Grid>
              </Grid>
            </LocalizationProvider>

            {/* Audit Log */}
            {session.audit_log && session.audit_log.length > 0 && (
              <>
                <Divider sx={{ my: 3 }} />
                <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 2 }}>
                  <HistoryIcon color="primary" />
                  <Typography variant="h6">
                    <Trans>Änderungsprotokoll</Trans>
                  </Typography>
                </Box>
                <List sx={{ position: 'relative', pl: 2 }}>
                  {/* Vertical timeline line */}
                  <Box
                    sx={{
                      position: 'absolute',
                      left: 16,
                      top: 20,
                      bottom: 20,
                      width: 2,
                      bgcolor: 'primary.light',
                      opacity: 0.3,
                    }}
                  />
                  {session.audit_log.map((audit, index) => (
                    <ListItem
                      key={audit.zfwsa_id}
                      sx={{
                        display: 'flex',
                        alignItems: 'flex-start',
                        position: 'relative',
                        mb: 2,
                        pl: 0,
                      }}
                    >
                      {/* Timeline dot */}
                      <Box
                        sx={{
                          position: 'absolute',
                          left: 8,
                          top: 8,
                          width: 16,
                          height: 16,
                          borderRadius: '50%',
                          bgcolor: 'primary.main',
                          border: '3px solid',
                          borderColor: 'background.paper',
                          zIndex: 1,
                        }}
                      />

                      <Box sx={{ flex: 1, ml: 4 }}>
                        <Paper
                          elevation={3}
                          sx={{
                            p: 2,
                            borderLeft: 4,
                            borderColor: 'primary.main',
                            background: 'linear-gradient(135deg, #ffffff 0%, #f5f7fa 100%)',
                            transition: 'all 0.3s ease',
                            '&:hover': {
                              transform: 'translateX(4px)',
                              boxShadow: 6,
                            },
                          }}
                        >
                          <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'start', mb: 1 }}>
                            <Chip
                              label={getFieldLabel(audit.zfwsa_field_name)}
                              size="small"
                              color="primary"
                              sx={{ fontWeight: 'bold' }}
                            />
                            <Typography variant="caption" color="textSecondary">
                              {format(parseISO(audit.zfwsa_changed_at), 'dd.MM.yyyy HH:mm', { locale: de })}
                            </Typography>
                          </Box>

                          <Box
                            sx={{
                              display: 'flex',
                              alignItems: 'center',
                              gap: 1,
                              my: 1,
                              p: 1.5,
                              bgcolor: 'grey.100',
                              borderRadius: 1,
                            }}
                          >
                            <Chip
                              label={audit.zfwsa_old_value}
                              size="small"
                              sx={{
                                bgcolor: 'error.light',
                                color: 'error.contrastText',
                                textDecoration: 'line-through',
                              }}
                            />
                            <Typography variant="body2" sx={{ mx: 1, fontWeight: 'bold' }}>
                              →
                            </Typography>
                            <Chip
                              label={audit.zfwsa_new_value}
                              size="small"
                              sx={{
                                bgcolor: 'success.light',
                                color: 'success.contrastText',
                                fontWeight: 'bold',
                              }}
                            />
                          </Box>

                          {audit.zfwsa_change_reason && (
                            <Box
                              sx={{
                                mt: 1.5,
                                p: 1.5,
                                bgcolor: 'info.50',
                                borderLeft: 3,
                                borderColor: 'info.main',
                                borderRadius: 1,
                              }}
                            >
                              <Typography variant="caption" fontWeight="bold" color="info.dark">
                                Grund:
                              </Typography>
                              <Typography variant="body2" sx={{ mt: 0.5, fontStyle: 'italic' }}>
                                "{audit.zfwsa_change_reason}"
                              </Typography>
                            </Box>
                          )}

                          {audit.changed_by_user && (
                            <Box sx={{ mt: 1, display: 'flex', alignItems: 'center', gap: 0.5 }}>
                              <Typography variant="caption" color="textSecondary">
                                Geändert von:
                              </Typography>
                              <Chip
                                label={audit.changed_by_user.name}
                                size="small"
                                variant="outlined"
                                sx={{ fontSize: '0.7rem', height: 20 }}
                              />
                            </Box>
                          )}
                        </Paper>
                      </Box>
                    </ListItem>
                  ))}
                </List>
              </>
            )}
          </Box>
        ) : error ? (
          <Alert severity="error" sx={{ mb: 2 }}>
            {error}
          </Alert>
        ) : null}
      </DialogContent>
      <DialogActions>
        <Button onClick={onClose} disabled={saving}>
          <Trans>Abbrechen</Trans>
        </Button>
        <Button onClick={handleSave} variant="contained" color="primary" disabled={saving || loading}>
          {saving ? <CircularProgress size={24} /> : <Trans>Speichern</Trans>}
        </Button>
      </DialogActions>

      {/* Break Edit Dialog */}
      <Dialog open={showBreakDialog} onClose={() => setShowBreakDialog(false)} maxWidth="sm" fullWidth>
        <DialogTitle>
          {editingBreak ? <Trans>Pause bearbeiten</Trans> : <Trans>Pause hinzufügen</Trans>}
        </DialogTitle>
        <DialogContent>
          <LocalizationProvider dateAdapter={AdapterDateFns} adapterLocale={de}>
            <Grid container spacing={2} sx={{ mt: 1 }}>
              <Grid size={12}>
                <DateTimePicker
                  label={<Trans>Pausenstart</Trans>}
                  value={breakStartTime}
                  onChange={(newValue) => setBreakStartTime(newValue)}
                  format="dd.MM.yyyy HH:mm"
                  slotProps={{
                    textField: {
                      fullWidth: true,
                      required: true,
                    },
                  }}
                />
              </Grid>
              <Grid size={12}>
                <DateTimePicker
                  label={<Trans>Pausenende</Trans>}
                  value={breakEndTime}
                  onChange={(newValue) => setBreakEndTime(newValue)}
                  format="dd.MM.yyyy HH:mm"
                  slotProps={{
                    textField: {
                      fullWidth: true,
                      helperText: 'Leer lassen für aktive Pause',
                    },
                  }}
                />
              </Grid>
              <Grid size={12}>
                <TextField
                  label={<Trans>Grund für die Änderung</Trans>}
                  value={breakAuditReason}
                  onChange={(e) => setBreakAuditReason(e.target.value)}
                  fullWidth
                  required
                  multiline
                  rows={2}
                />
              </Grid>
            </Grid>
          </LocalizationProvider>
        </DialogContent>
        <DialogActions>
          <Button onClick={() => setShowBreakDialog(false)} disabled={saving}>
            <Trans>Abbrechen</Trans>
          </Button>
          <Button onClick={handleSaveBreak} variant="contained" disabled={saving}>
            {saving ? <CircularProgress size={24} /> : <Trans>Speichern</Trans>}
          </Button>
        </DialogActions>
      </Dialog>
    </Dialog>
  );
};

export default EditWorkSessionModal;