Parts Inventory Laboratory

import {
  Paper,
  Group,
  Stack,
  Text,
  Badge,
  Table,
  ScrollArea,
  Alert,
  ActionIcon,
  Tooltip,
  Divider,
  ThemeIcon,
} from "@mantine/core";
import {
  HiExclamationTriangle,
  HiShoppingCart,
  HiTruck,
  HiWrenchScrewdriver,
} from "react-icons/hi2";
import type { InventoryData, Part } from "./types";

const STOCK_COLORS = {
  critical: "#fa5252",
  low: "#fd7e14",
  adequate: "#40c057",
  overstocked: "#228be6",
} as const;

interface Props {
  data: InventoryData;
}

function StockLevelBadge({ level }: { level: Part["stockLevel"] }) {
  const labels: Record<Part["stockLevel"], string> = {
    critical: "Critical",
    low: "Low",
    adequate: "Adequate",
    overstocked: "Overstocked",
  };
  return (
    <Badge
      size="xs"
      style={{ backgroundColor: STOCK_COLORS[level], color: "#fff", textTransform: "uppercase" }}
    >
      {labels[level]}
    </Badge>
  );
}

export function Variant1_AlertCentric({ data }: Props) {
  const criticalParts = data.parts.filter((p) => p.stockLevel === "critical");
  const lowParts = data.parts.filter((p) => p.stockLevel === "low");
  const onOrderParts = data.parts.filter((p) => p.quantityOnOrder > 0 && p.expectedDelivery);
  const blockedJobs = data.affectedJobs.filter((j) => !j.partAvailable);
  const atRiskJobs = data.affectedJobs.filter((j) => j.partAvailable);

  const hasCritical = criticalParts.length > 0;

  return (
    <Paper
      withBorder
      shadow="sm"
      radius="md"
      p="md"
      style={{ display: "flex", flexDirection: "column", gap: 0 }}
    >
      {/* Header */}
      <Group justify="space-between" mb="md">
        <Group gap="sm">
          <ThemeIcon variant="light" color="red" size="md" radius="sm">
            <HiWrenchScrewdriver size={16} />
          </ThemeIcon>
          <div>
            <Text fw={700} size="md" lh={1.2}>
              Parts &amp; Inventory
            </Text>
            <Text size="xs" c="dimmed">
              Alert-centric view — action required items first
            </Text>
          </div>
        </Group>
        {hasCritical && (
          <Badge color="red" size="md" leftSection={<HiExclamationTriangle size={12} />}>
            {criticalParts.length} Critical
          </Badge>
        )}
      </Group>

      <Divider mb="md" />

      <Stack gap="sm">
        {/* Critical Stock Alert */}
        {criticalParts.length > 0 && (
          <Alert
            icon={<HiExclamationTriangle size={18} />}
            title={`${criticalParts.length} item${criticalParts.length > 1 ? "s" : ""} at critical stock level`}
            color="red"
            radius="sm"
            styles={{ title: { fontWeight: 700 } }}
          >
            <Stack gap={6} mt={6}>
              {criticalParts.map((part) => (
                <Group key={part.id} justify="space-between" wrap="nowrap">
                  <div style={{ minWidth: 0 }}>
                    <Text size="sm" fw={600} truncate>
                      {part.name}
                    </Text>
                    <Text size="xs" c="dimmed">
                      SKU: {part.sku} &bull; On hand: {part.quantityOnHand} &bull; Reorder at:{" "}
                      {part.reorderPoint}
                    </Text>
                  </div>
                  <Tooltip label="Place reorder" withArrow position="left">
                    <ActionIcon
                      variant="filled"
                      color="red"
                      size="sm"
                      aria-label={`Reorder ${part.name}`}
                    >
                      <HiShoppingCart size={13} />
                    </ActionIcon>
                  </Tooltip>
                </Group>
              ))}
            </Stack>
          </Alert>
        )}

        {/* Low Stock Alert */}
        {lowParts.length > 0 && (
          <Alert
            icon={<HiExclamationTriangle size={18} />}
            title={`${lowParts.length} item${lowParts.length > 1 ? "s" : ""} running low`}
            color="orange"
            radius="sm"
            styles={{ title: { fontWeight: 700 } }}
          >
            <Stack gap={6} mt={6}>
              {lowParts.map((part) => (
                <Group key={part.id} justify="space-between" wrap="nowrap">
                  <div style={{ minWidth: 0 }}>
                    <Text size="sm" fw={600} truncate>
                      {part.name}
                    </Text>
                    <Text size="xs" c="dimmed">
                      SKU: {part.sku} &bull; On hand: {part.quantityOnHand} &bull; Reorder at:{" "}
                      {part.reorderPoint}
                    </Text>
                  </div>
                  <Tooltip label="Place reorder" withArrow position="left">
                    <ActionIcon
                      variant="filled"
                      color="orange"
                      size="sm"
                      aria-label={`Reorder ${part.name}`}
                    >
                      <HiShoppingCart size={13} />
                    </ActionIcon>
                  </Tooltip>
                </Group>
              ))}
            </Stack>
          </Alert>
        )}

        {/* Parts On Order */}
        {onOrderParts.length > 0 && (
          <div>
            <Group gap="xs" mb="xs">
              <HiTruck size={15} color="#868e96" />
              <Text size="sm" fw={600} c="dimmed">
                Parts On Order ({onOrderParts.length})
              </Text>
            </Group>
            <ScrollArea>
              <Table
                striped
                withTableBorder
                withColumnBorders
                highlightOnHover
                style={{ fontSize: 12 }}
              >
                <Table.Thead>
                  <Table.Tr>
                    <Table.Th>Part Name</Table.Th>
                    <Table.Th style={{ textAlign: "center" }}>Qty On Order</Table.Th>
                    <Table.Th>Expected Delivery</Table.Th>
                    <Table.Th style={{ textAlign: "center" }}>Status</Table.Th>
                  </Table.Tr>
                </Table.Thead>
                <Table.Tbody>
                  {onOrderParts.map((part) => (
                    <Table.Tr key={part.id}>
                      <Table.Td>
                        <Text size="xs" fw={500}>
                          {part.name}
                        </Text>
                        <Text size="xs" c="dimmed">
                          {part.sku}
                        </Text>
                      </Table.Td>
                      <Table.Td style={{ textAlign: "center" }}>
                        <Text size="xs">{part.quantityOnOrder}</Text>
                      </Table.Td>
                      <Table.Td>
                        <Text size="xs">{part.expectedDelivery}</Text>
                      </Table.Td>
                      <Table.Td style={{ textAlign: "center" }}>
                        <StockLevelBadge level={part.stockLevel} />
                      </Table.Td>
                    </Table.Tr>
                  ))}
                </Table.Tbody>
              </Table>
            </ScrollArea>
          </div>
        )}

        {/* Affected Jobs */}
        <div>
          <Group gap="xs" mb="xs">
            <HiExclamationTriangle
              size={15}
              color={blockedJobs.length > 0 ? "#fa5252" : "#868e96"}
            />
            <Text size="sm" fw={600} c={blockedJobs.length > 0 ? "red" : "dimmed"}>
              {blockedJobs.length} Job{blockedJobs.length !== 1 ? "s" : ""} Blocked by Parts
              Shortage
            </Text>
            {atRiskJobs.length > 0 && (
              <Text size="xs" c="dimmed">
                (+{atRiskJobs.length} using low-stock parts)
              </Text>
            )}
          </Group>
          <Stack gap={4}>
            {data.affectedJobs.map((job) => (
              <Group
                key={job.workOrderId}
                justify="space-between"
                wrap="nowrap"
                p="xs"
                style={{
                  borderRadius: 6,
                  backgroundColor: !job.partAvailable ? "#fff5f5" : "#fff9f0",
                  border: `1px solid ${!job.partAvailable ? "#ffc9c9" : "#ffd8a8"}`,
                }}
              >
                <div style={{ minWidth: 0 }}>
                  <Group gap={6} wrap="nowrap">
                    {!job.partAvailable && (
                      <HiExclamationTriangle size={13} color="#fa5252" style={{ flexShrink: 0 }} />
                    )}
                    <Text size="xs" fw={600} truncate>
                      {job.workOrderId} — {job.customerName}
                    </Text>
                  </Group>
                  <Text size="xs" c="dimmed" ml={!job.partAvailable ? 19 : 0}>
                    Needs: {job.requiredPart}
                  </Text>
                </div>
                <Badge
                  size="xs"
                  color={!job.partAvailable ? "red" : "orange"}
                  variant="light"
                  style={{ flexShrink: 0 }}
                >
                  {!job.partAvailable ? "Blocked" : "At Risk"}
                </Badge>
              </Group>
            ))}
          </Stack>
        </div>
      </Stack>
    </Paper>
  );
}