dashboard/frontend/src/pages/PersoenlicheAusruestungDetail.tsx

import { useState } from 'react';
import {
  Box, Typography, Container, Chip, Button, Paper, Divider,
  Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions,
  LinearProgress,
} from '@mui/material';
import { Edit as EditIcon, Delete as DeleteIcon } from '@mui/icons-material';
import { useParams, useNavigate } from 'react-router-dom';
import { useQuery, useQueryClient } from '@tanstack/react-query';
import DashboardLayout from '../components/dashboard/DashboardLayout';
import { PageHeader } from '../components/templates';
import { usePermissionContext } from '../contexts/PermissionContext';
import { useNotification } from '../contexts/NotificationContext';
import { personalEquipmentApi } from '../services/personalEquipment';
import type { ZustandOption } from '../types/personalEquipment.types';

export default function PersoenlicheAusruestungDetail() {
  const { id } = useParams<{ id: string }>();
  const navigate = useNavigate();
  const queryClient = useQueryClient();
  const { hasPermission } = usePermissionContext();
  const { showSuccess, showError } = useNotification();
  const [deleteOpen, setDeleteOpen] = useState(false);
  const [deleting, setDeleting] = useState(false);

  const { data: item, isLoading, isError } = useQuery({
    queryKey: ['persoenliche-ausruestung', 'detail', id],
    queryFn: () => personalEquipmentApi.getById(id!),
    enabled: !!id,
  });

  const { data: zustandOptions = [] } = useQuery<ZustandOption[]>({
    queryKey: ['persoenliche-ausruestung', 'zustand-options'],
    queryFn: () => personalEquipmentApi.getZustandOptions(),
    staleTime: 5 * 60 * 1000,
  });

  const getZustandLabel = (key: string) => zustandOptions.find(o => o.key === key)?.label ?? key;
  const getZustandColor = (key: string) => zustandOptions.find(o => o.key === key)?.color ?? 'default';

  const canEdit = hasPermission('persoenliche_ausruestung:edit');
  const canDelete = hasPermission('persoenliche_ausruestung:delete');

  const handleDelete = async () => {
    if (!id) return;
    setDeleting(true);
    try {
      await personalEquipmentApi.delete(id);
      queryClient.invalidateQueries({ queryKey: ['persoenliche-ausruestung'] });
      showSuccess('Persönliche Ausrüstung gelöscht');
      navigate('/persoenliche-ausruestung');
    } catch {
      showError('Fehler beim Löschen');
    } finally {
      setDeleting(false);
      setDeleteOpen(false);
    }
  };

  return (
    <DashboardLayout>
      <Container maxWidth="md">
        {isLoading ? (
          <LinearProgress />
        ) : isError || !item ? (
          <Typography color="error">Fehler beim Laden.</Typography>
        ) : (
          <>
            <PageHeader
              title={item.bezeichnung}
              backTo="/persoenliche-ausruestung"
              subtitle={item.artikel_kategorie_parent_name
                ? `${item.artikel_kategorie_parent_name} > ${item.artikel_kategorie_name}`
                : item.artikel_kategorie_name || item.kategorie || undefined}
            />

            {/* Status + actions row */}
            <Box sx={{ display: 'flex', gap: 1, alignItems: 'center', mb: 3 }}>
              <Chip
                label={getZustandLabel(item.zustand)}
                color={getZustandColor(item.zustand) as any}
                variant="outlined"
              />
              <Box sx={{ flex: 1 }} />
              {canEdit && (
                <Button startIcon={<EditIcon />} variant="outlined" size="small"
                  onClick={() => navigate(`/persoenliche-ausruestung/${id}/edit`)}>
                  Bearbeiten
                </Button>
              )}
              {canDelete && (
                <Button startIcon={<DeleteIcon />} variant="outlined" color="error" size="small"
                  onClick={() => setDeleteOpen(true)}>
                  Löschen
                </Button>
              )}
            </Box>

            {/* Info card */}
            <Paper sx={{ p: 2.5, mb: 2 }}>
              <Typography variant="subtitle2" gutterBottom>Details</Typography>
              <Box sx={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 1.5 }}>
                {([
                  ['Benutzer', item.user_display_name || item.benutzer_name],
                  ['Seriennummer', item.seriennummer],
                  ['Inventarnummer', item.inventarnummer],
                  ['Erstellt am', new Date(item.erstellt_am).toLocaleDateString('de-AT')],
                ] as [string, string | null | undefined][]).map(([label, value]) => value ? (
                  <Box key={label}>
                    <Typography variant="caption" color="text.secondary">{label}</Typography>
                    <Typography variant="body2">{value}</Typography>
                  </Box>
                ) : null)}
              </Box>

              {item.anfrage_id && (
                <>
                  <Divider sx={{ my: 1.5 }} />
                  <Typography variant="caption" color="text.secondary">Aus Anfrage</Typography>
                  <Typography
                    variant="body2"
                    sx={{ cursor: 'pointer', color: 'primary.main' }}
                    onClick={() => navigate(`/ausruestungsanfrage/${item.anfrage_id}`)}
                  >
                    Anfrage #{item.anfrage_id}
                  </Typography>
                </>
              )}
            </Paper>

            {/* Eigenschaften */}
            {item.eigenschaften && item.eigenschaften.length > 0 && (
              <Paper sx={{ p: 2.5, mb: 2 }}>
                <Typography variant="subtitle2" gutterBottom>Eigenschaften</Typography>
                <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1 }}>
                  {item.eigenschaften.map((e) => (
                    <Box key={e.id}>
                      <Typography variant="caption" color="text.secondary">{e.name}</Typography>
                      <Typography variant="body2" fontWeight={500}>{e.wert}</Typography>
                    </Box>
                  ))}
                </Box>
              </Paper>
            )}

            {/* Notizen */}
            {item.notizen && (
              <Paper sx={{ p: 2.5 }}>
                <Typography variant="subtitle2" gutterBottom>Notizen</Typography>
                <Typography variant="body2" sx={{ whiteSpace: 'pre-wrap' }}>{item.notizen}</Typography>
              </Paper>
            )}
          </>
        )}
      </Container>

      {/* Delete confirmation */}
      <Dialog open={deleteOpen} onClose={() => setDeleteOpen(false)}>
        <DialogTitle>Persönliche Ausrüstung löschen?</DialogTitle>
        <DialogContent>
          <DialogContentText>
            Dieser Eintrag wird dauerhaft gelöscht und kann nicht wiederhergestellt werden.
          </DialogContentText>
        </DialogContent>
        <DialogActions>
          <Button onClick={() => setDeleteOpen(false)}>Abbrechen</Button>
          <Button onClick={handleDelete} color="error" disabled={deleting}>
            Löschen
          </Button>
        </DialogActions>
      </Dialog>
    </DashboardLayout>
  );
}