import React, { useState, useEffect, useCallback, useMemo, useRef } 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 Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
import Table from '@mui/material/Table';
import TableBody from '@mui/material/TableBody';
import TableCell from '@mui/material/TableCell';
import TableContainer from '@mui/material/TableContainer';
import TableHead from '@mui/material/TableHead';
import TableRow from '@mui/material/TableRow';
import Paper from '@mui/material/Paper';
import CircularProgress from '@mui/material/CircularProgress';
import Alert from '@mui/material/Alert';
import IconButton from '@mui/material/IconButton';
import Tooltip from '@mui/material/Tooltip';
import Collapse from '@mui/material/Collapse';
import ButtonGroup from '@mui/material/ButtonGroup';
import TextField from '@mui/material/TextField';
import FormControlLabel from '@mui/material/FormControlLabel';
import Checkbox from '@mui/material/Checkbox';
import CloseIcon from '@mui/icons-material/Close';
import PrintIcon from '@mui/icons-material/Print';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import ExpandLessIcon from '@mui/icons-material/ExpandLess';
import TodayIcon from '@mui/icons-material/Today';
import DateRangeIcon from '@mui/icons-material/DateRange';
import CalendarMonthIcon from '@mui/icons-material/CalendarMonth';
import CalendarTodayIcon from '@mui/icons-material/CalendarToday';
import WarningAmberIcon from '@mui/icons-material/WarningAmber';
import { useReactToPrint } from 'react-to-print';
import axios from 'axios';
import { Trans, t } from '@lingui/macro';
import { useLingui } from '@lingui/react';
import {
  format,
  startOfDay,
  endOfDay,
  startOfWeek,
  endOfWeek,
  startOfMonth,
  endOfMonth,
  startOfYear,
  endOfYear,
  addDays,
  parseISO,
  isAfter,
} from 'date-fns';
import { de } from 'date-fns/locale';
import UserAvatar from './UserAvatar';

interface TimeReportModalProps {
  open: boolean;
  onClose: () => void;
  userId: number;
  userName: string;
  userPhoto?: string | null;
  userInitials?: string;
}

interface Break {
  start: string;
  end: string;
  duration_minutes: number;
}

interface Session {
  session_id: number;
  date: string;
  day_name: string;
  day_formatted: string;
  workplace: string | null;
  clock_in: string;
  clock_out: string;
  present_minutes: number;
  present_formatted: string;
  breaks: Break[];
  actual_break_minutes: number;
  actual_break_formatted: string;
  break_total_minutes: number;
  break_total_formatted: string;
  legal_minimum_applied: boolean;
  break_warning?: boolean;
  break_warning_reason?: string | null;
  work_minutes: number;
  work_formatted: string;
  unpaid_outside_minutes?: number;
  unpaid_outside_formatted?: string;
}

interface DayEntry {
  date: string;
  day_name: string;
  day_formatted: string;
  sessions: Session[];
  day_totals: {
    present_minutes: number;
    present_formatted: string;
    actual_break_minutes: number;
    actual_break_formatted: string;
    break_minutes: number;
    break_formatted: string;
    work_minutes: number;
    work_formatted: string;
    unpaid_outside_minutes?: number;
    unpaid_outside_formatted?: string;
  };
}

interface TimeReportData {
  user: {
    id: number;
    name: string;
  };
  period: {
    from: string;
    to: string;
    from_formatted: string;
    to_formatted: string;
  };
  days: DayEntry[];
  totals: {
    total_work_minutes: number;
    total_work_formatted: string;
    total_break_minutes: number;
    total_break_formatted: string;
    total_present_minutes: number;
    total_present_formatted: string;
    total_unpaid_outside_minutes?: number;
    total_unpaid_outside_formatted?: string;
    days_worked: number;
  };
}

type PresetType = 'today' | 'week' | 'month' | 'year' | 'custom';

const TimeReportModal: React.FC<TimeReportModalProps> = ({
  open,
  onClose,
  userId,
  userName,
  userPhoto = null,
  userInitials = '',
}) => {
  const { i18n } = useLingui();
  const printRef = useRef<HTMLDivElement>(null);

  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [data, setData] = useState<TimeReportData | null>(null);
  const [expandedDays, setExpandedDays] = useState<Set<string>>(new Set());
  const [preset, setPreset] = useState<PresetType>('month');
  const [fromDate, setFromDate] = useState<string>(format(startOfMonth(new Date()), 'yyyy-MM-dd'));
  const [toDate, setToDate] = useState<string>(format(endOfMonth(new Date()), 'yyyy-MM-dd'));
  const [logoSrc, setLogoSrc] = useState<string>('/imgtasko/tasko_logo.png');
  const [showBreakDetails, setShowBreakDetails] = useState<boolean>(true);
  const [showActualBreak, setShowActualBreak] = useState<boolean>(true);

  // Compact cell style for smaller rows
  const compactCellSx = { py: 0.5, px: 1, fontSize: '0.8rem' };
  const compactHeaderSx = { py: 0.75, px: 1, fontSize: '0.8rem', fontWeight: 600 };

  // Fetch system logo on mount
  useEffect(() => {
    const fetchLogo = async () => {
      try {
        const response = await axios.get('/api/check-logo');
        if (response.data.exists && response.data.logoBase64) {
          setLogoSrc(`data:image/png;base64,${response.data.logoBase64}`);
        }
      } catch (err) {
        // Use default logo on error
      }
    };
    fetchLogo();
  }, []);

  // Handle from date change with auto-adjustment of end date
  const handleFromDateChange = useCallback((newFromDate: string) => {
    setFromDate(newFromDate);
    setPreset('custom');

    // If new from date is after current to date, adjust to date to be 1 day after
    if (newFromDate && toDate) {
      const fromParsed = parseISO(newFromDate);
      const toParsed = parseISO(toDate);
      if (isAfter(fromParsed, toParsed)) {
        setToDate(format(addDays(fromParsed, 1), 'yyyy-MM-dd'));
      }
    }
  }, [toDate]);

  // Handle to date change with validation
  const handleToDateChange = useCallback((newToDate: string) => {
    setToDate(newToDate);
    setPreset('custom');

    // If new to date is before current from date, adjust from date
    if (newToDate && fromDate) {
      const fromParsed = parseISO(fromDate);
      const toParsed = parseISO(newToDate);
      if (isAfter(fromParsed, toParsed)) {
        setFromDate(format(addDays(toParsed, -1), 'yyyy-MM-dd'));
      }
    }
  }, [fromDate]);

  // Calculate dates based on preset
  const applyPreset = useCallback((presetType: PresetType) => {
    const now = new Date();
    let from: Date;
    let to: Date;

    switch (presetType) {
      case 'today':
        from = startOfDay(now);
        to = endOfDay(now);
        break;
      case 'week':
        from = startOfWeek(now, { weekStartsOn: 1 });
        to = endOfWeek(now, { weekStartsOn: 1 });
        break;
      case 'month':
        from = startOfMonth(now);
        to = endOfMonth(now);
        break;
      case 'year':
        from = startOfYear(now);
        to = endOfYear(now);
        break;
      default:
        return;
    }

    setFromDate(format(from, 'yyyy-MM-dd'));
    setToDate(format(to, 'yyyy-MM-dd'));
    setPreset(presetType);
  }, []);

  // Fetch data
  const fetchData = useCallback(async () => {
    if (!userId || !fromDate || !toDate) return;

    try {
      setLoading(true);
      setError(null);
      const response = await axios.get('/zeiterfassung/time-report', {
        params: {
          user_id: userId,
          from_date: fromDate,
          to_date: toDate,
        },
      });
      setData(response.data);
      // Expand all multi-session days by default so warnings/break details
      // are visible without an extra click and print as part of the page.
      const allMultiSessionDays = new Set<string>(
        (response.data?.days || [])
          .filter((d: DayEntry) => d.sessions && d.sessions.length > 1)
          .map((d: DayEntry) => d.date)
      );
      setExpandedDays(allMultiSessionDays);
    } catch (err: any) {
      setError(err.response?.data?.error || i18n._(t`Fehler beim Laden der Daten`));
    } finally {
      setLoading(false);
    }
  }, [userId, fromDate, toDate, i18n]);

  useEffect(() => {
    if (open && userId) {
      fetchData();
    }
  }, [open, userId, fetchData]);

  // Toggle day expansion
  const toggleDay = useCallback((date: string) => {
    setExpandedDays((prev) => {
      const newSet = new Set(prev);
      if (newSet.has(date)) {
        newSet.delete(date);
      } else {
        newSet.add(date);
      }
      return newSet;
    });
  }, []);

  // Print functionality using react-to-print
  const handlePrint = useReactToPrint({
    contentRef: printRef,
    documentTitle: `Stempelkarte_${userName.replace(/\s+/g, '_')}`,
    pageStyle: `
      @page {
        size: A4 portrait;
        margin: 10mm;
      }
      @media print {
        body {
          font-family: Arial, sans-serif;
          -webkit-print-color-adjust: exact;
          print-color-adjust: exact;
        }
        .print-header {
          display: flex !important;
          justify-content: space-between;
          align-items: flex-start;
          margin-bottom: 12px;
          padding-bottom: 10px;
          border-bottom: 1px solid #ddd;
        }
        .print-header h5 {
          font-size: 16px;
          margin: 0 0 3px 0;
        }
        .print-header img {
          max-height: 50px;
          max-width: 120px;
          object-fit: contain;
        }
        .no-print {
          display: none !important;
        }
        table {
          width: 100%;
          border-collapse: collapse;
          font-size: 9px;
        }
        th, td {
          border: 1px solid #ddd;
          padding: 3px 5px;
        }
        th {
          background-color: #f5f5f5 !important;
          font-weight: 600;
        }
        .MuiIconButton-root {
          display: none !important;
        }
        .day-total-row {
          background-color: #e3f2fd !important;
        }
        .totals-box {
          margin-top: 10px;
          padding: 8px;
          font-size: 11px;
        }
      }
    `,
  });

  // Only surface the unpaid-outside-shift column when clipping produced unpaid
  // time, so unaffected reports look exactly as before.
  const showUnpaid = (data?.totals?.total_unpaid_outside_minutes ?? 0) > 0;

  // Memoized table content for performance
  const tableContent = useMemo(() => {
    if (!data) return null;

    return data.days.map((day) => {
      const hasMultipleSessions = day.sessions.length > 1;
      const isExpanded = expandedDays.has(day.date);

      return (
        <React.Fragment key={day.date}>
          {/* Day row or single session row */}
          {day.sessions.map((session, idx) => (
            <TableRow
              key={session.session_id}
              sx={{
                backgroundColor: idx > 0 ? '#fafafa' : 'inherit',
                '&:hover': { backgroundColor: '#f5f5f5' },
              }}
            >
              {idx === 0 ? (
                <TableCell
                  rowSpan={hasMultipleSessions && isExpanded ? day.sessions.length + 1 : 1}
                  sx={{ ...compactCellSx, verticalAlign: 'top', fontWeight: 500 }}
                >
                  <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
                    {hasMultipleSessions && (
                      <IconButton size="small" sx={{ p: 0.25 }} onClick={() => toggleDay(day.date)}>
                        {isExpanded ? <ExpandLessIcon fontSize="small" /> : <ExpandMoreIcon fontSize="small" />}
                      </IconButton>
                    )}
                    <span>{day.day_formatted}</span>
                  </Box>
                </TableCell>
              ) : null}

              {/* Show individual session or hide if collapsed */}
              {(!hasMultipleSessions || isExpanded) && (
                <>
                  <TableCell sx={compactCellSx}>{session.workplace || '-'}</TableCell>
                  <TableCell sx={compactCellSx}>{session.clock_in}</TableCell>
                  <TableCell sx={compactCellSx}>{session.clock_out}</TableCell>
                  <TableCell sx={compactCellSx}>{session.present_formatted}</TableCell>
                  {showActualBreak && (
                    <TableCell sx={compactCellSx}>
                      <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start' }}>
                        <Box sx={{ display: 'inline-flex', alignItems: 'center', gap: 0.5 }}>
                          <span>{session.actual_break_formatted}</span>
                          {session.break_warning && (
                            <WarningAmberIcon sx={{ fontSize: 14, color: '#ed6c02' }} />
                          )}
                        </Box>
                        {session.break_warning && session.break_warning_reason && (
                          <Typography
                            variant="caption"
                            sx={{
                              display: 'block',
                              fontSize: '0.7rem',
                              color: '#ed6c02',
                              whiteSpace: 'normal',
                              lineHeight: 1.2,
                              mt: 0.25,
                            }}
                          >
                            {session.break_warning_reason}
                          </Typography>
                        )}
                      </Box>
                    </TableCell>
                  )}
                  <TableCell sx={compactCellSx}>
                    {showBreakDetails && session.breaks.length > 0 ? (
                      <Box>
                        <span style={{ color: session.legal_minimum_applied ? '#ed6c02' : 'inherit' }}>
                          {session.break_total_formatted}
                          {session.legal_minimum_applied && ' *'}
                        </span>
                        <Typography variant="caption" color="text.secondary" sx={{ display: 'block', fontSize: '0.7rem' }}>
                          {session.breaks.map((b, i) => (
                            <span key={i}>
                              {b.start}-{b.end}
                              {i < session.breaks.length - 1 ? ', ' : ''}
                            </span>
                          ))}
                        </Typography>
                      </Box>
                    ) : (
                      <span style={{ color: session.legal_minimum_applied ? '#ed6c02' : 'inherit' }}>
                        {session.break_total_formatted}
                        {session.legal_minimum_applied && ' *'}
                      </span>
                    )}
                  </TableCell>
                  {showUnpaid && (
                    <TableCell sx={compactCellSx}>{session.unpaid_outside_formatted ?? '-'}</TableCell>
                  )}
                  <TableCell sx={{ ...compactCellSx, fontWeight: 600 }}>{session.work_formatted}</TableCell>
                </>
              )}

              {/* Collapsed multi-session row shows totals only */}
              {hasMultipleSessions && !isExpanded && idx === 0 && (
                <>
                  <TableCell sx={compactCellSx}>
                    {[...new Set(day.sessions.map(s => s.workplace).filter(Boolean))].join(', ') || '-'}
                  </TableCell>
                  <TableCell sx={compactCellSx}>{day.sessions[0].clock_in}</TableCell>
                  <TableCell sx={compactCellSx}>{day.sessions[day.sessions.length - 1].clock_out}</TableCell>
                  <TableCell sx={compactCellSx}>{day.day_totals.present_formatted}</TableCell>
                  {showActualBreak && (
                    <TableCell sx={compactCellSx}>{day.day_totals.actual_break_formatted}</TableCell>
                  )}
                  <TableCell sx={compactCellSx}>{day.day_totals.break_formatted}</TableCell>
                  {showUnpaid && (
                    <TableCell sx={compactCellSx}>{day.day_totals.unpaid_outside_formatted ?? '-'}</TableCell>
                  )}
                  <TableCell sx={{ ...compactCellSx, fontWeight: 600 }}>{day.day_totals.work_formatted}</TableCell>
                </>
              )}
            </TableRow>
          ))}

          {/* Day total row when expanded with multiple sessions */}
          {hasMultipleSessions && isExpanded && (
            <TableRow sx={{ backgroundColor: '#e3f2fd' }}>
              <TableCell colSpan={showActualBreak ? 6 : 5} sx={{ ...compactCellSx, textAlign: 'right', fontWeight: 600 }}>
                <Trans>Tagessumme:</Trans>
              </TableCell>
              {showUnpaid && (
                <TableCell sx={compactCellSx}>{day.day_totals.unpaid_outside_formatted ?? '-'}</TableCell>
              )}
              <TableCell sx={{ ...compactCellSx, fontWeight: 600 }}>{day.day_totals.work_formatted}</TableCell>
            </TableRow>
          )}
        </React.Fragment>
      );
    });
  }, [data, expandedDays, toggleDay, showBreakDetails, showActualBreak, showUnpaid, compactCellSx]);

  return (
    <Dialog
      open={open}
      onClose={onClose}
      maxWidth="lg"
      fullWidth
      PaperProps={{ sx: { minHeight: '80vh' } }}
    >
      <DialogTitle>
        <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
            <UserAvatar
              photoUrl={userPhoto}
              initials={userInitials}
              fullName={userName}
              sx={{ width: 40, height: 40 }}
            />
            <Typography variant="h6">
              <Trans>Stempelkarte</Trans>: {userName}
            </Typography>
          </Box>
          <IconButton onClick={onClose} size="small">
            <CloseIcon />
          </IconButton>
        </Box>
      </DialogTitle>

      <DialogContent dividers>
        {/* Filter controls */}
        <Box sx={{ display: 'flex', gap: 2, mb: 3, alignItems: 'center', flexWrap: 'wrap' }}>
          <Typography variant="body2" color="text.secondary">
            <Trans>Zeitraum:</Trans>
          </Typography>

          <ButtonGroup size="small" variant="outlined">
            <Tooltip title={i18n._(t`Heute`)}>
              <Button
                onClick={() => applyPreset('today')}
                variant={preset === 'today' ? 'contained' : 'outlined'}
              >
                <TodayIcon fontSize="small" />
              </Button>
            </Tooltip>
            <Tooltip title={i18n._(t`Diese Woche`)}>
              <Button
                onClick={() => applyPreset('week')}
                variant={preset === 'week' ? 'contained' : 'outlined'}
              >
                <DateRangeIcon fontSize="small" />
              </Button>
            </Tooltip>
            <Tooltip title={i18n._(t`Dieser Monat`)}>
              <Button
                onClick={() => applyPreset('month')}
                variant={preset === 'month' ? 'contained' : 'outlined'}
              >
                <CalendarMonthIcon fontSize="small" />
              </Button>
            </Tooltip>
            <Tooltip title={i18n._(t`Dieses Jahr`)}>
              <Button
                onClick={() => applyPreset('year')}
                variant={preset === 'year' ? 'contained' : 'outlined'}
              >
                <CalendarTodayIcon fontSize="small" />
              </Button>
            </Tooltip>
          </ButtonGroup>

          <TextField
            type="date"
            label={i18n._(t`Von`)}
            value={fromDate}
            onChange={(e) => handleFromDateChange(e.target.value)}
            size="small"
            InputLabelProps={{ shrink: true }}
            sx={{ width: 160 }}
          />
          <TextField
            type="date"
            label={i18n._(t`Bis`)}
            value={toDate}
            onChange={(e) => handleToDateChange(e.target.value)}
            size="small"
            InputLabelProps={{ shrink: true }}
            sx={{ width: 160 }}
          />

          <Button variant="contained" onClick={fetchData} disabled={loading} size="small">
            <Trans>Laden</Trans>
          </Button>

          <FormControlLabel
            control={
              <Checkbox
                checked={showBreakDetails}
                onChange={(e) => setShowBreakDetails(e.target.checked)}
                size="small"
              />
            }
            label={<Typography variant="body2"><Trans>Pausendetails</Trans></Typography>}
            sx={{ ml: 1 }}
          />

          <FormControlLabel
            control={
              <Checkbox
                checked={showActualBreak}
                onChange={(e) => setShowActualBreak(e.target.checked)}
                size="small"
              />
            }
            label={<Typography variant="body2"><Trans>Tatsächliche Pause</Trans></Typography>}
            sx={{ ml: 1 }}
          />
        </Box>

        {/* Error state */}
        {error && (
          <Alert severity="error" sx={{ mb: 2 }}>
            {error}
          </Alert>
        )}

        {/* Loading state */}
        {loading && (
          <Box sx={{ display: 'flex', justifyContent: 'center', py: 4 }}>
            <CircularProgress />
          </Box>
        )}

        {/* Data table */}
        {!loading && data && (
          <div ref={printRef}>
            {/* Print header (hidden in modal view, shown when printing) */}
            <Box
              className="print-header"
              sx={{
                display: 'none',
                '@media print': {
                  display: 'flex',
                  justifyContent: 'space-between',
                  alignItems: 'flex-start',
                  mb: 3,
                  pb: 2,
                  borderBottom: '1px solid #ddd',
                },
              }}
            >
              <Box>
                <Typography variant="h5" sx={{ fontWeight: 600, mb: 0.5 }}>
                  Stempelkarte {data.user.name}
                </Typography>
                <Typography variant="body2" color="text.secondary">
                  vom {data.period.from_formatted} bis {data.period.to_formatted}
                </Typography>
              </Box>
              <Box
                component="img"
                src={logoSrc}
                alt="Logo"
                sx={{
                  maxHeight: 60,
                  maxWidth: 150,
                  objectFit: 'contain',
                }}
              />
            </Box>

            {data.days.length === 0 ? (
              <Alert severity="info">
                <Trans>Keine Einträge im ausgewählten Zeitraum gefunden.</Trans>
              </Alert>
            ) : (
              <>
                <TableContainer component={Paper} variant="outlined">
                  <Table size="small">
                    <TableHead>
                      <TableRow sx={{ backgroundColor: '#f5f5f5' }}>
                        <TableCell sx={{ ...compactHeaderSx, minWidth: 140 }}>
                          <Trans>Tag</Trans>
                        </TableCell>
                        <TableCell sx={compactHeaderSx}>
                          <Trans>Ort</Trans>
                        </TableCell>
                        <TableCell sx={compactHeaderSx}>
                          <Trans>Kommt</Trans>
                        </TableCell>
                        <TableCell sx={compactHeaderSx}>
                          <Trans>Geht</Trans>
                        </TableCell>
                        <TableCell sx={compactHeaderSx}>
                          <Trans>Anwesend</Trans>
                        </TableCell>
                        {showActualBreak && (
                          <TableCell sx={compactHeaderSx}>
                            <Tooltip title={i18n._(t`Tatsächlich genommene Pause`)}>
                              <span><Trans>Ist-Pause</Trans></span>
                            </Tooltip>
                          </TableCell>
                        )}
                        <TableCell sx={compactHeaderSx}>
                          <Tooltip title={i18n._(t`Pause nach ArbZG (gesetzliches Minimum)`)}>
                            <span><Trans>Pause</Trans></span>
                          </Tooltip>
                        </TableCell>
                        {showUnpaid && (
                          <TableCell sx={compactHeaderSx}>
                            <Tooltip title={i18n._(t`Zeit außerhalb der geplanten Schicht (nicht vergütet)`)}>
                              <span><Trans>Außerhalb</Trans></span>
                            </Tooltip>
                          </TableCell>
                        )}
                        <TableCell sx={compactHeaderSx}>
                          <Tooltip title={i18n._(t`Vergütete Zeit (Anwesend minus Pause minus außerhalb der Schicht)`)}>
                            <span><Trans>Netto</Trans></span>
                          </Tooltip>
                        </TableCell>
                      </TableRow>
                    </TableHead>
                    <TableBody>{tableContent}</TableBody>
                  </Table>
                </TableContainer>

                {/* Totals */}
                <Box
                  className="totals-box"
                  sx={{
                    display: 'flex',
                    justifyContent: 'flex-end',
                    mt: 1.5,
                    p: 1.5,
                    backgroundColor: '#f5f5f5',
                    borderRadius: 1,
                  }}
                >
                  <Box sx={{ textAlign: 'right' }}>
                    <Typography variant="body2" color="text.secondary" sx={{ fontSize: '0.8rem' }}>
                      {data.totals.days_worked} <Trans>Arbeitstage</Trans>
                    </Typography>
                    {showUnpaid && (
                      <Typography variant="body2" color="text.secondary" sx={{ fontSize: '0.8rem' }}>
                        <Trans>Außerhalb Schicht (unbezahlt):</Trans> {data.totals.total_unpaid_outside_formatted}
                      </Typography>
                    )}
                    <Typography variant="h6" sx={{ fontWeight: 600 }}>
                      <Trans>Netto Gesamtzeit:</Trans> {data.totals.total_work_formatted}
                    </Typography>
                  </Box>
                </Box>
              </>
            )}
          </div>
        )}
      </DialogContent>

      <DialogActions>
        <Button onClick={onClose}>
          <Trans>Schließen</Trans>
        </Button>
        <Button
          variant="outlined"
          startIcon={<PrintIcon />}
          onClick={() => handlePrint()}
          disabled={!data || data.days.length === 0}
        >
          <Trans>Drucken</Trans>
        </Button>
      </DialogActions>
    </Dialog>
  );
};

export default TimeReportModal;