dashboard/frontend/src/pages/AusruestungsanfrageZuweisung.tsx

import { useState, useMemo } from 'react';
import {
  Box, Typography, Container, Button, Chip,
  TextField, Autocomplete, ToggleButton, ToggleButtonGroup,
  Stack, Divider, LinearProgress,
} from '@mui/material';
import { Assignment as AssignmentIcon } from '@mui/icons-material';
import { useQuery } from '@tanstack/react-query';
import { useParams, useNavigate } from 'react-router-dom';
import DashboardLayout from '../components/dashboard/DashboardLayout';
import { PageHeader } from '../components/templates';
import { useNotification } from '../contexts/NotificationContext';
import { ausruestungsanfrageApi } from '../services/ausruestungsanfrage';
import { vehiclesApi } from '../services/vehicles';
import { membersService } from '../services/members';
import type { AusruestungAnfragePosition } from '../types/ausruestungsanfrage.types';

type AssignmentTyp = 'ausruestung' | 'persoenlich' | 'keine';

interface PositionAssignment {
  typ: AssignmentTyp;
  fahrzeugId?: string;
  standort?: string;
  userId?: string;
  benutzerName?: string;
  groesse?: string;
  kategorie?: string;
}

function getUnassignedPositions(positions: AusruestungAnfragePosition[]): AusruestungAnfragePosition[] {
  return positions.filter((p) => p.geliefert && !p.zuweisung_typ);
}

export default function AusruestungsanfrageZuweisung() {
  const { id } = useParams<{ id: string }>();
  const navigate = useNavigate();
  const { showSuccess, showError } = useNotification();
  const anfrageId = Number(id);

  const { data: detail, isLoading, isError } = useQuery({
    queryKey: ['ausruestungsanfrage', 'request', anfrageId],
    queryFn: () => ausruestungsanfrageApi.getRequest(anfrageId),
    enabled: !isNaN(anfrageId),
    retry: 1,
  });

  const unassigned = useMemo(() => {
    if (!detail) return [];
    return getUnassignedPositions(detail.positionen);
  }, [detail]);

  const [assignments, setAssignments] = useState<Record<number, PositionAssignment>>({});

  // Initialize assignments when unassigned positions load
  useMemo(() => {
    if (unassigned.length > 0 && Object.keys(assignments).length === 0) {
      const init: Record<number, PositionAssignment> = {};
      for (const p of unassigned) {
        init[p.id] = { typ: 'persoenlich' };
      }
      setAssignments(init);
    }
  }, [unassigned]);

  const { data: vehicleList } = useQuery({
    queryKey: ['vehicles', 'sidebar'],
    queryFn: () => vehiclesApi.getAll(),
    staleTime: 2 * 60 * 1000,
  });

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

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

  const vehicleOptions = (vehicleList ?? []).map((v) => ({
    id: v.id,
    name: v.bezeichnung ?? v.kurzname,
  }));

  const [submitting, setSubmitting] = useState(false);

  const updateAssignment = (posId: number, patch: Partial<PositionAssignment>) => {
    setAssignments((prev) => ({
      ...prev,
      [posId]: { ...prev[posId], ...patch },
    }));
  };

  const handleSkipAll = () => {
    const updated: Record<number, PositionAssignment> = {};
    for (const p of unassigned) {
      updated[p.id] = { typ: 'keine' };
    }
    setAssignments(updated);
  };

  const handleSubmit = async () => {
    if (!detail) return;
    setSubmitting(true);
    try {
      const anfrage = detail.anfrage;
      const payload = Object.entries(assignments).map(([posId, a]) => ({
        positionId: Number(posId),
        typ: a.typ,
        fahrzeugId: a.typ === 'ausruestung' ? a.fahrzeugId : undefined,
        standort: a.typ === 'ausruestung' ? a.standort : undefined,
        userId: a.typ === 'persoenlich' ? a.userId : undefined,
        benutzerName: a.typ === 'persoenlich' ? (a.benutzerName || anfrage.fuer_benutzer_name || anfrage.anfrager_name) : undefined,
        groesse: a.typ === 'persoenlich' ? a.groesse : undefined,
        kategorie: a.typ === 'persoenlich' ? a.kategorie : undefined,
      }));
      await ausruestungsanfrageApi.assignItems(anfrageId, payload);
      showSuccess('Gegenstände zugewiesen');
      navigate(`/ausruestungsanfrage/${id}`);
    } catch {
      showError('Fehler beim Zuweisen');
    } finally {
      setSubmitting(false);
    }
  };

  const backPath = `/ausruestungsanfrage/${id}`;

  return (
    <DashboardLayout>
      <Container maxWidth="md">
        <PageHeader
          title="Gegenstände zuweisen"
          subtitle={detail?.anfrage.bezeichnung || undefined}
          backTo={backPath}
        />

        {isLoading ? (
          <LinearProgress />
        ) : isError || !detail ? (
          <Typography color="error">Fehler beim Laden der Anfrage.</Typography>
        ) : unassigned.length === 0 ? (
          <Typography color="text.secondary">Keine unzugewiesenen Positionen vorhanden.</Typography>
        ) : (
          <>
            <Typography variant="body2" color="text.secondary" sx={{ mb: 3 }}>
              Wähle für jeden gelieferten Gegenstand, wie er erfasst werden soll.
            </Typography>

            <Stack spacing={3} divider={<Divider />}>
              {unassigned.map((pos) => {
                const a = assignments[pos.id] ?? { typ: 'persoenlich' as const };
                return (
                  <Box key={pos.id}>
                    <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1.5 }}>
                      <Typography variant="body2" fontWeight={600}>
                        {pos.bezeichnung}
                      </Typography>
                      <Chip label={`${pos.menge}x`} size="small" variant="outlined" />
                    </Box>

                    <ToggleButtonGroup
                      value={a.typ}
                      exclusive
                      size="small"
                      onChange={(_e, val) => val && updateAssignment(pos.id, { typ: val })}
                      sx={{ mb: 1.5 }}
                    >
                      <ToggleButton value="ausruestung">Ausrüstung</ToggleButton>
                      <ToggleButton value="persoenlich">Persönlich</ToggleButton>
                      <ToggleButton value="keine">Nicht erfassen</ToggleButton>
                    </ToggleButtonGroup>

                    {a.typ === 'ausruestung' && (
                      <Box sx={{ display: 'flex', gap: 1.5, flexWrap: 'wrap' }}>
                        <Autocomplete
                          size="small"
                          options={vehicleOptions}
                          getOptionLabel={(o) => o.name}
                          value={vehicleOptions.find((v) => v.id === a.fahrzeugId) ?? null}
                          onChange={(_e, v) => updateAssignment(pos.id, { fahrzeugId: v?.id })}
                          renderInput={(params) => <TextField {...params} label="Fahrzeug" />}
                          sx={{ minWidth: 200, flex: 1 }}
                        />
                        <TextField
                          size="small"
                          label="Standort"
                          value={a.standort ?? ''}
                          onChange={(e) => updateAssignment(pos.id, { standort: e.target.value })}
                          sx={{ minWidth: 160, flex: 1 }}
                        />
                      </Box>
                    )}

                    {a.typ === 'persoenlich' && (
                      <Box sx={{ display: 'flex', gap: 1.5, flexWrap: 'wrap' }}>
                        <Autocomplete
                          size="small"
                          options={memberOptions}
                          getOptionLabel={(o) => o.name}
                          value={memberOptions.find((m) => m.id === a.userId) ?? null}
                          onChange={(_e, v) => updateAssignment(pos.id, { userId: v?.id, benutzerName: v?.name })}
                          renderInput={(params) => (
                            <TextField
                              {...params}
                              label="Benutzer"
                              placeholder={detail.anfrage.fuer_benutzer_name || detail.anfrage.anfrager_name || ''}
                            />
                          )}
                          sx={{ minWidth: 200, flex: 1 }}
                        />
                        <TextField
                          size="small"
                          label="Größe"
                          value={a.groesse ?? ''}
                          onChange={(e) => updateAssignment(pos.id, { groesse: e.target.value })}
                          sx={{ minWidth: 100 }}
                        />
                        <TextField
                          size="small"
                          label="Kategorie"
                          value={a.kategorie ?? ''}
                          onChange={(e) => updateAssignment(pos.id, { kategorie: e.target.value })}
                          sx={{ minWidth: 140 }}
                        />
                      </Box>
                    )}
                  </Box>
                );
              })}
            </Stack>

            <Box sx={{ display: 'flex', gap: 1, justifyContent: 'flex-end', mt: 4 }}>
              <Button onClick={handleSkipAll} color="inherit">
                Alle überspringen
              </Button>
              <Button onClick={() => navigate(backPath)}>Abbrechen</Button>
              <Button
                variant="contained"
                onClick={handleSubmit}
                disabled={submitting}
                startIcon={<AssignmentIcon />}
              >
                Zuweisen
              </Button>
            </Box>
          </>
        )}
      </Container>
    </DashboardLayout>
  );
}