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 TextField from '@mui/material/TextField';
import MenuItem from '@mui/material/MenuItem';
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
import Alert from '@mui/material/Alert';
import { Trans, t } from '@lingui/macro';
import { useLingui } from '@lingui/react';
import { VacationRequest, SickRequest } from '../../types/leave';

interface EditLeaveRequestModalProps {
  open: boolean;
  onClose: () => void;
  request: VacationRequest | SickRequest | null;
  type: 'vacation' | 'sick';
  onSave: (id: number, data: any) => Promise<void>;
}

const EditLeaveRequestModal: React.FC<EditLeaveRequestModalProps> = ({
  open,
  onClose,
  request,
  type,
  onSave,
}) => {
  const { i18n } = useLingui();
  const isVacation = type === 'vacation';

  const [formData, setFormData] = useState({
    from_date: '',
    to_date: '',
    status: '',
    notes: '',
    reason: '',
    edit_notes: '',
  });

  const [errors, setErrors] = useState<Record<string, string>>({});
  const [saving, setSaving] = useState(false);

  useEffect(() => {
    if (request && open) {
      if (isVacation) {
        const vr = request as VacationRequest;
        setFormData({
          from_date: vr.zvr_from_date?.split('T')[0] || '',
          to_date: vr.zvr_to_date?.split('T')[0] || '',
          status: vr.zvr_status || 'submitted',
          notes: vr.zvr_notes || '',
          reason: vr.zvr_reason || '',
          edit_notes: '',
        });
      } else {
        const sr = request as SickRequest;
        setFormData({
          from_date: sr.zsr_from_date?.split('T')[0] || '',
          to_date: sr.zsr_to_date?.split('T')[0] || '',
          status: sr.zsr_status || 'submitted',
          notes: sr.zsr_notes || '',
          reason: '',
          edit_notes: '',
        });
      }
      setErrors({});
    }
  }, [request, open, isVacation]);

  const handleSave = async () => {
    if (!request) return;

    const requestId = isVacation
      ? (request as VacationRequest).zvr_id
      : (request as SickRequest).zsr_id;

    try {
      setSaving(true);
      setErrors({});

      const dataToSend: any = {
        [isVacation ? 'zvr_from_date' : 'zsr_from_date']: formData.from_date,
        [isVacation ? 'zvr_to_date' : 'zsr_to_date']: formData.to_date,
        [isVacation ? 'zvr_status' : 'zsr_status']: formData.status,
        [isVacation ? 'zvr_notes' : 'zsr_notes']: formData.notes,
        edit_notes: formData.edit_notes,
      };

      if (isVacation) {
        dataToSend.zvr_reason = formData.reason;
      }

      await onSave(requestId, dataToSend);
      onClose();
    } catch (err: any) {
      if (err.response?.data?.errors) {
        setErrors(err.response.data.errors);
      }
    } finally {
      setSaving(false);
    }
  };

  const handleClose = () => {
    if (!saving) {
      onClose();
    }
  };

  if (!request) return null;

  return (
    <Dialog open={open} onClose={handleClose} maxWidth="sm" fullWidth>
      <DialogTitle>
        <Trans>Antrag bearbeiten</Trans>
      </DialogTitle>
      <DialogContent>
        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2, mt: 2 }}>
          <Alert severity="info">
            <Trans>Alle Änderungen werden im Änderungsverlauf protokolliert.</Trans>
          </Alert>

          <TextField
            label={t`Von`}
            type="date"
            fullWidth
            value={formData.from_date}
            onChange={(e) => setFormData({ ...formData, from_date: e.target.value })}
            error={!!errors.from_date}
            helperText={errors.from_date}
            InputLabelProps={{ shrink: true }}
          />

          <TextField
            label={t`Bis`}
            type="date"
            fullWidth
            value={formData.to_date}
            onChange={(e) => setFormData({ ...formData, to_date: e.target.value })}
            error={!!errors.to_date}
            helperText={errors.to_date}
            InputLabelProps={{ shrink: true }}
          />

          <TextField
            select
            label={t`Status`}
            fullWidth
            value={formData.status}
            onChange={(e) => setFormData({ ...formData, status: e.target.value })}
            error={!!errors.status}
            helperText={errors.status}
          >
            <MenuItem value="submitted">
              <Trans>Eingereicht</Trans>
            </MenuItem>
            <MenuItem value="approved">
              <Trans>Genehmigt</Trans>
            </MenuItem>
            <MenuItem value="rejected">
              <Trans>Abgelehnt</Trans>
            </MenuItem>
          </TextField>

          {isVacation && (
            <TextField
              label={t`Grund`}
              fullWidth
              multiline
              rows={2}
              value={formData.reason}
              onChange={(e) => setFormData({ ...formData, reason: e.target.value })}
              error={!!errors.reason}
              helperText={errors.reason}
            />
          )}

          <TextField
            label={t`Notizen`}
            fullWidth
            multiline
            rows={2}
            value={formData.notes}
            onChange={(e) => setFormData({ ...formData, notes: e.target.value })}
            error={!!errors.notes}
            helperText={errors.notes}
          />

          <TextField
            label={t`Begründung der Änderung`}
            fullWidth
            multiline
            rows={2}
            value={formData.edit_notes}
            onChange={(e) => setFormData({ ...formData, edit_notes: e.target.value })}
            placeholder={i18n._(t`Optional: Warum wurde dieser Antrag bearbeitet?`)}
            error={!!errors.edit_notes}
            helperText={errors.edit_notes}
          />
        </Box>
      </DialogContent>
      <DialogActions>
        <Button onClick={handleClose} disabled={saving}>
          <Trans>Abbrechen</Trans>
        </Button>
        <Button onClick={handleSave} variant="contained" disabled={saving}>
          {saving ? <Trans>Speichern...</Trans> : <Trans>Speichern</Trans>}
        </Button>
      </DialogActions>
    </Dialog>
  );
};

export default EditLeaveRequestModal;