import { List, ListItem, ListItemText, Chip, Typography } from '@mui/material';
import CheckroomIcon from '@mui/icons-material/Checkroom';
import { useQuery } from '@tanstack/react-query';
import { useNavigate } from 'react-router-dom';
import { personalEquipmentApi } from '../../services/personalEquipment';
import type { ZustandOption } from '../../types/personalEquipment.types';
import { WidgetCard } from '../templates/WidgetCard';
import { ItemListSkeleton } from '../templates/SkeletonPresets';

function PersoenlicheAusruestungWidget() {
  const navigate = useNavigate();

  const { data: items, isLoading, isError } = useQuery({
    queryKey: ['persoenliche-ausruestung', 'my'],
    queryFn: () => personalEquipmentApi.getMy(),
    staleTime: 5 * 60 * 1000,
    retry: 1,
  });

  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 displayItems = (items ?? []).slice(0, 5);

  return (
    <WidgetCard
      title="Meine Ausrüstung"
      icon={<CheckroomIcon fontSize="small" />}
      isLoading={isLoading}
      skeleton={<ItemListSkeleton count={3} />}
      isError={isError}
      errorMessage="Ausrüstung konnte nicht geladen werden."
      isEmpty={!isLoading && !isError && (items ?? []).length === 0}
      emptyMessage="Keine persönlichen Gegenstände erfasst"
      onClick={() => navigate('/persoenliche-ausruestung')}
      footer={
        items && items.length > 5 ? (
          <Typography variant="caption" color="text.secondary">
            +{items.length - 5} weitere
          </Typography>
        ) : undefined
      }
    >
      <List dense disablePadding>
        {displayItems.map((item) => (
          <ListItem key={item.id} disablePadding sx={{ py: 0.5 }}>
            <ListItemText
              primary={item.bezeichnung}
              secondary={item.artikel_kategorie_parent_name
                ? `${item.artikel_kategorie_parent_name} > ${item.artikel_kategorie_name}`
                : item.artikel_kategorie_name ?? item.kategorie ?? undefined}
              primaryTypographyProps={{ variant: 'body2', noWrap: true }}
              secondaryTypographyProps={{ variant: 'caption' }}
            />
            <Chip
              label={getZustandLabel(item.zustand)}
              color={getZustandColor(item.zustand) as any}
              size="small"
              variant="outlined"
              sx={{ ml: 1, flexShrink: 0 }}
            />
          </ListItem>
        ))}
      </List>
    </WidgetCard>
  );
}

export default PersoenlicheAusruestungWidget;
