import React, { useEffect, useState, useCallback } from 'react';
import {
  Alert,
  Box,
  Button,
  Card,
  CardActionArea,
  CardContent,
  CardMedia,
  Chip,
  CircularProgress,
  Container,
  Grid,
  InputAdornment,
  TextField,
  Tooltip,
  Typography,
} from '@mui/material';
import {
  Add,
  CheckCircle,
  DirectionsCar,
  Error as ErrorIcon,
  FileDownload,
  PauseCircle,
  School,
  Search,
  Warning,
  ReportProblem,
} from '@mui/icons-material';
import { useNavigate } from 'react-router-dom';
import DashboardLayout from '../components/dashboard/DashboardLayout';
import ChatAwareFab from '../components/shared/ChatAwareFab';
import { vehiclesApi } from '../services/vehicles';
import { equipmentApi } from '../services/equipment';
import type { VehicleEquipmentWarning } from '../types/equipment.types';
import { AusruestungStatus, AusruestungStatusLabel } from '../types/equipment.types';
import {
  FahrzeugListItem,
  FahrzeugStatus,
  FahrzeugStatusLabel,
} from '../types/vehicle.types';
import { usePermissions } from '../hooks/usePermissions';

// ── Status chip config ────────────────────────────────────────────────────────

const STATUS_CONFIG: Record<
  FahrzeugStatus,
  { color: 'success' | 'warning' | 'error' | 'info'; icon: React.ReactElement }
> = {
  [FahrzeugStatus.Einsatzbereit]:       { color: 'success', icon: <CheckCircle fontSize="small" /> },
  [FahrzeugStatus.AusserDienstWartung]: { color: 'warning', icon: <PauseCircle fontSize="small" /> },
  [FahrzeugStatus.AusserDienstSchaden]: { color: 'error',   icon: <ErrorIcon fontSize="small" /> },
};

// ── Inspection badge helpers ──────────────────────────────────────────────────

type InspBadgeColor = 'success' | 'warning' | 'error' | 'default';

function inspBadgeColor(tage: number | null): InspBadgeColor {
  if (tage === null) return 'default';
  if (tage < 0)    return 'error';
  if (tage <= 30)  return 'warning';
  return 'success';
}

function inspBadgeLabel(art: string, tage: number | null, faelligAm: string | null): string {
  if (faelligAm === null) return '';
  const date = new Date(faelligAm).toLocaleDateString('de-DE', {
    day: '2-digit', month: '2-digit', year: '2-digit',
  });
  if (tage === null) return `${art}: ${date}`;
  if (tage < 0)   return `${art}: ÜBERFÄLLIG (${date})`;
  if (tage === 0) return `${art}: heute (${date})`;
  return `${art}: ${date}`;
}

function inspTooltipTitle(fullLabel: string, tage: number | null, faelligAm: string | null): string {
  if (!faelligAm) return fullLabel;
  const date = new Date(faelligAm).toLocaleDateString('de-DE');
  if (tage !== null && tage < 0) {
    return `${fullLabel}: Seit ${Math.abs(tage)} Tagen überfällig!`;
  }
  return `${fullLabel}: Fällig am ${date}`;
}

// ── Vehicle Card ──────────────────────────────────────────────────────────────

interface VehicleCardProps {
  vehicle: FahrzeugListItem;
  onClick: (id: string) => void;
  warnings?: VehicleEquipmentWarning[];
}

const VehicleCard: React.FC<VehicleCardProps> = ({ vehicle, onClick, warnings = [] }) => {
  const status    = vehicle.status as FahrzeugStatus;
  const statusCfg = STATUS_CONFIG[status] ?? STATUS_CONFIG[FahrzeugStatus.Einsatzbereit];
  const isSchaden = status === FahrzeugStatus.AusserDienstSchaden;

  const inspBadges = [
    {
      art:       '§57a',
      fullLabel: '§57a Periodische Prüfung',
      tage:      vehicle.paragraph57a_tage_bis_faelligkeit,
      faelligAm: vehicle.paragraph57a_faellig_am,
    },
    {
      art:       'Wartung',
      fullLabel: 'Nächste Wartung / Service',
      tage:      vehicle.wartung_tage_bis_faelligkeit,
      faelligAm: vehicle.naechste_wartung_am,
    },
  ].filter((b) => b.faelligAm !== null);

  return (
    <Card
      sx={{
        height: '100%',
        display: 'flex',
        flexDirection: 'column',
        border: isSchaden ? '2px solid' : undefined,
        borderColor: isSchaden ? 'error.main' : undefined,
        position: 'relative',
      }}
    >
      {isSchaden && (
        <Tooltip title="Fahrzeug außer Dienst (Schaden) — nicht einsatzbereit!">
          <ReportProblem
            color="error"
            sx={{ position: 'absolute', top: 8, right: 8, zIndex: 1 }}
          />
        </Tooltip>
      )}

      <CardActionArea
        onClick={() => onClick(vehicle.id)}
        sx={{ flexGrow: 1, display: 'flex', flexDirection: 'column', alignItems: 'stretch' }}
      >
        {vehicle.bild_url ? (
          <CardMedia
            component="img"
            height="140"
            image={vehicle.bild_url}
            alt={vehicle.bezeichnung}
            sx={{ objectFit: 'cover' }}
          />
        ) : (
          <Box
            sx={{
              height: 120,
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              bgcolor: 'action.hover',
            }}
          >
            <DirectionsCar sx={{ fontSize: 64, color: 'text.disabled' }} />
          </Box>
        )}

        <CardContent sx={{ flexGrow: 1, pb: '8px !important' }}>
          <Box sx={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', mb: 0.5 }}>
            <Box>
              <Typography variant="h6" component="div" lineHeight={1.2}>
                {vehicle.bezeichnung}
                {vehicle.kurzname && (
                  <Typography component="span" variant="body2" color="text.secondary" sx={{ ml: 1 }}>
                    ({vehicle.kurzname})
                  </Typography>
                )}
              </Typography>
              {vehicle.amtliches_kennzeichen && (
                <Typography variant="body2" color="text.secondary">
                  {vehicle.amtliches_kennzeichen}
                </Typography>
              )}
            </Box>
          </Box>

          <Box sx={{ mb: 1 }}>
            <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>
              <Chip
                icon={statusCfg.icon}
                label={FahrzeugStatusLabel[status]}
                color={statusCfg.color}
                size="small"
                variant="outlined"
              />
              {vehicle.aktiver_lehrgang && (
                <Chip
                  icon={<School fontSize="small" />}
                  label="In Lehrgang"
                  color="info"
                  size="small"
                  variant="outlined"
                />
              )}
            </Box>
            {(status === FahrzeugStatus.AusserDienstWartung || status === FahrzeugStatus.AusserDienstSchaden) &&
              vehicle.ausser_dienst_bis && (
              <Typography variant="caption" color="text.secondary" sx={{ display: 'block', mt: 0.5 }}>
                Bis ca. {new Date(vehicle.ausser_dienst_bis).toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit', year: 'numeric' })}
              </Typography>
            )}
          </Box>

          {inspBadges.length > 0 && (
            <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>
              {inspBadges.map((b) => {
                const color = inspBadgeColor(b.tage);
                const label = inspBadgeLabel(b.art, b.tage, b.faelligAm);
                if (!label) return null;
                return (
                  <Tooltip
                    key={b.art}
                    title={inspTooltipTitle(b.fullLabel, b.tage, b.faelligAm)}
                  >
                    <Chip
                      size="small"
                      label={label}
                      color={color}
                      variant={color === 'default' ? 'outlined' : 'filled'}
                      icon={b.tage !== null && b.tage < 0 ? <Warning fontSize="small" /> : undefined}
                      sx={{ fontSize: '0.7rem' }}
                    />
                  </Tooltip>
                );
              })}
            </Box>
          )}

          {warnings.length > 0 && (
            <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5, mt: 0.5 }}>
              {warnings.slice(0, warnings.length > 3 ? 2 : 3).map((w) => {
                const isError =
                  w.status === AusruestungStatus.Beschaedigt ||
                  w.status === AusruestungStatus.AusserDienst;
                return (
                  <Tooltip
                    key={w.ausruestung_id}
                    title={`${w.kategorie_name}: ${AusruestungStatusLabel[w.status]}`}
                  >
                    <Chip
                      size="small"
                      icon={<ReportProblem />}
                      label={w.bezeichnung}
                      color={isError ? 'error' : 'warning'}
                      sx={{ fontSize: '0.7rem', maxWidth: 160 }}
                    />
                  </Tooltip>
                );
              })}
              {warnings.length > 3 && (
                <Tooltip
                  title={warnings
                    .slice(2)
                    .map((w) => `${w.bezeichnung}: ${AusruestungStatusLabel[w.status]}`)
                    .join('\n')}
                >
                  <Chip
                    size="small"
                    icon={<Warning />}
                    label={`+${warnings.length - 2} weitere`}
                    color={
                      warnings
                        .slice(2)
                        .some(
                          (w) =>
                            w.status === AusruestungStatus.Beschaedigt ||
                            w.status === AusruestungStatus.AusserDienst
                        )
                        ? 'error'
                        : 'warning'
                    }
                    sx={{ fontSize: '0.7rem' }}
                  />
                </Tooltip>
              )}
            </Box>
          )}
        </CardContent>
      </CardActionArea>
    </Card>
  );
};

// ── Main Page ─────────────────────────────────────────────────────────────────

function Fahrzeuge() {
  const navigate = useNavigate();
  const { isAdmin } = usePermissions();
  const [vehicles, setVehicles] = useState<FahrzeugListItem[]>([]);
  const [loading, setLoading]   = useState(true);
  const [error, setError]       = useState<string | null>(null);
  const [search, setSearch]     = useState('');
  const [equipmentWarnings, setEquipmentWarnings] = useState<Map<string, VehicleEquipmentWarning[]>>(new Map());

  const fetchVehicles = useCallback(async () => {
    try {
      setLoading(true);
      setError(null);
      const data = await vehiclesApi.getAll();
      setVehicles(data);
    } catch {
      setError('Fahrzeuge konnten nicht geladen werden. Bitte versuchen Sie es erneut.');
    } finally {
      setLoading(false);
    }
  }, []);

  useEffect(() => { fetchVehicles(); }, [fetchVehicles]);

  // Fetch equipment warnings separately — must not block or delay vehicle list rendering
  useEffect(() => {
    async function fetchWarnings() {
      try {
        const warnings = await equipmentApi.getVehicleWarnings();
        const warningsMap = new Map<string, VehicleEquipmentWarning[]>();
        warnings.forEach(w => {
          const existing = warningsMap.get(w.fahrzeug_id) || [];
          existing.push(w);
          warningsMap.set(w.fahrzeug_id, existing);
        });
        setEquipmentWarnings(warningsMap);
      } catch {
        // Silently fail — equipment warnings are non-critical
        setEquipmentWarnings(new Map());
      }
    }
    fetchWarnings();
  }, []);

  const handleExportAlerts = useCallback(async () => {
    try {
      const blob = await vehiclesApi.exportAlerts();
      const url = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      const today = new Date();
      const dateStr = `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, '0')}-${String(today.getDate()).padStart(2, '0')}`;
      a.download = `pruefungen_${dateStr}.csv`;
      document.body.appendChild(a);
      a.click();
      a.remove();
      URL.revokeObjectURL(url);
    } catch {
      setError('CSV-Export fehlgeschlagen.');
    }
  }, []);

  const filtered = vehicles.filter((v) => {
    if (!search.trim()) return true;
    const q = search.toLowerCase();
    return (
      v.bezeichnung.toLowerCase().includes(q) ||
      (v.kurzname?.toLowerCase().includes(q) ?? false) ||
      (v.amtliches_kennzeichen?.toLowerCase().includes(q) ?? false) ||
      (v.hersteller?.toLowerCase().includes(q) ?? false)
    );
  });

  const einsatzbereit = vehicles.filter((v) => v.status === FahrzeugStatus.Einsatzbereit).length;

  // An overdue inspection exists if §57a OR Wartung is past due
  const hasOverdue = vehicles.some(
    (v) =>
      (v.paragraph57a_tage_bis_faelligkeit !== null && v.paragraph57a_tage_bis_faelligkeit < 0) ||
      (v.wartung_tage_bis_faelligkeit !== null && v.wartung_tage_bis_faelligkeit < 0)
  );

  return (
    <DashboardLayout>
      <Container maxWidth="xl">
        <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 3 }}>
          <Box>
            <Typography variant="h4" gutterBottom sx={{ mb: 0 }}>
              Fahrzeugverwaltung
            </Typography>
            {!loading && (
              <Typography variant="body2" color="text.secondary">
                {vehicles.length} Fahrzeug{vehicles.length !== 1 ? 'e' : ''} gesamt
                {' · '}
                <Typography component="span" variant="body2" color="success.main" fontWeight={600}>
                  {einsatzbereit} einsatzbereit
                </Typography>
              </Typography>
            )}
          </Box>
          <Button
            variant="outlined"
            size="small"
            startIcon={<FileDownload />}
            onClick={handleExportAlerts}
          >
            Prüfungen CSV
          </Button>
        </Box>

        {hasOverdue && (
          <Alert severity="error" sx={{ mb: 2 }} icon={<Warning />}>
            <strong>Achtung:</strong> Mindestens ein Fahrzeug hat eine überfällige Prüfungs- oder Wartungsfrist.
          </Alert>
        )}

        <TextField
          placeholder="Fahrzeug suchen (Bezeichnung, Kennzeichen, Hersteller…)"
          value={search}
          onChange={(e) => setSearch(e.target.value)}
          fullWidth
          size="small"
          sx={{ mb: 3, maxWidth: 480 }}
          InputProps={{
            startAdornment: (
              <InputAdornment position="start">
                <Search />
              </InputAdornment>
            ),
          }}
        />

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

        {!loading && error && (
          <Alert severity="error" sx={{ mb: 2 }}>
            {error}
          </Alert>
        )}

        {!loading && !error && filtered.length === 0 && (
          <Box sx={{ textAlign: 'center', py: 8 }}>
            <DirectionsCar sx={{ fontSize: 64, color: 'text.disabled', mb: 2 }} />
            <Typography variant="h6" color="text.secondary">
              {vehicles.length === 0
                ? 'Noch keine Fahrzeuge erfasst'
                : 'Kein Fahrzeug entspricht dem Suchbegriff'}
            </Typography>
          </Box>
        )}

        {!loading && !error && filtered.length > 0 && (
          <Grid container spacing={3}>
            {filtered.map((vehicle) => (
              <Grid item key={vehicle.id} xs={12} sm={6} md={4} lg={3}>
                <VehicleCard
                  vehicle={vehicle}
                  onClick={(id) => navigate(`/fahrzeuge/${id}`)}
                  warnings={equipmentWarnings.get(vehicle.id) || []}
                />
              </Grid>
            ))}
          </Grid>
        )}

        {isAdmin && (
          <ChatAwareFab
            aria-label="Fahrzeug hinzufügen"
            onClick={() => navigate('/fahrzeuge/neu')}
          >
            <Add />
          </ChatAwareFab>
        )}
      </Container>
    </DashboardLayout>
  );
}

export default Fahrzeuge;