import React 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 Chip from '@mui/material/Chip';
import Divider from '@mui/material/Divider';
import Alert from '@mui/material/Alert';
import SmartphoneIcon from '@mui/icons-material/Smartphone';
import AccessTimeIcon from '@mui/icons-material/AccessTime';
import LinkOffIcon from '@mui/icons-material/LinkOff';
import { Trans, t } from '@lingui/macro';
import { useLingui } from '@lingui/react';
import { format, parseISO } from 'date-fns';
import { de, enUS, es, fr, it } from 'date-fns/locale';

interface LinkedDevice {
  device_id: number;
  device_name: string | null;
  device_type: string;
  device_model: string | null;
  paired_at: string | null;
  last_active_at: string | null;
}

interface UserDeviceInfoModalProps {
  open: boolean;
  onClose: () => void;
  userName: string;
  device: LinkedDevice | null;
  onUnlink: () => void;
}

const UserDeviceInfoModal: React.FC<UserDeviceInfoModalProps> = ({
  open,
  onClose,
  userName,
  device,
  onUnlink,
}) => {
  const { i18n } = useLingui();

  const getLocale = () => {
    const lang = i18n.locale || 'de';
    switch (lang) {
      case 'en':
        return enUS;
      case 'es':
        return es;
      case 'fr':
        return fr;
      case 'it':
        return it;
      default:
        return de;
    }
  };

  const formatDateTime = (dateString: string | null) => {
    if (!dateString) return '-';
    try {
      return format(parseISO(dateString), 'PPp', { locale: getLocale() });
    } catch {
      return dateString;
    }
  };

  const getDeviceTypeLabel = (type: string) => {
    switch (type.toLowerCase()) {
      case 'android':
        return 'Android';
      case 'ios':
        return 'iOS';
      default:
        return type;
    }
  };

  const getDeviceTypeColor = (type: string): "default" | "primary" | "secondary" | "success" | "error" | "info" | "warning" => {
    switch (type.toLowerCase()) {
      case 'android':
        return 'success';
      case 'ios':
        return 'info';
      default:
        return 'default';
    }
  };

  if (!device) {
    return null;
  }

  return (
    <Dialog open={open} onClose={onClose} maxWidth="sm" fullWidth>
      <DialogTitle>
        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
          <SmartphoneIcon color="primary" />
          <Trans>Geräteinformationen für {userName}</Trans>
        </Box>
      </DialogTitle>

      <DialogContent>
        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2, pt: 1 }}>
          {/* Device Type */}
          <Box>
            <Typography variant="caption" color="text.secondary" sx={{ mb: 0.5, display: 'block' }}>
              <Trans>Gerätetyp</Trans>
            </Typography>
            <Chip
              label={getDeviceTypeLabel(device.device_type)}
              color={getDeviceTypeColor(device.device_type)}
              size="small"
            />
          </Box>

          <Divider />

          {/* Device Name */}
          {device.device_name && (
            <>
              <Box>
                <Typography variant="caption" color="text.secondary" sx={{ mb: 0.5, display: 'block' }}>
                  <Trans>Gerätename</Trans>
                </Typography>
                <Typography variant="body1">{device.device_name}</Typography>
              </Box>
              <Divider />
            </>
          )}

          {/* Device Model */}
          {device.device_model && (
            <>
              <Box>
                <Typography variant="caption" color="text.secondary" sx={{ mb: 0.5, display: 'block' }}>
                  <Trans>Gerätemodell</Trans>
                </Typography>
                <Typography variant="body1">{device.device_model}</Typography>
              </Box>
              <Divider />
            </>
          )}

          {/* Paired At */}
          <Box>
            <Typography variant="caption" color="text.secondary" sx={{ mb: 0.5, display: 'block' }}>
              <Trans>Gekoppelt am</Trans>
            </Typography>
            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
              <AccessTimeIcon fontSize="small" color="action" />
              <Typography variant="body2">{formatDateTime(device.paired_at)}</Typography>
            </Box>
          </Box>

          <Divider />

          {/* Last Active */}
          <Box>
            <Typography variant="caption" color="text.secondary" sx={{ mb: 0.5, display: 'block' }}>
              <Trans>Zuletzt aktiv</Trans>
            </Typography>
            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
              <AccessTimeIcon fontSize="small" color="action" />
              <Typography variant="body2">{formatDateTime(device.last_active_at)}</Typography>
            </Box>
          </Box>

          <Divider />

          {/* Unlink Warning */}
          <Alert severity="warning" sx={{ mt: 2 }}>
            <Trans>
              Wenn Sie das Gerät entkoppeln, muss {userName} das Gerät erneut koppeln, um die App zu verwenden.
            </Trans>
          </Alert>
        </Box>
      </DialogContent>

      <DialogActions sx={{ px: 3, pb: 2 }}>
        <Button onClick={onClose} color="inherit">
          <Trans>Schließen</Trans>
        </Button>
        <Button
          onClick={onUnlink}
          variant="contained"
          color="error"
          startIcon={<LinkOffIcon />}
        >
          <Trans>Gerät entkoppeln</Trans>
        </Button>
      </DialogActions>
    </Dialog>
  );
};

export default UserDeviceInfoModal;