import React from 'react';
import Card from '@mui/material/Card';
import CardContent from '@mui/material/CardContent';
import CardActions from '@mui/material/CardActions';
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
import Chip from '@mui/material/Chip';
import Button from '@mui/material/Button';
import IconButton from '@mui/material/IconButton';
import Tooltip from '@mui/material/Tooltip';
import Alert from '@mui/material/Alert';
import CheckIcon from '@mui/icons-material/Check';
import CloseIcon from '@mui/icons-material/Close';
import DeleteIcon from '@mui/icons-material/Delete';
import WarningIcon from '@mui/icons-material/Warning';
import DownloadIcon from '@mui/icons-material/Download';
import EditIcon from '@mui/icons-material/Edit';
import HistoryIcon from '@mui/icons-material/History';
import VerifiedUserIcon from '@mui/icons-material/VerifiedUser';
import AttachFileIcon from '@mui/icons-material/AttachFile';
import { Trans } from '@lingui/macro';
import { format, parseISO } from 'date-fns';
import { de } from 'date-fns/locale';
import { VacationRequest, SickRequest } from '../../types/leave';
import UserAvatar from '../UserAvatar';

interface LeaveRequestCardProps {
  request: VacationRequest | SickRequest;
  type: 'vacation' | 'sick';
  onApprove?: (id: number) => void;
  onReject?: (id: number) => void;
  onDelete?: (id: number) => void;
  onDownload?: (id: number) => void;
  onEdit?: (request: VacationRequest | SickRequest) => void;
  onViewAuditLog?: (id: number, type: 'vacation' | 'sick') => void;
  showActions?: boolean;
}

const LeaveRequestCard: React.FC<LeaveRequestCardProps> = ({
  request,
  type,
  onApprove,
  onReject,
  onDelete,
  onDownload,
  onEdit,
  onViewAuditLog,
  showActions = true,
}) => {
  const isVacation = type === 'vacation';
  const isSick = type === 'sick';

  const formatDate = (dateString: string) => {
    try {
      return format(parseISO(dateString), 'dd.MM.yyyy', { locale: de });
    } catch {
      return dateString;
    }
  };

  const fromDate = isVacation
    ? (request as VacationRequest).zvr_from_date
    : (request as SickRequest).zsr_from_date;
  const toDate = isVacation
    ? (request as VacationRequest).zvr_to_date
    : (request as SickRequest).zsr_to_date;

  // Get status and handle empty string
  const rawStatus = isVacation
    ? (request as VacationRequest).zvr_status
    : (request as SickRequest).zsr_status;
  const status = rawStatus && rawStatus.trim() !== '' ? rawStatus : 'submitted';

  const getStatusColor = () => {
    switch (status) {
      case 'approved':
        return 'success';
      case 'rejected':
        return 'error';
      case 'submitted':
        return 'warning';
      default:
        return 'default';
    }
  };
  const notes = isVacation
    ? (request as VacationRequest).zvr_notes
    : (request as SickRequest).zsr_notes;
  const requestId = isVacation
    ? (request as VacationRequest).zvr_id
    : (request as SickRequest).zsr_id;

  const hasConflicts = isVacation && (request as VacationRequest).has_shift_conflicts;
  const hasFile = isSick && (request as SickRequest).has_file;

  // Helper to get user initials
  const getUserInitials = () => {
    if (request.user?.initials) return request.user.initials;
    if (request.user_details?.initials) return request.user_details.initials;

    // Generate from first and last name
    if (request.user) {
      const firstName = request.user.usr_Vorname || '';
      const lastName = request.user.usr_Name || '';
      return (firstName.charAt(0) + lastName.charAt(0)).toUpperCase() || '?';
    }
    return '?';
  };

  // Helper to get user full name
  const getUserFullName = () => {
    if (request.user?.full_name) return request.user.full_name;
    if (request.user_details?.full_name) return request.user_details.full_name;

    // Generate from first and last name
    if (request.user) {
      const firstName = request.user.usr_Vorname || '';
      const lastName = request.user.usr_Name || '';
      return `${firstName} ${lastName}`.trim() || 'Unknown User';
    }
    return 'Unknown User';
  };

  return (
    <Card>
      <CardContent>
        <Box sx={{ display: 'flex', alignItems: 'flex-start', gap: 2, mb: 2 }}>
          {request.user && (
            <UserAvatar
              photoUrl={request.user.photourl || null}
              initials={getUserInitials()}
              fullName={getUserFullName()}
            />
          )}
          <Box sx={{ flex: 1 }}>
            <Typography variant="h6">
              {getUserFullName()}
            </Typography>
            {request.department && (
              <Typography variant="caption" color="text.secondary">
                {request.department.ber_name}
              </Typography>
            )}
          </Box>
          <Chip label={status} size="small" color={getStatusColor()} />
        </Box>

        <Box sx={{ mb: 2 }}>
          <Typography variant="body2" color="text.secondary">
            <Trans>Von:</Trans> {formatDate(fromDate)}
          </Typography>
          <Typography variant="body2" color="text.secondary">
            <Trans>Bis:</Trans> {formatDate(toDate)}
          </Typography>
          <Typography variant="body2" fontWeight="bold" sx={{ mt: 0.5 }}>
            {request.duration_days} <Trans>Tage</Trans>
          </Typography>
        </Box>

        {notes && (
          <Typography variant="body2" sx={{ mb: 1 }}>
            {notes}
          </Typography>
        )}

        {hasConflicts && (
          <Alert severity="warning" icon={<WarningIcon />} sx={{ mt: 1 }}>
            <Trans>Schichtkonflikte vorhanden</Trans>
          </Alert>
        )}

        {isSick && (() => {
          const sick = request as SickRequest;
          const proofMethod = sick.zsr_proof_method || (hasFile ? 'file' : 'none');

          if (proofMethod === 'file' && hasFile) {
            return (
              <Box sx={{ mt: 1, display: 'flex', alignItems: 'center', gap: 1 }}>
                <Chip
                  icon={<AttachFileIcon />}
                  label={<Trans>AU hochgeladen</Trans>}
                  size="small"
                  variant="outlined"
                  color="info"
                />
                <Button
                  size="small"
                  startIcon={<DownloadIcon />}
                  onClick={() => onDownload?.(requestId)}
                >
                  <Trans>Herunterladen</Trans>
                </Button>
              </Box>
            );
          }

          if (proofMethod === 'eau_consent') {
            return (
              <Box sx={{ mt: 1 }}>
                <Chip
                  icon={<VerifiedUserIcon />}
                  label={<Trans>eAU-Einwilligung erteilt</Trans>}
                  size="small"
                  variant="outlined"
                  color="success"
                />
                {sick.eau_consent_at && (
                  <Typography variant="caption" color="text.secondary" sx={{ ml: 1 }}>
                    {formatDate(sick.eau_consent_at)}
                  </Typography>
                )}
              </Box>
            );
          }

          if (proofMethod === 'file' && !hasFile) {
            return (
              <Box sx={{ mt: 1 }}>
                <Chip
                  icon={<AttachFileIcon />}
                  label={<Trans>AU ausstehend</Trans>}
                  size="small"
                  variant="outlined"
                  color="warning"
                />
              </Box>
            );
          }

          return null;
        })()}
      </CardContent>

      {showActions && (
        <CardActions sx={{ justifyContent: 'space-between' }}>
          <Box sx={{ display: 'flex', gap: 1 }}>
            {status === 'submitted' && (
              <>
                {onApprove && (
                  <Button
                    size="small"
                    color="success"
                    startIcon={<CheckIcon />}
                    onClick={() => onApprove(requestId)}
                  >
                    <Trans>Genehmigen</Trans>
                  </Button>
                )}
                {onReject && (
                  <Button
                    size="small"
                    color="error"
                    startIcon={<CloseIcon />}
                    onClick={() => onReject(requestId)}
                  >
                    <Trans>Ablehnen</Trans>
                  </Button>
                )}
              </>
            )}
            {onDelete && (
              <Tooltip title={<Trans>Löschen</Trans>}>
                <IconButton size="small" color="error" onClick={() => onDelete(requestId)}>
                  <DeleteIcon fontSize="small" />
                </IconButton>
              </Tooltip>
            )}
          </Box>

          <Box sx={{ display: 'flex', gap: 1 }}>
            {onEdit && (
              <Tooltip title={<Trans>Bearbeiten</Trans>}>
                <IconButton size="small" onClick={() => onEdit(request)}>
                  <EditIcon fontSize="small" />
                </IconButton>
              </Tooltip>
            )}
            {onViewAuditLog && (
              <Tooltip title={<Trans>Änderungsverlauf</Trans>}>
                <IconButton size="small" onClick={() => onViewAuditLog(requestId, type)}>
                  <HistoryIcon fontSize="small" />
                </IconButton>
              </Tooltip>
            )}
          </Box>
        </CardActions>
      )}
    </Card>
  );
};

export default LeaveRequestCard;