import { useMemo } from 'react';
import { ActionIcon, Card, Group, SimpleGrid, Stack, Text } from '@mantine/core';
import { Building2, Eye, MapPin, Pencil } from 'lucide-react';

import { useQuery } from '@tanstack/react-query';

import { api } from '@/services/api';
import type { Warehouse } from '@/types/warehouse';
import { WarehouseStatusBadge, WarehouseTypeBadge } from './badges';
import { formatCapacity } from './options';

interface WarehouseCardViewProps {
  warehouses: Warehouse[];
  onView: (warehouse: Warehouse) => void;
  onEdit: (warehouse: Warehouse) => void;
}

export function WarehouseCardView({ warehouses, onView, onEdit }: WarehouseCardViewProps) {
  const { data: stations } = useQuery(
    api.stations.list.queryOptions({ staleTime: 5 * 60 * 1000 }),
  );
  const stationNameById = useMemo(
    () => new Map((stations ?? []).map((s) => [s.id, s.name])),
    [stations],
  );

  if (warehouses.length === 0) {
    return (
      <Text c="dimmed" ta="center" py="xl">
        No warehouses found.
      </Text>
    );
  }

  return (
    <SimpleGrid cols={{ base: 1, sm: 2, lg: 3 }} spacing="md">
      {warehouses.map((warehouse) => (
        <Card key={warehouse.id} withBorder radius="md" padding="lg">
          <Stack gap="sm">
            <Group justify="space-between" wrap="nowrap" align="flex-start">
              <div>
                <Text fw={700}>{warehouse.name}</Text>
                <Text size="xs" c="dimmed">
                  {warehouse.code}
                </Text>
              </div>
              <WarehouseStatusBadge status={warehouse.status} />
            </Group>

            <Group gap="xs">
              <WarehouseTypeBadge type={warehouse.type} />
            </Group>

            {warehouse.stationId && stationNameById.get(warehouse.stationId) && (
              <Group gap={6} c="dimmed">
                <Building2 size={14} />
                <Text size="sm">{stationNameById.get(warehouse.stationId)}</Text>
              </Group>
            )}

            {warehouse.locationName && (
              <Group gap={6} c="dimmed">
                <MapPin size={14} />
                <Text size="sm">{warehouse.locationName}</Text>
              </Group>
            )}

            <Group justify="space-between">
              <Text size="xs" c="dimmed">
                Weight
              </Text>
              <Text size="sm">{formatCapacity(warehouse.currentWeight, warehouse.capacityWeight)}</Text>
            </Group>
            <Group justify="space-between">
              <Text size="xs" c="dimmed">
                Containers
              </Text>
              <Text size="sm">{formatCapacity(warehouse.currentContainers, warehouse.capacityContainers)}</Text>
            </Group>

            <Group justify="flex-end" gap="xs" mt="xs">
              <ActionIcon variant="subtle" color="gray" onClick={() => onView(warehouse)} title="View">
                <Eye size={16} />
              </ActionIcon>
              <ActionIcon variant="subtle" color="gray" onClick={() => onEdit(warehouse)} title="Edit">
                <Pencil size={16} />
              </ActionIcon>
            </Group>
          </Stack>
        </Card>
      ))}
    </SimpleGrid>
  );
}
