import { useState, useMemo, useEffect, useCallback } from 'react';
import {
  Box, Tab, Tabs, Typography, Grid, Button, Chip,
  Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper,
  Dialog, DialogTitle, DialogContent, DialogActions, TextField, IconButton,
  MenuItem, Select, FormControl, InputLabel, Autocomplete,
  Divider, Checkbox, FormControlLabel, Tooltip,
} from '@mui/material';
import {
  Add as AddIcon, Delete as DeleteIcon, Edit as EditIcon,
  Check as CheckIcon, Close as CloseIcon, Link as LinkIcon, Settings as SettingsIcon,
} from '@mui/icons-material';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { useSearchParams } from 'react-router-dom';
import DashboardLayout from '../components/dashboard/DashboardLayout';
import ChatAwareFab from '../components/shared/ChatAwareFab';
import { useNotification } from '../contexts/NotificationContext';
import { usePermissionContext } from '../contexts/PermissionContext';
import { useAuth } from '../contexts/AuthContext';
import { ausruestungsanfrageApi } from '../services/ausruestungsanfrage';
import { bestellungApi } from '../services/bestellung';
import { AUSRUESTUNG_STATUS_LABELS, AUSRUESTUNG_STATUS_COLORS } from '../types/ausruestungsanfrage.types';
import type {
  AusruestungArtikel, AusruestungArtikelFormData, AusruestungAnfrageFormItem,
  AusruestungAnfrageDetailResponse, AusruestungAnfrageStatus, AusruestungAnfrage,
  AusruestungOverview, AusruestungEigenschaft,
} from '../types/ausruestungsanfrage.types';
import type { Bestellung } from '../types/bestellung.types';

// ─── Helpers ─────────────────────────────────────────────────────────────────

function formatOrderId(r: AusruestungAnfrage): string {
  if (r.bestell_jahr && r.bestell_nummer) {
    return `${r.bestell_jahr}/${String(r.bestell_nummer).padStart(3, '0')}`;
  }
  return `#${r.id}`;
}

const ACTIVE_STATUSES: AusruestungAnfrageStatus[] = ['offen', 'genehmigt', 'bestellt'];

// ─── Eigenschaft Fields Component ────────────────────────────────────────────

interface EigenschaftFieldsProps {
  eigenschaften: AusruestungEigenschaft[];
  values: Record<number, string>;
  onChange: (eigenschaftId: number, wert: string) => void;
}

function EigenschaftFields({ eigenschaften, values, onChange }: EigenschaftFieldsProps) {
  if (eigenschaften.length === 0) return null;
  return (
    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1, ml: 2, mt: 0.5 }}>
      {eigenschaften.map(e => (
        <Box key={e.id} sx={{ display: 'flex', gap: 1, alignItems: 'center' }}>
          {e.typ === 'options' && e.optionen && e.optionen.length > 0 ? (
            <FormControl size="small" sx={{ minWidth: 160 }} required={e.pflicht}>
              <InputLabel>{e.name}</InputLabel>
              <Select
                value={values[e.id] || ''}
                label={e.name}
                onChange={ev => onChange(e.id, ev.target.value)}
              >
                <MenuItem value="">—</MenuItem>
                {e.optionen.map(opt => (
                  <MenuItem key={opt} value={opt}>{opt}</MenuItem>
                ))}
              </Select>
            </FormControl>
          ) : (
            <TextField
              size="small"
              label={e.name}
              value={values[e.id] || ''}
              onChange={ev => onChange(e.id, ev.target.value)}
              required={e.pflicht}
              sx={{ minWidth: 160 }}
            />
          )}
        </Box>
      ))}
    </Box>
  );
}

// ─── Category Management Dialog ──────────────────────────────────────────────

interface KategorieDialogProps {
  open: boolean;
  onClose: () => void;
}

function KategorieDialog({ open, onClose }: KategorieDialogProps) {
  const { showSuccess, showError } = useNotification();
  const queryClient = useQueryClient();
  const [newName, setNewName] = useState('');
  const [editId, setEditId] = useState<number | null>(null);
  const [editName, setEditName] = useState('');

  const { data: kategorien = [] } = useQuery({
    queryKey: ['ausruestungsanfrage', 'kategorien'],
    queryFn: () => ausruestungsanfrageApi.getKategorien(),
    enabled: open,
  });

  const createMut = useMutation({
    mutationFn: (name: string) => ausruestungsanfrageApi.createKategorie(name),
    onSuccess: () => { queryClient.invalidateQueries({ queryKey: ['ausruestungsanfrage'] }); showSuccess('Kategorie erstellt'); setNewName(''); },
    onError: () => showError('Fehler beim Erstellen'),
  });

  const updateMut = useMutation({
    mutationFn: ({ id, name }: { id: number; name: string }) => ausruestungsanfrageApi.updateKategorie(id, name),
    onSuccess: () => { queryClient.invalidateQueries({ queryKey: ['ausruestungsanfrage'] }); showSuccess('Kategorie aktualisiert'); setEditId(null); },
    onError: () => showError('Fehler beim Aktualisieren'),
  });

  const deleteMut = useMutation({
    mutationFn: (id: number) => ausruestungsanfrageApi.deleteKategorie(id),
    onSuccess: () => { queryClient.invalidateQueries({ queryKey: ['ausruestungsanfrage'] }); showSuccess('Kategorie gelöscht'); },
    onError: () => showError('Fehler beim Löschen'),
  });

  return (
    <Dialog open={open} onClose={onClose} maxWidth="sm" fullWidth>
      <DialogTitle>Kategorien verwalten</DialogTitle>
      <DialogContent sx={{ display: 'flex', flexDirection: 'column', gap: 2, pt: '16px !important' }}>
        <Box sx={{ display: 'flex', gap: 1 }}>
          <TextField
            size="small"
            label="Neue Kategorie"
            value={newName}
            onChange={e => setNewName(e.target.value)}
            sx={{ flexGrow: 1 }}
            onKeyDown={e => { if (e.key === 'Enter' && newName.trim()) createMut.mutate(newName.trim()); }}
          />
          <Button
            variant="contained"
            size="small"
            onClick={() => { if (newName.trim()) createMut.mutate(newName.trim()); }}
            disabled={!newName.trim() || createMut.isPending}
          >
            Erstellen
          </Button>
        </Box>
        <Divider />
        {kategorien.length === 0 ? (
          <Typography color="text.secondary">Keine Kategorien vorhanden.</Typography>
        ) : (
          kategorien.map(k => (
            <Box key={k.id} sx={{ display: 'flex', gap: 1, alignItems: 'center' }}>
              {editId === k.id ? (
                <>
                  <TextField
                    size="small"
                    value={editName}
                    onChange={e => setEditName(e.target.value)}
                    sx={{ flexGrow: 1 }}
                    onKeyDown={e => { if (e.key === 'Enter' && editName.trim()) updateMut.mutate({ id: k.id, name: editName.trim() }); }}
                  />
                  <IconButton size="small" onClick={() => { if (editName.trim()) updateMut.mutate({ id: k.id, name: editName.trim() }); }}><CheckIcon fontSize="small" /></IconButton>
                  <IconButton size="small" onClick={() => setEditId(null)}><CloseIcon fontSize="small" /></IconButton>
                </>
              ) : (
                <>
                  <Typography sx={{ flexGrow: 1 }}>{k.name}</Typography>
                  <IconButton size="small" onClick={() => { setEditId(k.id); setEditName(k.name); }}><EditIcon fontSize="small" /></IconButton>
                  <IconButton size="small" color="error" onClick={() => deleteMut.mutate(k.id)}><DeleteIcon fontSize="small" /></IconButton>
                </>
              )}
            </Box>
          ))
        )}
      </DialogContent>
      <DialogActions>
        <Button onClick={onClose}>Schließen</Button>
      </DialogActions>
    </Dialog>
  );
}

// ─── Eigenschaften Editor (in Artikel dialog) ────────────────────────────────

interface EigenschaftenEditorProps {
  artikelId: number | null;
}

function EigenschaftenEditor({ artikelId }: EigenschaftenEditorProps) {
  const { showSuccess, showError } = useNotification();
  const queryClient = useQueryClient();

  const [newName, setNewName] = useState('');
  const [newTyp, setNewTyp] = useState<'options' | 'freitext'>('options');
  const [newOptionen, setNewOptionen] = useState('');
  const [newPflicht, setNewPflicht] = useState(false);

  const { data: eigenschaften = [] } = useQuery({
    queryKey: ['ausruestungsanfrage', 'eigenschaften', artikelId],
    queryFn: () => ausruestungsanfrageApi.getArtikelEigenschaften(artikelId!),
    enabled: artikelId != null,
  });

  const upsertMut = useMutation({
    mutationFn: (data: { eigenschaft_id?: number; name: string; typ: string; optionen?: string[]; pflicht?: boolean; sort_order?: number }) =>
      ausruestungsanfrageApi.upsertArtikelEigenschaft(artikelId!, data),
    onSuccess: () => { queryClient.invalidateQueries({ queryKey: ['ausruestungsanfrage', 'eigenschaften', artikelId] }); showSuccess('Eigenschaft gespeichert'); },
    onError: () => showError('Fehler beim Speichern'),
  });

  const deleteMut = useMutation({
    mutationFn: (id: number) => ausruestungsanfrageApi.deleteArtikelEigenschaft(id),
    onSuccess: () => { queryClient.invalidateQueries({ queryKey: ['ausruestungsanfrage', 'eigenschaften', artikelId] }); showSuccess('Eigenschaft gelöscht'); },
    onError: () => showError('Fehler beim Löschen'),
  });

  const handleAdd = () => {
    if (!newName.trim()) return;
    const optionen = newTyp === 'options' ? newOptionen.split(',').map(s => s.trim()).filter(Boolean) : undefined;
    upsertMut.mutate({
      name: newName.trim(),
      typ: newTyp,
      optionen,
      pflicht: newPflicht,
      sort_order: eigenschaften.length,
    });
    setNewName('');
    setNewOptionen('');
    setNewPflicht(false);
  };

  if (artikelId == null) return <Typography variant="body2" color="text.secondary" sx={{ mt: 1 }}>Bitte speichern Sie den Artikel zuerst, bevor Sie Eigenschaften hinzufügen.</Typography>;

  return (
    <Box sx={{ mt: 1 }}>
      <Typography variant="subtitle2" sx={{ mb: 1 }}>Eigenschaften</Typography>
      {eigenschaften.map(e => (
        <Box key={e.id} sx={{ display: 'flex', gap: 1, alignItems: 'center', mb: 0.5, pl: 1, borderLeft: '2px solid', borderColor: 'divider' }}>
          <Typography variant="body2" sx={{ flexGrow: 1 }}>
            {e.name} ({e.typ === 'options' ? `Auswahl: ${e.optionen?.join(', ')}` : 'Freitext'})
            {e.pflicht && <Chip label="Pflicht" size="small" sx={{ ml: 0.5 }} />}
          </Typography>
          <IconButton size="small" color="error" onClick={() => deleteMut.mutate(e.id)}><DeleteIcon fontSize="small" /></IconButton>
        </Box>
      ))}
      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1, mt: 1, p: 1, border: '1px dashed', borderColor: 'divider', borderRadius: 1 }}>
        <Box sx={{ display: 'flex', gap: 1, alignItems: 'center' }}>
          <TextField size="small" label="Name" value={newName} onChange={e => setNewName(e.target.value)} sx={{ flexGrow: 1 }} />
          <FormControl size="small" sx={{ minWidth: 120 }}>
            <InputLabel>Typ</InputLabel>
            <Select value={newTyp} label="Typ" onChange={e => setNewTyp(e.target.value as 'options' | 'freitext')}>
              <MenuItem value="options">Auswahl</MenuItem>
              <MenuItem value="freitext">Freitext</MenuItem>
            </Select>
          </FormControl>
          <FormControlLabel
            control={<Checkbox size="small" checked={newPflicht} onChange={e => setNewPflicht(e.target.checked)} />}
            label="Pflicht"
          />
        </Box>
        {newTyp === 'options' && (
          <TextField
            size="small"
            label="Optionen (kommagetrennt)"
            value={newOptionen}
            onChange={e => setNewOptionen(e.target.value)}
            placeholder="S, M, L, XL"
            fullWidth
          />
        )}
        <Button
          size="small"
          startIcon={<AddIcon />}
          onClick={handleAdd}
          disabled={!newName.trim() || upsertMut.isPending}
        >
          Eigenschaft hinzufügen
        </Button>
      </Box>
    </Box>
  );
}

// ─── Detail Modal ─────────────────────────────────────────────────────────────

interface DetailModalProps {
  requestId: number | null;
  onClose: () => void;
  showAdminActions?: boolean;
  showEditButton?: boolean;
  canEditAny?: boolean;
  currentUserId?: string;
}

function DetailModal({ requestId, onClose, showAdminActions, showEditButton, canEditAny, currentUserId }: DetailModalProps) {
  const { showSuccess, showError } = useNotification();
  const queryClient = useQueryClient();
  const { hasPermission } = usePermissionContext();

  const [editing, setEditing] = useState(false);
  const [editBezeichnung, setEditBezeichnung] = useState('');
  const [editNotizen, setEditNotizen] = useState('');
  const [editItems, setEditItems] = useState<AusruestungAnfrageFormItem[]>([]);

  // Admin action state
  const [actionDialog, setActionDialog] = useState<{ action: 'genehmigt' | 'abgelehnt' } | null>(null);
  const [adminNotizen, setAdminNotizen] = useState('');
  const [statusChangeValue, setStatusChangeValue] = useState('');
  const [linkDialog, setLinkDialog] = useState(false);
  const [selectedBestellung, setSelectedBestellung] = useState<Bestellung | null>(null);

  const { data: detail, isLoading } = useQuery<AusruestungAnfrageDetailResponse>({
    queryKey: ['ausruestungsanfrage', 'request', requestId],
    queryFn: () => ausruestungsanfrageApi.getRequest(requestId!),
    enabled: requestId != null,
  });

  const { data: catalogItems = [] } = useQuery({
    queryKey: ['ausruestungsanfrage', 'items-for-edit'],
    queryFn: () => ausruestungsanfrageApi.getItems({ aktiv: true }),
    enabled: editing,
  });

  const { data: bestellungen = [] } = useQuery({
    queryKey: ['bestellungen'],
    queryFn: () => bestellungApi.getOrders(),
    enabled: linkDialog,
  });

  const updateMut = useMutation({
    mutationFn: (data: { bezeichnung?: string; notizen?: string; items?: AusruestungAnfrageFormItem[] }) =>
      ausruestungsanfrageApi.updateRequest(requestId!, data),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['ausruestungsanfrage'] });
      showSuccess('Anfrage aktualisiert');
      setEditing(false);
    },
    onError: () => showError('Fehler beim Aktualisieren'),
  });

  const statusMut = useMutation({
    mutationFn: ({ status, notes }: { status: string; notes?: string }) =>
      ausruestungsanfrageApi.updateRequestStatus(requestId!, status, notes),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['ausruestungsanfrage'] });
      showSuccess('Status aktualisiert');
      setActionDialog(null);
      setAdminNotizen('');
      setStatusChangeValue('');
    },
    onError: () => showError('Fehler beim Aktualisieren'),
  });

  const linkMut = useMutation({
    mutationFn: (bestellungId: number) => ausruestungsanfrageApi.linkToOrder(requestId!, bestellungId),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['ausruestungsanfrage'] });
      showSuccess('Verknüpfung erstellt');
      setLinkDialog(false);
      setSelectedBestellung(null);
    },
    onError: () => showError('Fehler beim Verknüpfen'),
  });

  const startEditing = () => {
    if (!detail) return;
    setEditBezeichnung(detail.anfrage.bezeichnung || '');
    setEditNotizen(detail.anfrage.notizen || '');
    setEditItems(detail.positionen.map(p => ({
      artikel_id: p.artikel_id,
      bezeichnung: p.bezeichnung,
      menge: p.menge,
      notizen: p.notizen,
      eigenschaften: p.eigenschaften?.map(e => ({ eigenschaft_id: e.eigenschaft_id, wert: e.wert })),
    })));
    setEditing(true);
  };

  const handleSaveEdit = () => {
    if (editItems.length === 0) return;
    updateMut.mutate({
      bezeichnung: editBezeichnung || undefined,
      notizen: editNotizen || undefined,
      items: editItems,
    });
  };

  const addEditItem = () => {
    setEditItems(prev => [...prev, { bezeichnung: '', menge: 1 }]);
  };

  const removeEditItem = (idx: number) => {
    setEditItems(prev => prev.filter((_, i) => i !== idx));
  };

  const updateEditItem = (idx: number, field: string, value: unknown) => {
    setEditItems(prev => prev.map((item, i) => i === idx ? { ...item, [field]: value } : item));
  };

  if (!requestId) return null;

  const anfrage = detail?.anfrage;
  const canEdit = anfrage && (
    canEditAny ||
    (anfrage.anfrager_id === currentUserId && anfrage.status === 'offen')
  );

  return (
    <>
      <Dialog open={requestId != null} onClose={onClose} maxWidth="md" fullWidth>
        <DialogTitle sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <span>
            Anfrage {anfrage ? formatOrderId(anfrage) : '...'}
            {anfrage?.bezeichnung && ` — ${anfrage.bezeichnung}`}
          </span>
          {anfrage && (
            <Chip
              label={AUSRUESTUNG_STATUS_LABELS[anfrage.status]}
              color={AUSRUESTUNG_STATUS_COLORS[anfrage.status]}
              size="small"
            />
          )}
        </DialogTitle>
        <DialogContent sx={{ display: 'flex', flexDirection: 'column', gap: 2, pt: '16px !important' }}>
          {isLoading ? (
            <Typography color="text.secondary">Lade Details...</Typography>
          ) : !detail ? (
            <Typography color="text.secondary">Anfrage nicht gefunden.</Typography>
          ) : editing ? (
            /* ── Edit Mode ── */
            <>
              <TextField
                label="Bezeichnung (optional)"
                value={editBezeichnung}
                onChange={e => setEditBezeichnung(e.target.value)}
                fullWidth
              />
              <TextField
                label="Notizen (optional)"
                value={editNotizen}
                onChange={e => setEditNotizen(e.target.value)}
                multiline
                rows={2}
                fullWidth
              />
              <Typography variant="subtitle2" sx={{ mt: 1 }}>Positionen</Typography>
              {editItems.map((item, idx) => (
                <Box key={idx} sx={{ display: 'flex', gap: 1, alignItems: 'center' }}>
                  <Autocomplete
                    freeSolo
                    options={catalogItems}
                    getOptionLabel={o => typeof o === 'string' ? o : o.bezeichnung}
                    value={item.artikel_id ? catalogItems.find(c => c.id === item.artikel_id) || item.bezeichnung : item.bezeichnung}
                    onChange={(_, v) => {
                      if (typeof v === 'string') {
                        updateEditItem(idx, 'bezeichnung', v);
                        updateEditItem(idx, 'artikel_id', undefined);
                      } else if (v) {
                        setEditItems(prev => prev.map((it, i) => i === idx ? { ...it, artikel_id: v.id, bezeichnung: v.bezeichnung } : it));
                      }
                    }}
                    onInputChange={(_, val, reason) => {
                      if (reason === 'input') {
                        setEditItems(prev => prev.map((it, i) => i === idx ? { ...it, bezeichnung: val, artikel_id: undefined } : it));
                      }
                    }}
                    renderInput={params => <TextField {...params} label="Artikel" size="small" />}
                    sx={{ flexGrow: 1 }}
                  />
                  <TextField
                    size="small"
                    type="number"
                    label="Menge"
                    value={item.menge}
                    onChange={e => updateEditItem(idx, 'menge', Math.max(1, Number(e.target.value)))}
                    sx={{ width: 90 }}
                    inputProps={{ min: 1 }}
                  />
                  <IconButton size="small" onClick={() => removeEditItem(idx)}>
                    <DeleteIcon fontSize="small" />
                  </IconButton>
                </Box>
              ))}
              <Button size="small" startIcon={<AddIcon />} onClick={addEditItem}>
                Position hinzufügen
              </Button>
            </>
          ) : (
            /* ── View Mode ── */
            <>
              {anfrage!.anfrager_name && (
                <Typography variant="body2" color="text.secondary">
                  Anfrager: {anfrage!.anfrager_name}
                </Typography>
              )}
              {anfrage!.notizen && (
                <Typography variant="body2">Notizen: {anfrage!.notizen}</Typography>
              )}
              {anfrage!.admin_notizen && (
                <Typography variant="body2">Admin Notizen: {anfrage!.admin_notizen}</Typography>
              )}
              <Typography variant="body2" color="text.secondary">
                Erstellt am: {new Date(anfrage!.erstellt_am).toLocaleDateString('de-AT')}
              </Typography>

              <Divider />
              <Typography variant="subtitle2">Positionen</Typography>
              {detail.positionen.map(p => (
                <Box key={p.id}>
                  <Typography variant="body2">
                    - {p.menge}x {p.bezeichnung}{p.notizen ? ` (${p.notizen})` : ''}
                  </Typography>
                  {p.eigenschaften && p.eigenschaften.length > 0 && (
                    <Box sx={{ ml: 2, mt: 0.25 }}>
                      {p.eigenschaften.map(e => (
                        <Typography key={e.eigenschaft_id} variant="caption" color="text.secondary" display="block">
                          {e.eigenschaft_name}: {e.wert}
                        </Typography>
                      ))}
                    </Box>
                  )}
                </Box>
              ))}

              {detail.linked_bestellungen && detail.linked_bestellungen.length > 0 && (
                <>
                  <Divider />
                  <Typography variant="subtitle2">Verknüpfte Bestellungen</Typography>
                  <Box sx={{ display: 'flex', gap: 0.5, flexWrap: 'wrap' }}>
                    {detail.linked_bestellungen.map(b => (
                      <Chip key={b.id} label={`#${b.id} ${b.bezeichnung}`} size="small" />
                    ))}
                  </Box>
                </>
              )}
            </>
          )}
        </DialogContent>
        <DialogActions>
          {editing ? (
            <>
              <Button onClick={() => setEditing(false)}>Abbrechen</Button>
              <Button
                variant="contained"
                onClick={handleSaveEdit}
                disabled={updateMut.isPending || editItems.length === 0 || editItems.some(i => !i.bezeichnung.trim())}
              >
                Speichern
              </Button>
            </>
          ) : (
            <>
              {/* Admin actions */}
              {showAdminActions && anfrage && anfrage.status === 'offen' && (
                <>
                  <Button
                    color="success"
                    variant="outlined"
                    startIcon={<CheckIcon />}
                    onClick={() => { setActionDialog({ action: 'genehmigt' }); setAdminNotizen(''); }}
                  >
                    Genehmigen
                  </Button>
                  <Button
                    color="error"
                    variant="outlined"
                    startIcon={<CloseIcon />}
                    onClick={() => { setActionDialog({ action: 'abgelehnt' }); setAdminNotizen(''); }}
                  >
                    Ablehnen
                  </Button>
                </>
              )}
              {showAdminActions && anfrage && hasPermission('ausruestungsanfrage:approve') && (
                <Box sx={{ display: 'flex', gap: 1, alignItems: 'center' }}>
                  <FormControl size="small" sx={{ minWidth: 140 }}>
                    <InputLabel>Status ändern</InputLabel>
                    <Select
                      value={statusChangeValue}
                      label="Status ändern"
                      onChange={e => {
                        const val = e.target.value;
                        setStatusChangeValue(val);
                        if (val) statusMut.mutate({ status: val });
                      }}
                    >
                      {(Object.keys(AUSRUESTUNG_STATUS_LABELS) as AusruestungAnfrageStatus[])
                        .filter(s => s !== anfrage.status)
                        .map(s => (
                          <MenuItem key={s} value={s}>{AUSRUESTUNG_STATUS_LABELS[s]}</MenuItem>
                        ))}
                    </Select>
                  </FormControl>
                </Box>
              )}
              {showAdminActions && anfrage && anfrage.status === 'genehmigt' && hasPermission('ausruestungsanfrage:link_orders') && (
                <Button
                  variant="outlined"
                  startIcon={<LinkIcon />}
                  onClick={() => setLinkDialog(true)}
                >
                  Verknüpfen
                </Button>
              )}
              {(showEditButton || canEditAny) && canEdit && !editing && (
                <Button startIcon={<EditIcon />} onClick={startEditing}>
                  Bearbeiten
                </Button>
              )}
              <Button onClick={onClose}>Schließen</Button>
            </>
          )}
        </DialogActions>
      </Dialog>

      {/* Approve/Reject sub-dialog */}
      <Dialog open={actionDialog != null} onClose={() => setActionDialog(null)} maxWidth="sm" fullWidth>
        <DialogTitle>{actionDialog?.action === 'genehmigt' ? 'Anfrage genehmigen' : 'Anfrage ablehnen'}</DialogTitle>
        <DialogContent sx={{ display: 'flex', flexDirection: 'column', gap: 2, pt: '16px !important' }}>
          <TextField
            fullWidth
            label="Admin Notizen (optional)"
            value={adminNotizen}
            onChange={e => setAdminNotizen(e.target.value)}
            multiline
            rows={2}
          />
        </DialogContent>
        <DialogActions>
          <Button onClick={() => setActionDialog(null)}>Abbrechen</Button>
          <Button
            variant="contained"
            color={actionDialog?.action === 'genehmigt' ? 'success' : 'error'}
            onClick={() => {
              if (!actionDialog) return;
              statusMut.mutate({ status: actionDialog.action, notes: adminNotizen || undefined });
            }}
            disabled={statusMut.isPending}
          >
            {actionDialog?.action === 'genehmigt' ? 'Genehmigen' : 'Ablehnen'}
          </Button>
        </DialogActions>
      </Dialog>

      {/* Link to order sub-dialog */}
      <Dialog open={linkDialog} onClose={() => { setLinkDialog(false); setSelectedBestellung(null); }} maxWidth="sm" fullWidth>
        <DialogTitle>Mit Bestellung verknüpfen</DialogTitle>
        <DialogContent sx={{ display: 'flex', flexDirection: 'column', gap: 2, pt: '16px !important' }}>
          <Autocomplete
            options={bestellungen}
            getOptionLabel={(o) => `#${o.id} – ${o.bezeichnung}`}
            value={selectedBestellung}
            onChange={(_, v) => setSelectedBestellung(v)}
            renderInput={params => <TextField {...params} label="Bestellung auswählen" />}
          />
        </DialogContent>
        <DialogActions>
          <Button onClick={() => { setLinkDialog(false); setSelectedBestellung(null); }}>Abbrechen</Button>
          <Button
            variant="contained"
            disabled={!selectedBestellung || linkMut.isPending}
            onClick={() => { if (selectedBestellung) linkMut.mutate(selectedBestellung.id); }}
          >
            Verknüpfen
          </Button>
        </DialogActions>
      </Dialog>
    </>
  );
}

// ─── Catalog Tab ────────────────────────────────────────────────────────────

function KatalogTab() {
  const { showSuccess, showError } = useNotification();
  const { hasPermission } = usePermissionContext();
  const queryClient = useQueryClient();

  const canManage = hasPermission('ausruestungsanfrage:manage_catalog');
  const canManageCategories = hasPermission('ausruestungsanfrage:manage_categories');

  const [filterKategorie, setFilterKategorie] = useState<number | ''>('');
  const [artikelDialogOpen, setArtikelDialogOpen] = useState(false);
  const [editArtikel, setEditArtikel] = useState<AusruestungArtikel | null>(null);
  const [artikelForm, setArtikelForm] = useState<AusruestungArtikelFormData>({ bezeichnung: '' });
  const [kategorieDialogOpen, setKategorieDialogOpen] = useState(false);

  const { data: items = [], isLoading } = useQuery({
    queryKey: ['ausruestungsanfrage', 'items', filterKategorie],
    queryFn: () => ausruestungsanfrageApi.getItems(filterKategorie ? { kategorie_id: filterKategorie as number } : undefined),
  });

  const { data: kategorien = [] } = useQuery({
    queryKey: ['ausruestungsanfrage', 'kategorien'],
    queryFn: () => ausruestungsanfrageApi.getKategorien(),
  });

  const createItemMut = useMutation({
    mutationFn: (data: AusruestungArtikelFormData) => ausruestungsanfrageApi.createItem(data),
    onSuccess: () => { queryClient.invalidateQueries({ queryKey: ['ausruestungsanfrage'] }); showSuccess('Artikel erstellt'); setArtikelDialogOpen(false); },
    onError: () => showError('Fehler beim Erstellen'),
  });
  const updateItemMut = useMutation({
    mutationFn: ({ id, data }: { id: number; data: Partial<AusruestungArtikelFormData> }) => ausruestungsanfrageApi.updateItem(id, data),
    onSuccess: () => { queryClient.invalidateQueries({ queryKey: ['ausruestungsanfrage'] }); showSuccess('Artikel aktualisiert'); setArtikelDialogOpen(false); },
    onError: () => showError('Fehler beim Aktualisieren'),
  });
  const deleteItemMut = useMutation({
    mutationFn: (id: number) => ausruestungsanfrageApi.deleteItem(id),
    onSuccess: () => { queryClient.invalidateQueries({ queryKey: ['ausruestungsanfrage'] }); showSuccess('Artikel gelöscht'); },
    onError: () => showError('Fehler beim Löschen'),
  });

  const openNewArtikel = () => {
    setEditArtikel(null);
    setArtikelForm({ bezeichnung: '' });
    setArtikelDialogOpen(true);
  };
  const openEditArtikel = (a: AusruestungArtikel) => {
    setEditArtikel(a);
    setArtikelForm({ bezeichnung: a.bezeichnung, beschreibung: a.beschreibung, kategorie_id: a.kategorie_id ?? null });
    setArtikelDialogOpen(true);
  };
  const saveArtikel = () => {
    if (!artikelForm.bezeichnung.trim()) return;
    if (editArtikel) updateItemMut.mutate({ id: editArtikel.id, data: artikelForm });
    else createItemMut.mutate(artikelForm);
  };

  return (
    <Box>
      {/* Filter */}
      <Box sx={{ display: 'flex', gap: 2, mb: 3, alignItems: 'center', flexWrap: 'wrap' }}>
        <FormControl size="small" sx={{ minWidth: 200 }}>
          <InputLabel>Kategorie</InputLabel>
          <Select value={filterKategorie} label="Kategorie" onChange={e => setFilterKategorie(e.target.value as number | '')}>
            <MenuItem value="">Alle</MenuItem>
            {kategorien.map(k => <MenuItem key={k.id} value={k.id}>{k.name}</MenuItem>)}
          </Select>
        </FormControl>
        {canManageCategories && (
          <Tooltip title="Kategorien verwalten">
            <IconButton size="small" onClick={() => setKategorieDialogOpen(true)}>
              <SettingsIcon fontSize="small" />
            </IconButton>
          </Tooltip>
        )}
      </Box>

      {/* Catalog table */}
      {isLoading ? (
        <Typography color="text.secondary">Lade Katalog...</Typography>
      ) : items.length === 0 ? (
        <Typography color="text.secondary">Keine Artikel vorhanden.</Typography>
      ) : (
        <TableContainer component={Paper} variant="outlined">
          <Table size="small">
            <TableHead>
              <TableRow>
                <TableCell>Bezeichnung</TableCell>
                <TableCell>Kategorie</TableCell>
                <TableCell>Beschreibung</TableCell>
                {canManage && <TableCell align="right">Aktionen</TableCell>}
              </TableRow>
            </TableHead>
            <TableBody>
              {items.map(item => (
                <TableRow key={item.id} hover>
                  <TableCell>
                    <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
                      {item.bezeichnung}
                      {(item.eigenschaften_count ?? 0) > 0 && (
                        <Chip label={`${item.eigenschaften_count} Eig.`} size="small" variant="outlined" />
                      )}
                    </Box>
                  </TableCell>
                  <TableCell>{item.kategorie_name || item.kategorie || '-'}</TableCell>
                  <TableCell sx={{ maxWidth: 300, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                    {item.beschreibung || '-'}
                  </TableCell>
                  {canManage && (
                    <TableCell align="right">
                      <IconButton size="small" onClick={() => openEditArtikel(item)}><EditIcon fontSize="small" /></IconButton>
                      <IconButton size="small" color="error" onClick={() => deleteItemMut.mutate(item.id)}><DeleteIcon fontSize="small" /></IconButton>
                    </TableCell>
                  )}
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </TableContainer>
      )}

      {/* Artikel create/edit dialog */}
      <Dialog open={artikelDialogOpen} onClose={() => setArtikelDialogOpen(false)} maxWidth="sm" fullWidth>
        <DialogTitle>{editArtikel ? 'Artikel bearbeiten' : 'Neuer Artikel'}</DialogTitle>
        <DialogContent sx={{ display: 'flex', flexDirection: 'column', gap: 2, pt: '16px !important' }}>
          <TextField label="Bezeichnung" required value={artikelForm.bezeichnung} onChange={e => setArtikelForm(f => ({ ...f, bezeichnung: e.target.value }))} fullWidth />
          <TextField label="Beschreibung" multiline rows={2} value={artikelForm.beschreibung ?? ''} onChange={e => setArtikelForm(f => ({ ...f, beschreibung: e.target.value }))} />
          <FormControl fullWidth>
            <InputLabel>Kategorie</InputLabel>
            <Select
              value={artikelForm.kategorie_id ?? ''}
              label="Kategorie"
              onChange={e => setArtikelForm(f => ({ ...f, kategorie_id: e.target.value ? Number(e.target.value) : null }))}
            >
              <MenuItem value="">Keine</MenuItem>
              {kategorien.map(k => <MenuItem key={k.id} value={k.id}>{k.name}</MenuItem>)}
            </Select>
          </FormControl>
          {canManage && <EigenschaftenEditor artikelId={editArtikel?.id ?? null} />}
        </DialogContent>
        <DialogActions>
          <Button onClick={() => setArtikelDialogOpen(false)}>Abbrechen</Button>
          <Button variant="contained" onClick={saveArtikel} disabled={!artikelForm.bezeichnung.trim() || createItemMut.isPending || updateItemMut.isPending}>
            Speichern
          </Button>
        </DialogActions>
      </Dialog>

      {/* Kategorie management dialog */}
      <KategorieDialog open={kategorieDialogOpen} onClose={() => setKategorieDialogOpen(false)} />

      {/* FAB for new catalog item */}
      {canManage && (
        <ChatAwareFab onClick={openNewArtikel} aria-label="Artikel hinzufügen">
          <AddIcon />
        </ChatAwareFab>
      )}
    </Box>
  );
}

// ─── My Requests Tab ────────────────────────────────────────────────────────

function MeineAnfragenTab() {
  const { hasPermission } = usePermissionContext();
  const { user } = useAuth();
  const queryClient = useQueryClient();
  const { showSuccess, showError } = useNotification();

  const canCreate = hasPermission('ausruestungsanfrage:create_request');
  const canOrderForUser = hasPermission('ausruestungsanfrage:order_for_user');
  const canEditAny = hasPermission('ausruestungsanfrage:edit');

  const [detailId, setDetailId] = useState<number | null>(null);
  const [statusFilter, setStatusFilter] = useState<AusruestungAnfrageStatus[]>(ACTIVE_STATUSES);
  const [createDialogOpen, setCreateDialogOpen] = useState(false);
  const [newBezeichnung, setNewBezeichnung] = useState('');
  const [newNotizen, setNewNotizen] = useState('');
  const [newFuerBenutzer, setNewFuerBenutzer] = useState<{ id: string; name: string } | null>(null);
  const [newItems, setNewItems] = useState<AusruestungAnfrageFormItem[]>([{ bezeichnung: '', menge: 1 }]);
  // Track loaded eigenschaften per item row (by artikel_id)
  const [itemEigenschaften, setItemEigenschaften] = useState<Record<number, AusruestungEigenschaft[]>>({});
  // Track eigenschaft values per item row index
  const [itemEigenschaftValues, setItemEigenschaftValues] = useState<Record<number, Record<number, string>>>({});

  const { data: requests = [], isLoading } = useQuery({
    queryKey: ['ausruestungsanfrage', 'myRequests'],
    queryFn: () => ausruestungsanfrageApi.getMyRequests(),
  });

  const { data: catalogItems = [] } = useQuery({
    queryKey: ['ausruestungsanfrage', 'items-for-create'],
    queryFn: () => ausruestungsanfrageApi.getItems({ aktiv: true }),
    enabled: createDialogOpen,
  });

  const { data: orderUsers = [] } = useQuery({
    queryKey: ['ausruestungsanfrage', 'orderUsers'],
    queryFn: () => ausruestungsanfrageApi.getOrderUsers(),
    enabled: createDialogOpen && canOrderForUser,
  });

  const createMut = useMutation({
    mutationFn: (args: { items: AusruestungAnfrageFormItem[]; notizen?: string; bezeichnung?: string; fuer_benutzer_id?: string }) =>
      ausruestungsanfrageApi.createRequest(args.items, args.notizen, args.bezeichnung, args.fuer_benutzer_id),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['ausruestungsanfrage'] });
      showSuccess('Anfrage erstellt');
      setCreateDialogOpen(false);
      resetCreateForm();
    },
    onError: () => showError('Fehler beim Erstellen der Anfrage'),
  });

  const resetCreateForm = () => {
    setNewBezeichnung('');
    setNewNotizen('');
    setNewFuerBenutzer(null);
    setNewItems([{ bezeichnung: '', menge: 1 }]);
    setItemEigenschaften({});
    setItemEigenschaftValues({});
  };

  const loadEigenschaften = useCallback(async (artikelId: number) => {
    if (itemEigenschaften[artikelId]) return;
    try {
      const eigs = await ausruestungsanfrageApi.getArtikelEigenschaften(artikelId);
      setItemEigenschaften(prev => ({ ...prev, [artikelId]: eigs }));
    } catch { /* ignore */ }
  }, [itemEigenschaften]);

  const handleCreateSubmit = () => {
    const validItems = newItems.filter(i => i.bezeichnung.trim()).map((item, idx) => {
      const vals = itemEigenschaftValues[idx] || {};
      const eigenschaften = Object.entries(vals)
        .filter(([, wert]) => wert.trim())
        .map(([eid, wert]) => ({ eigenschaft_id: Number(eid), wert }));
      return { ...item, eigenschaften: eigenschaften.length > 0 ? eigenschaften : undefined };
    });
    if (validItems.length === 0) return;

    // Check required eigenschaften
    for (let idx = 0; idx < newItems.length; idx++) {
      const item = newItems[idx];
      if (!item.bezeichnung.trim()) continue;
      if (item.artikel_id && itemEigenschaften[item.artikel_id]) {
        for (const e of itemEigenschaften[item.artikel_id]) {
          if (e.pflicht && !(itemEigenschaftValues[idx]?.[e.id]?.trim())) {
            showError(`Pflichtfeld "${e.name}" für "${item.bezeichnung}" fehlt`);
            return;
          }
        }
      }
    }

    createMut.mutate({
      items: validItems,
      notizen: newNotizen || undefined,
      bezeichnung: newBezeichnung || undefined,
      fuer_benutzer_id: newFuerBenutzer?.id,
    });
  };

  const filteredRequests = useMemo(() => {
    if (statusFilter.length === 0) return requests;
    return requests.filter(r => statusFilter.includes(r.status));
  }, [requests, statusFilter]);

  const handleStatusFilterChange = (value: string) => {
    if (value === 'all') {
      setStatusFilter([]);
    } else if (value === 'active') {
      setStatusFilter(ACTIVE_STATUSES);
    } else {
      setStatusFilter([value as AusruestungAnfrageStatus]);
    }
  };

  const currentFilterValue = useMemo(() => {
    if (statusFilter.length === 0) return 'all';
    if (statusFilter.length === ACTIVE_STATUSES.length && ACTIVE_STATUSES.every(s => statusFilter.includes(s))) return 'active';
    return statusFilter[0] || 'all';
  }, [statusFilter]);

  if (isLoading) return <Typography color="text.secondary">Lade Anfragen...</Typography>;

  return (
    <Box>
      <Box sx={{ display: 'flex', gap: 2, mb: 2, alignItems: 'center' }}>
        <FormControl size="small" sx={{ minWidth: 200 }}>
          <InputLabel>Status</InputLabel>
          <Select value={currentFilterValue} label="Status" onChange={e => handleStatusFilterChange(e.target.value)}>
            <MenuItem value="active">Aktive Anfragen</MenuItem>
            <MenuItem value="all">Alle</MenuItem>
            {(Object.keys(AUSRUESTUNG_STATUS_LABELS) as AusruestungAnfrageStatus[]).map(s => (
              <MenuItem key={s} value={s}>{AUSRUESTUNG_STATUS_LABELS[s]}</MenuItem>
            ))}
          </Select>
        </FormControl>
      </Box>

      {filteredRequests.length === 0 ? (
        <Typography color="text.secondary" sx={{ mb: 2 }}>Keine Anfragen vorhanden.</Typography>
      ) : (
        <TableContainer component={Paper} variant="outlined">
          <Table size="small">
            <TableHead>
              <TableRow>
                <TableCell>Anfrage</TableCell>
                <TableCell>Bezeichnung</TableCell>
                <TableCell>Status</TableCell>
                <TableCell>Positionen</TableCell>
                <TableCell>Erstellt am</TableCell>
              </TableRow>
            </TableHead>
            <TableBody>
              {filteredRequests.map(r => (
                <TableRow key={r.id} hover sx={{ cursor: 'pointer' }} onClick={() => setDetailId(r.id)}>
                  <TableCell>{formatOrderId(r)}</TableCell>
                  <TableCell>{r.bezeichnung || '-'}</TableCell>
                  <TableCell><Chip label={AUSRUESTUNG_STATUS_LABELS[r.status]} color={AUSRUESTUNG_STATUS_COLORS[r.status]} size="small" /></TableCell>
                  <TableCell>{r.positionen_count ?? r.items_count ?? '-'}</TableCell>
                  <TableCell>{new Date(r.erstellt_am).toLocaleDateString('de-AT')}</TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </TableContainer>
      )}

      {/* Detail Modal */}
      <DetailModal
        requestId={detailId}
        onClose={() => setDetailId(null)}
        showEditButton
        canEditAny={canEditAny}
        currentUserId={user?.id}
      />

      {/* Create Request Dialog */}
      <Dialog open={createDialogOpen} onClose={() => { setCreateDialogOpen(false); resetCreateForm(); }} maxWidth="sm" fullWidth>
        <DialogTitle>Neue Bestellung</DialogTitle>
        <DialogContent sx={{ display: 'flex', flexDirection: 'column', gap: 2, pt: '16px !important' }}>
          <TextField
            label="Bezeichnung (optional)"
            value={newBezeichnung}
            onChange={e => setNewBezeichnung(e.target.value)}
            fullWidth
          />
          {canOrderForUser && (
            <Autocomplete
              options={orderUsers}
              getOptionLabel={o => o.name}
              value={newFuerBenutzer}
              onChange={(_, v) => setNewFuerBenutzer(v)}
              renderInput={params => <TextField {...params} label="Für wen (optional)" />}
            />
          )}
          <TextField
            label="Notizen (optional)"
            value={newNotizen}
            onChange={e => setNewNotizen(e.target.value)}
            multiline
            rows={2}
            fullWidth
          />
          <Divider />
          <Typography variant="subtitle2">Positionen</Typography>
          {newItems.map((item, idx) => (
            <Box key={idx}>
              <Box sx={{ display: 'flex', gap: 1, alignItems: 'center' }}>
                <Autocomplete
                  freeSolo
                  options={catalogItems}
                  getOptionLabel={o => typeof o === 'string' ? o : o.bezeichnung}
                  value={item.artikel_id ? catalogItems.find(c => c.id === item.artikel_id) || item.bezeichnung : item.bezeichnung}
                  onChange={(_, v) => {
                    if (typeof v === 'string') {
                      setNewItems(prev => prev.map((it, i) => i === idx ? { ...it, bezeichnung: v, artikel_id: undefined } : it));
                      // Clear eigenschaften for this row
                      setItemEigenschaftValues(prev => { const n = { ...prev }; delete n[idx]; return n; });
                    } else if (v) {
                      setNewItems(prev => prev.map((it, i) => i === idx ? { ...it, artikel_id: v.id, bezeichnung: v.bezeichnung } : it));
                      loadEigenschaften(v.id);
                    }
                  }}
                  onInputChange={(_, val, reason) => {
                    if (reason === 'input') {
                      setNewItems(prev => prev.map((it, i) => i === idx ? { ...it, bezeichnung: val, artikel_id: undefined } : it));
                    }
                  }}
                  renderInput={params => <TextField {...params} label="Artikel" size="small" />}
                  sx={{ flexGrow: 1 }}
                />
                <TextField
                  size="small"
                  type="number"
                  label="Menge"
                  value={item.menge}
                  onChange={e => setNewItems(prev => prev.map((it, i) => i === idx ? { ...it, menge: Math.max(1, Number(e.target.value)) } : it))}
                  sx={{ width: 90 }}
                  inputProps={{ min: 1 }}
                />
                <IconButton size="small" onClick={() => setNewItems(prev => prev.filter((_, i) => i !== idx))} disabled={newItems.length <= 1}>
                  <DeleteIcon fontSize="small" />
                </IconButton>
              </Box>
              {/* Eigenschaft fields for this item */}
              {item.artikel_id && itemEigenschaften[item.artikel_id] && itemEigenschaften[item.artikel_id].length > 0 && (
                <EigenschaftFields
                  eigenschaften={itemEigenschaften[item.artikel_id]}
                  values={itemEigenschaftValues[idx] || {}}
                  onChange={(eid, wert) => setItemEigenschaftValues(prev => ({
                    ...prev,
                    [idx]: { ...(prev[idx] || {}), [eid]: wert },
                  }))}
                />
              )}
            </Box>
          ))}
          <Button size="small" startIcon={<AddIcon />} onClick={() => setNewItems(prev => [...prev, { bezeichnung: '', menge: 1 }])}>
            Position hinzufügen
          </Button>
        </DialogContent>
        <DialogActions>
          <Button onClick={() => { setCreateDialogOpen(false); resetCreateForm(); }}>Abbrechen</Button>
          <Button
            variant="contained"
            onClick={handleCreateSubmit}
            disabled={createMut.isPending || newItems.every(i => !i.bezeichnung.trim())}
          >
            Anfrage erstellen
          </Button>
        </DialogActions>
      </Dialog>

      {/* FAB for creating new request */}
      {canCreate && (
        <ChatAwareFab onClick={() => setCreateDialogOpen(true)} aria-label="Neue Anfrage erstellen">
          <AddIcon />
        </ChatAwareFab>
      )}
    </Box>
  );
}

// ─── Admin All Requests Tab (merged with overview) ──────────────────────────

function AlleAnfragenTab() {
  const { hasPermission } = usePermissionContext();
  const { user } = useAuth();
  const [statusFilter, setStatusFilter] = useState<string>('');
  const [detailId, setDetailId] = useState<number | null>(null);

  const canEditAny = hasPermission('ausruestungsanfrage:edit');

  const { data: requests = [], isLoading } = useQuery({
    queryKey: ['ausruestungsanfrage', 'requests', statusFilter],
    queryFn: () => ausruestungsanfrageApi.getRequests(statusFilter ? { status: statusFilter } : undefined),
  });

  const { data: overview } = useQuery<AusruestungOverview>({
    queryKey: ['ausruestungsanfrage', 'overview'],
    queryFn: () => ausruestungsanfrageApi.getOverview(),
  });

  if (isLoading) return <Typography color="text.secondary">Lade Anfragen...</Typography>;

  return (
    <Box>
      {/* Summary cards */}
      <Grid container spacing={2} sx={{ mb: 3 }}>
        <Grid item xs={6} sm={3}>
          <Paper variant="outlined" sx={{ p: 2, textAlign: 'center' }}>
            <Typography variant="h4" fontWeight={700}>{overview?.pending_count ?? '-'}</Typography>
            <Typography variant="body2" color="text.secondary">Offene</Typography>
          </Paper>
        </Grid>
        <Grid item xs={6} sm={3}>
          <Paper variant="outlined" sx={{ p: 2, textAlign: 'center' }}>
            <Typography variant="h4" fontWeight={700}>{overview?.approved_count ?? '-'}</Typography>
            <Typography variant="body2" color="text.secondary">Genehmigte</Typography>
          </Paper>
        </Grid>
        <Grid item xs={6} sm={3}>
          <Paper variant="outlined" sx={{ p: 2, textAlign: 'center' }}>
            <Typography variant="h4" fontWeight={700} color="warning.main">{overview?.unhandled_count ?? '-'}</Typography>
            <Typography variant="body2" color="text.secondary">Neue (unbearbeitet)</Typography>
          </Paper>
        </Grid>
        <Grid item xs={6} sm={3}>
          <Paper variant="outlined" sx={{ p: 2, textAlign: 'center' }}>
            <Typography variant="h4" fontWeight={700}>{overview?.total_items ?? '-'}</Typography>
            <Typography variant="body2" color="text.secondary">Gesamt Artikel</Typography>
          </Paper>
        </Grid>
      </Grid>

      <FormControl size="small" sx={{ minWidth: 200, mb: 2 }}>
        <InputLabel>Status Filter</InputLabel>
        <Select value={statusFilter} label="Status Filter" onChange={e => setStatusFilter(e.target.value)}>
          <MenuItem value="">Alle</MenuItem>
          {(Object.keys(AUSRUESTUNG_STATUS_LABELS) as AusruestungAnfrageStatus[]).map(s => (
            <MenuItem key={s} value={s}>{AUSRUESTUNG_STATUS_LABELS[s]}</MenuItem>
          ))}
        </Select>
      </FormControl>

      {requests.length === 0 ? (
        <Typography color="text.secondary">Keine Anfragen vorhanden.</Typography>
      ) : (
        <TableContainer component={Paper} variant="outlined">
          <Table size="small">
            <TableHead>
              <TableRow>
                <TableCell>Anfrage</TableCell>
                <TableCell>Bezeichnung</TableCell>
                <TableCell>Anfrager</TableCell>
                <TableCell>Status</TableCell>
                <TableCell>Positionen</TableCell>
                <TableCell>Erstellt am</TableCell>
              </TableRow>
            </TableHead>
            <TableBody>
              {requests.map(r => (
                <TableRow key={r.id} hover sx={{ cursor: 'pointer' }} onClick={() => setDetailId(r.id)}>
                  <TableCell>{formatOrderId(r)}</TableCell>
                  <TableCell>{r.bezeichnung || '-'}</TableCell>
                  <TableCell>{r.anfrager_name || r.anfrager_id}</TableCell>
                  <TableCell><Chip label={AUSRUESTUNG_STATUS_LABELS[r.status]} color={AUSRUESTUNG_STATUS_COLORS[r.status]} size="small" /></TableCell>
                  <TableCell>{r.positionen_count ?? r.items_count ?? '-'}</TableCell>
                  <TableCell>{new Date(r.erstellt_am).toLocaleDateString('de-AT')}</TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </TableContainer>
      )}

      {/* Detail Modal with admin actions */}
      <DetailModal
        requestId={detailId}
        onClose={() => setDetailId(null)}
        showAdminActions
        showEditButton
        canEditAny={canEditAny}
        currentUserId={user?.id}
      />
    </Box>
  );
}

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

export default function Ausruestungsanfrage() {
  const [searchParams, setSearchParams] = useSearchParams();
  const { hasPermission } = usePermissionContext();

  const canView = hasPermission('ausruestungsanfrage:view');
  const canCreate = hasPermission('ausruestungsanfrage:create_request');
  const canApprove = hasPermission('ausruestungsanfrage:approve');

  const tabCount = 1 + (canCreate ? 1 : 0) + (canApprove ? 1 : 0);

  const [activeTab, setActiveTab] = useState(() => {
    const t = Number(searchParams.get('tab'));
    return t >= 0 && t < tabCount ? t : 0;
  });

  // Sync tab from URL changes (e.g. sidebar navigation)
  useEffect(() => {
    const t = Number(searchParams.get('tab'));
    if (t >= 0 && t < tabCount) setActiveTab(t);
  }, [searchParams, tabCount]);

  const handleTabChange = (_: React.SyntheticEvent, val: number) => {
    setActiveTab(val);
    setSearchParams({ tab: String(val) }, { replace: true });
  };

  const tabIndex = useMemo(() => {
    const map: Record<string, number> = {};
    let next = 0;
    if (canCreate) { map.meine = next; next++; }
    if (canApprove) { map.alle = next; next++; }
    map.katalog = next;
    return map;
  }, [canCreate, canApprove]);

  if (!canView) {
    return (
      <DashboardLayout>
        <Typography>Keine Berechtigung.</Typography>
      </DashboardLayout>
    );
  }

  return (
    <DashboardLayout>
      <Typography variant="h5" fontWeight={700} sx={{ mb: 2 }}>Interne Bestellungen</Typography>

      <Box sx={{ borderBottom: 1, borderColor: 'divider', mb: 3 }}>
        <Tabs value={activeTab} onChange={handleTabChange} variant="scrollable" scrollButtons="auto">
          {canCreate && <Tab label="Meine Anfragen" />}
          {canApprove && <Tab label="Alle Anfragen" />}
          <Tab label="Katalog" />
        </Tabs>
      </Box>

      {canCreate && activeTab === tabIndex.meine && <MeineAnfragenTab />}
      {canApprove && activeTab === tabIndex.alle && <AlleAnfragenTab />}
      {activeTab === tabIndex.katalog && <KatalogTab />}
    </DashboardLayout>
  );
}