dashboard/frontend/src/pages/PersoenlicheAusruestungNeu.tsx

import { useState, useMemo } from 'react';
import {
  Autocomplete,
  Box,
  Container,
  MenuItem,
  Stack,
  TextField,
  Button,
} from '@mui/material';
import { useNavigate } from 'react-router-dom';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import DashboardLayout from '../components/dashboard/DashboardLayout';
import { personalEquipmentApi } from '../services/personalEquipment';
import { ausruestungsanfrageApi } from '../services/ausruestungsanfrage';
import { membersService } from '../services/members';
import { usePermissionContext } from '../contexts/PermissionContext';
import { useNotification } from '../contexts/NotificationContext';
import { PageHeader } from '../components/templates';
import { ZUSTAND_LABELS } from '../types/personalEquipment.types';
import type {
  PersoenlicheAusruestungZustand,
  CreatePersoenlicheAusruestungPayload,
} from '../types/personalEquipment.types';
import type { AusruestungArtikel } from '../types/ausruestungsanfrage.types';

const ZUSTAND_OPTIONS = Object.entries(ZUSTAND_LABELS) as [PersoenlicheAusruestungZustand, string][];

export default function PersoenlicheAusruestungNeu() {
  const navigate = useNavigate();
  const queryClient = useQueryClient();
  const { hasPermission } = usePermissionContext();
  const { showSuccess, showError } = useNotification();

  const canViewAll = hasPermission('persoenliche_ausruestung:view_all');

  const [formBezeichnung, setFormBezeichnung] = useState<string | AusruestungArtikel | null>(null);
  const [formKategorie, setFormKategorie] = useState('');
  const [formUserId, setFormUserId] = useState<{ id: string; name: string } | null>(null);
  const [formBenutzerName, setFormBenutzerName] = useState('');
  const [formGroesse, setFormGroesse] = useState('');
  const [formZustand, setFormZustand] = useState<PersoenlicheAusruestungZustand>('gut');
  const [formNotizen, setFormNotizen] = useState('');

  const { data: catalogItems } = useQuery({
    queryKey: ['ausruestungsanfrage-items-catalog'],
    queryFn: () => ausruestungsanfrageApi.getItems(),
    staleTime: 10 * 60 * 1000,
  });

  const { data: membersList } = useQuery({
    queryKey: ['members-list-compact'],
    queryFn: () => membersService.getMembers({ pageSize: 500 }),
    staleTime: 5 * 60 * 1000,
    enabled: canViewAll,
  });

  const memberOptions = useMemo(() => {
    return (membersList?.items ?? []).map((m) => ({
      id: m.id,
      name: [m.given_name, m.family_name].filter(Boolean).join(' ') || m.email,
    }));
  }, [membersList]);

  const createMutation = useMutation({
    mutationFn: (data: CreatePersoenlicheAusruestungPayload) => personalEquipmentApi.create(data),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['persoenliche-ausruestung'] });
      showSuccess('Persönliche Ausrüstung erstellt');
      navigate('/persoenliche-ausruestung');
    },
    onError: () => {
      showError('Fehler beim Erstellen');
    },
  });

  const handleCreate = () => {
    const bezeichnung = typeof formBezeichnung === 'string'
      ? formBezeichnung
      : formBezeichnung?.bezeichnung ?? '';
    if (!bezeichnung.trim()) return;

    const payload: CreatePersoenlicheAusruestungPayload = {
      bezeichnung: bezeichnung.trim(),
      kategorie: formKategorie || undefined,
      artikel_id: typeof formBezeichnung === 'object' && formBezeichnung ? formBezeichnung.id : undefined,
      user_id: formUserId?.id || undefined,
      benutzer_name: formBenutzerName || undefined,
      groesse: formGroesse || undefined,
      zustand: formZustand,
      notizen: formNotizen || undefined,
    };
    createMutation.mutate(payload);
  };

  return (
    <DashboardLayout>
      <Container maxWidth="sm">
        <PageHeader
          title="Neue Ausrüstung zuweisen"
          backTo="/persoenliche-ausruestung"
        />

        <Stack spacing={2}>
          <Autocomplete
            freeSolo
            options={catalogItems ?? []}
            getOptionLabel={(o) => typeof o === 'string' ? o : o.bezeichnung}
            value={formBezeichnung}
            onChange={(_e, v) => {
              setFormBezeichnung(v);
              if (v && typeof v !== 'string' && v.kategorie) {
                setFormKategorie(v.kategorie);
              }
            }}
            onInputChange={(_e, v) => {
              if (typeof formBezeichnung === 'string' || formBezeichnung === null) {
                setFormBezeichnung(v);
              }
            }}
            renderInput={(params) => (
              <TextField {...params} label="Bezeichnung" required size="small" />
            )}
            size="small"
          />

          {canViewAll && (
            <Autocomplete
              options={memberOptions}
              getOptionLabel={(o) => o.name}
              value={formUserId}
              onChange={(_e, v) => setFormUserId(v)}
              renderInput={(params) => (
                <TextField {...params} label="Benutzer" size="small" />
              )}
              size="small"
            />
          )}

          {!canViewAll && (
            <TextField
              label="Benutzer (Name)"
              size="small"
              value={formBenutzerName}
              onChange={(e) => setFormBenutzerName(e.target.value)}
            />
          )}

          <TextField
            label="Kategorie"
            size="small"
            value={formKategorie}
            onChange={(e) => setFormKategorie(e.target.value)}
          />

          <TextField
            label="Größe"
            size="small"
            value={formGroesse}
            onChange={(e) => setFormGroesse(e.target.value)}
          />

          <TextField
            label="Zustand"
            select
            size="small"
            value={formZustand}
            onChange={(e) => setFormZustand(e.target.value as PersoenlicheAusruestungZustand)}
          >
            {ZUSTAND_OPTIONS.map(([key, label]) => (
              <MenuItem key={key} value={key}>{label}</MenuItem>
            ))}
          </TextField>

          <TextField
            label="Notizen"
            size="small"
            multiline
            rows={2}
            value={formNotizen}
            onChange={(e) => setFormNotizen(e.target.value)}
          />

          <Box sx={{ display: 'flex', gap: 1, justifyContent: 'flex-end', mt: 1 }}>
            <Button onClick={() => navigate('/persoenliche-ausruestung')}>
              Abbrechen
            </Button>
            <Button
              variant="contained"
              onClick={handleCreate}
              disabled={createMutation.isPending || !(typeof formBezeichnung === 'string' ? formBezeichnung.trim() : formBezeichnung?.bezeichnung?.trim())}
            >
              Erstellen
            </Button>
          </Box>
        </Stack>
      </Container>
    </DashboardLayout>
  );
}