import React, { useState } from 'react';
import {
  Box,
  Button,
  Chip,
  CircularProgress,
  FormControlLabel,
  IconButton,
  Paper,
  Switch,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  TextField,
  Typography,
} from '@mui/material';
import { Add, Delete as DeleteIcon, PlayArrow, Warning } from '@mui/icons-material';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { useNavigate } from 'react-router-dom';
import { usePermissionContext } from '../../contexts/PermissionContext';
import { useNotification } from '../../contexts/NotificationContext';
import { checklistenApi } from '../../services/checklisten';
import { CHECKLIST_STATUS_LABELS, CHECKLIST_STATUS_COLORS } from '../../types/checklist.types';
import type { CreateFahrzeugItemPayload } from '../../types/checklist.types';

// ── Helpers ──

const formatDate = (iso?: string) =>
  iso ? new Date(iso).toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit', year: 'numeric' }) : '–';

// ══════════════════════════════════════════════════════════════════════════════
// Component
// ══════════════════════════════════════════════════════════════════════════════

interface FahrzeugChecklistTabProps {
  fahrzeugId: string;
}

const FahrzeugChecklistTab: React.FC<FahrzeugChecklistTabProps> = ({ fahrzeugId }) => {
  const navigate = useNavigate();
  const queryClient = useQueryClient();
  const { hasPermission } = usePermissionContext();
  const { showSuccess, showError } = useNotification();
  const canManage = hasPermission('checklisten:manage_templates');
  const canExecute = hasPermission('checklisten:execute');

  // ── Queries ──
  const { data: vehicleItems = [], isLoading: itemsLoading } = useQuery({
    queryKey: ['checklisten-fahrzeug-items', fahrzeugId],
    queryFn: () => checklistenApi.getVehicleItems(fahrzeugId),
  });

  const { data: templates = [], isLoading: templatesLoading } = useQuery({
    queryKey: ['checklisten-fahrzeug-checklisten', fahrzeugId],
    queryFn: () => checklistenApi.getChecklistenForVehicle(fahrzeugId),
  });

  const { data: executions = [], isLoading: executionsLoading } = useQuery({
    queryKey: ['checklisten-ausfuehrungen', { fahrzeug_id: fahrzeugId }],
    queryFn: () => checklistenApi.getExecutions({ fahrzeug_id: fahrzeugId }),
  });

  const { data: overdue = [] } = useQuery({
    queryKey: ['checklisten-faellig'],
    queryFn: checklistenApi.getOverdue,
  });

  const vehicleOverdue = overdue.filter((f) => f.fahrzeug_id === fahrzeugId);

  // ── Vehicle items management ──
  const [newItem, setNewItem] = useState<CreateFahrzeugItemPayload>({ bezeichnung: '', pflicht: false, sort_order: 0 });

  const addItemMutation = useMutation({
    mutationFn: (data: CreateFahrzeugItemPayload) => checklistenApi.addVehicleItem(fahrzeugId, data),
    onSuccess: () => { queryClient.invalidateQueries({ queryKey: ['checklisten-fahrzeug-items', fahrzeugId] }); setNewItem({ bezeichnung: '', pflicht: false, sort_order: 0 }); showSuccess('Item hinzugefügt'); },
    onError: () => showError('Fehler beim Hinzufügen'),
  });

  const deleteItemMutation = useMutation({
    mutationFn: (id: number) => checklistenApi.deleteVehicleItem(id),
    onSuccess: () => { queryClient.invalidateQueries({ queryKey: ['checklisten-fahrzeug-items', fahrzeugId] }); showSuccess('Item entfernt'); },
    onError: () => showError('Fehler beim Entfernen'),
  });

  const toggleItemMutation = useMutation({
    mutationFn: ({ id, aktiv }: { id: number; aktiv: boolean }) => checklistenApi.updateVehicleItem(id, { aktiv }),
    onSuccess: () => queryClient.invalidateQueries({ queryKey: ['checklisten-fahrzeug-items', fahrzeugId] }),
    onError: () => showError('Fehler beim Aktualisieren'),
  });

  return (
    <Box>
      {/* Section 1: Vehicle-specific items */}
      {canManage && (
        <Box sx={{ mb: 4 }}>
          <Typography variant="h6" sx={{ mb: 1.5 }}>Fahrzeugspezifische Checklisten-Items</Typography>

          {itemsLoading ? (
            <CircularProgress size={24} />
          ) : (
            <>
              <TableContainer component={Paper} variant="outlined" sx={{ mb: 2 }}>
                <Table size="small">
                  <TableHead>
                    <TableRow>
                      <TableCell>Bezeichnung</TableCell>
                      <TableCell align="center">Pflicht</TableCell>
                      <TableCell align="center">Aktiv</TableCell>
                      <TableCell align="right">Aktionen</TableCell>
                    </TableRow>
                  </TableHead>
                  <TableBody>
                    {vehicleItems.length === 0 ? (
                      <TableRow><TableCell colSpan={4} align="center">Keine fahrzeugspezifischen Items</TableCell></TableRow>
                    ) : (
                      vehicleItems.map((item) => (
                        <TableRow key={item.id}>
                          <TableCell>{item.bezeichnung}</TableCell>
                          <TableCell align="center">{item.pflicht ? <Chip label="Pflicht" size="small" color="warning" /> : '–'}</TableCell>
                          <TableCell align="center">
                            <Switch
                              size="small"
                              checked={item.aktiv}
                              onChange={() => toggleItemMutation.mutate({ id: item.id, aktiv: !item.aktiv })}
                            />
                          </TableCell>
                          <TableCell align="right">
                            <IconButton size="small" color="error" onClick={() => deleteItemMutation.mutate(item.id)}>
                              <DeleteIcon fontSize="small" />
                            </IconButton>
                          </TableCell>
                        </TableRow>
                      ))
                    )}
                  </TableBody>
                </Table>
              </TableContainer>

              <Box sx={{ display: 'flex', gap: 1, alignItems: 'center' }}>
                <TextField size="small" placeholder="Neues Item..." value={newItem.bezeichnung} onChange={(e) => setNewItem((n) => ({ ...n, bezeichnung: e.target.value }))} sx={{ flexGrow: 1 }} />
                <FormControlLabel control={<Switch size="small" checked={newItem.pflicht} onChange={(e) => setNewItem((n) => ({ ...n, pflicht: e.target.checked }))} />} label="Pflicht" />
                <Button size="small" variant="outlined" startIcon={<Add />} disabled={!newItem.bezeichnung.trim() || addItemMutation.isPending} onClick={() => addItemMutation.mutate(newItem)}>
                  Hinzufügen
                </Button>
              </Box>
            </>
          )}
        </Box>
      )}

      {/* Section 2: Applicable templates */}
      <Box sx={{ mb: 4 }}>
        <Typography variant="h6" sx={{ mb: 1.5 }}>Anwendbare Vorlagen</Typography>

        {templatesLoading ? (
          <CircularProgress size={24} />
        ) : templates.length === 0 ? (
          <Typography color="text.secondary">Keine Vorlagen für dieses Fahrzeug.</Typography>
        ) : (
          <TableContainer component={Paper} variant="outlined">
            <Table size="small">
              <TableHead>
                <TableRow>
                  <TableCell>Vorlage</TableCell>
                  <TableCell>Intervall</TableCell>
                  <TableCell>Nächste Fälligkeit</TableCell>
                  <TableCell align="right">Aktion</TableCell>
                </TableRow>
              </TableHead>
              <TableBody>
                {templates.map((t) => {
                  const due = vehicleOverdue.find((f) => f.vorlage_id === t.id);
                  return (
                    <TableRow key={t.id}>
                      <TableCell>{t.name}</TableCell>
                      <TableCell>
                        {t.intervall === 'weekly' ? 'Wöchentlich' : t.intervall === 'monthly' ? 'Monatlich' : t.intervall === 'yearly' ? 'Jährlich' : t.intervall === 'custom' ? `${t.intervall_tage ?? '?'} Tage` : '–'}
                      </TableCell>
                      <TableCell>
                        {due ? (
                          <Chip icon={<Warning />} label={`Fällig: ${formatDate(due.naechste_faellig_am)}`} color="error" size="small" />
                        ) : (
                          <Typography variant="body2" color="text.secondary">Aktuell</Typography>
                        )}
                      </TableCell>
                      <TableCell align="right">
                        {canExecute && (
                          <Button
                            size="small"
                            variant="outlined"
                            startIcon={<PlayArrow />}
                            onClick={() => navigate(`/checklisten/ausfuehrung/new?fahrzeug=${fahrzeugId}&vorlage=${t.id}`)}
                          >
                            Ausführen
                          </Button>
                        )}
                      </TableCell>
                    </TableRow>
                  );
                })}
              </TableBody>
            </Table>
          </TableContainer>
        )}
      </Box>

      {/* Section 3: Recent executions */}
      <Box>
        <Typography variant="h6" sx={{ mb: 1.5 }}>Letzte Ausführungen</Typography>

        {executionsLoading ? (
          <CircularProgress size={24} />
        ) : executions.length === 0 ? (
          <Typography color="text.secondary">Noch keine Ausführungen für dieses Fahrzeug.</Typography>
        ) : (
          <TableContainer component={Paper} variant="outlined">
            <Table size="small">
              <TableHead>
                <TableRow>
                  <TableCell>Datum</TableCell>
                  <TableCell>Vorlage</TableCell>
                  <TableCell>Status</TableCell>
                  <TableCell>Ausgeführt von</TableCell>
                  <TableCell>Freigegeben von</TableCell>
                </TableRow>
              </TableHead>
              <TableBody>
                {executions.slice(0, 20).map((e) => (
                  <TableRow key={e.id} hover sx={{ cursor: 'pointer' }} onClick={() => navigate(`/checklisten/ausfuehrung/${e.id}`)}>
                    <TableCell>{formatDate(e.ausgefuehrt_am ?? e.created_at)}</TableCell>
                    <TableCell>{e.vorlage_name ?? '–'}</TableCell>
                    <TableCell>
                      <Chip label={CHECKLIST_STATUS_LABELS[e.status]} color={CHECKLIST_STATUS_COLORS[e.status]} size="small" />
                    </TableCell>
                    <TableCell>{e.ausgefuehrt_von_name ?? '–'}</TableCell>
                    <TableCell>{e.freigegeben_von_name ?? '–'}</TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </TableContainer>
        )}
      </Box>
    </Box>
  );
};

export default FahrzeugChecklistTab;
