import React, { useEffect, useState } from 'react';
import {
  Alert,
  AlertTitle,
  Box,
  CircularProgress,
  Link,
  Typography,
} from '@mui/material';
import { Link as RouterLink } from 'react-router-dom';
import { vehiclesApi } from '../../services/vehicles';
import { InspectionAlert, InspectionAlertType } from '../../types/vehicle.types';

function formatDate(iso: string): string {
  return new Date(iso).toLocaleDateString('de-DE', {
    day: '2-digit',
    month: '2-digit',
    year: 'numeric',
  });
}

function alertTypeLabel(type: InspectionAlertType): string {
  return type === '57a' ? '§57a Periodische Prüfung' : 'Nächste Wartung / Service';
}

type Urgency = 'overdue' | 'urgent' | 'warning';

const URGENCY_CONFIG: Record<Urgency, { severity: 'error' | 'warning'; label: string }> = {
  overdue: { severity: 'error',   label: 'Überfällig' },
  urgent:  { severity: 'error',   label: 'Dringend (≤ 14 Tage)' },
  warning: { severity: 'warning', label: 'Fällig in Kürze (≤ 30 Tage)' },
};

interface InspectionAlertsProps {
  daysAhead?: number;
  hideWhenEmpty?: boolean;
}

const InspectionAlerts: React.FC<InspectionAlertsProps> = ({
  daysAhead = 30,
  hideWhenEmpty = true,
}) => {
  const [alerts, setAlerts] = useState<InspectionAlert[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    let mounted = true;
    const fetchAlerts = async () => {
      try {
        setLoading(true);
        setError(null);
        const data = await vehiclesApi.getAlerts(daysAhead);
        if (mounted) setAlerts(data);
      } catch {
        if (mounted) setError('Prüfungshinweise konnten nicht geladen werden.');
      } finally {
        if (mounted) setLoading(false);
      }
    };
    fetchAlerts();
    return () => { mounted = false; };
  }, [daysAhead]);

  if (loading) {
    return (
      <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, py: 1 }}>
        <CircularProgress size={16} />
        <Typography variant="body2" color="text.secondary">
          Prüfungsfristen werden geprüft…
        </Typography>
      </Box>
    );
  }

  if (error) {
    return <Alert severity="error">{error}</Alert>;
  }

  if (alerts.length === 0) {
    if (hideWhenEmpty) return null;
    return (
      <Alert severity="success">
        Alle Fristen sind aktuell. Keine Fälligkeiten in den nächsten {daysAhead} Tagen.
      </Alert>
    );
  }

  const overdue = alerts.filter((a) => a.tage < 0);
  const urgent  = alerts.filter((a) => a.tage >= 0 && a.tage <= 14);
  const warning = alerts.filter((a) => a.tage > 14);

  const groups: Array<{ urgency: Urgency; items: InspectionAlert[] }> = ([
    { urgency: 'overdue' as Urgency, items: overdue },
    { urgency: 'urgent' as Urgency,  items: urgent },
    { urgency: 'warning' as Urgency, items: warning },
  ] as Array<{ urgency: Urgency; items: InspectionAlert[] }>).filter((g) => g.items.length > 0);

  return (
    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5 }}>
      {groups.map(({ urgency, items }) => {
        const { severity, label } = URGENCY_CONFIG[urgency];
        return (
          <Alert key={urgency} severity={severity} variant="outlined">
            <AlertTitle sx={{ fontWeight: 600 }}>{label}</AlertTitle>
            <Box component="ul" sx={{ m: 0, pl: 2 }}>
              {items.map((alert) => {
                const typeLabel = alertTypeLabel(alert.type);
                const dateStr   = formatDate(alert.faelligAm);
                const tageText  = alert.tage < 0
                  ? `seit ${Math.abs(alert.tage)} Tag${Math.abs(alert.tage) === 1 ? '' : 'en'} überfällig`
                  : alert.tage === 0
                    ? 'heute fällig'
                    : `fällig in ${alert.tage} Tag${alert.tage === 1 ? '' : 'en'}`;

                return (
                  <Box
                    key={`${alert.fahrzeugId}-${alert.type}`}
                    component="li"
                    sx={{ mb: 0.5 }}
                  >
                    <Link
                      component={RouterLink}
                      to={`/fahrzeuge/${alert.fahrzeugId}`}
                      color="inherit"
                      underline="hover"
                      sx={{ fontWeight: 500 }}
                    >
                      {alert.bezeichnung}
                      {alert.kurzname ? ` (${alert.kurzname})` : ''}
                    </Link>
                    {' — '}
                    <strong>{typeLabel}</strong>
                    {' '}
                    <Typography component="span" variant="body2">
                      {tageText} ({dateStr})
                    </Typography>
                  </Box>
                );
              })}
            </Box>
          </Alert>
        );
      })}
    </Box>
  );
};

export default InspectionAlerts;
