edr-platform/apps/edr-freight-web/backoffice/src/components/overview/OverviewTabContent.tsx

import { AlertCircle } from "lucide-react";
import { Alert, Button, Center, Loader, Paper, Skeleton, Stack } from "@mantine/core";

import {
  useOverviewBillingTab,
  useOverviewBookingsTab,
  useOverviewContractsTab,
  useOverviewCustomersTab,
  useOverviewOperationsTab,
  useOverviewStaffTab,
} from "@/hooks/useOverview";
import type { OverviewRange, OverviewTabKey } from "@/types/overview";
import { OverviewBillingTabPanel } from "./tabs/OverviewBillingTabPanel";
import { OverviewBookingsTabPanel } from "./tabs/OverviewBookingsTabPanel";
import { OverviewContractsTabPanel } from "./tabs/OverviewContractsTabPanel";
import { OverviewCustomersTabPanel } from "./tabs/OverviewCustomersTabPanel";
import { OverviewOperationsTabPanel } from "./tabs/OverviewOperationsTabPanel";
import { OverviewStaffTabPanel } from "./tabs/OverviewStaffTabPanel";

function TabSkeleton() {
  return (
    <Stack gap="lg">
      <Skeleton height={120} radius="lg" />
      <Skeleton height={320} radius="lg" />
      <Skeleton height={320} radius="lg" />
    </Stack>
  );
}

interface OverviewTabContentProps {
  tab: OverviewTabKey;
  range: OverviewRange;
}

export function OverviewTabContent({ tab, range }: OverviewTabContentProps) {
  const bookings = useOverviewBookingsTab(range, tab === "bookings");
  const contracts = useOverviewContractsTab(range, tab === "contracts");
  const billing = useOverviewBillingTab(range, tab === "billing");
  const operations = useOverviewOperationsTab(tab === "operations");
  const customers = useOverviewCustomersTab(range, tab === "customers");
  const staff = useOverviewStaffTab(range, tab === "staff");

  const query =
    tab === "bookings"
      ? bookings
      : tab === "contracts"
        ? contracts
        : tab === "billing"
          ? billing
          : tab === "operations"
            ? operations
            : tab === "customers"
              ? customers
              : staff;

  const { isLoading, isError, refetch, isFetching } = query;

  if (isLoading) {
    return <TabSkeleton />;
  }

  if (isError || !query.data) {
    return (
      <Paper p="xl" radius="lg" withBorder>
        <Alert
          icon={<AlertCircle size={16} />}
          color="red"
          title="Failed to load tab data"
          variant="light"
        >
          <Stack gap="sm" align="flex-start">
            <span>Could not load {tab} metrics. Please try again.</span>
            <Button size="xs" variant="light" color="red" onClick={() => void refetch()}>
              Retry
            </Button>
          </Stack>
        </Alert>
      </Paper>
    );
  }

  return (
    <Stack gap="md" pos="relative">
      {isFetching && (
        <Center style={{ position: "absolute", top: 8, right: 8, zIndex: 2 }}>
          <Loader size="sm" color="edr-green" />
        </Center>
      )}

      {tab === "bookings" && bookings.data && (
        <OverviewBookingsTabPanel data={bookings.data} />
      )}
      {tab === "contracts" && contracts.data && (
        <OverviewContractsTabPanel data={contracts.data} />
      )}
      {tab === "billing" && billing.data && (
        <OverviewBillingTabPanel data={billing.data} />
      )}
      {tab === "operations" && operations.data && (
        <OverviewOperationsTabPanel data={operations.data} />
      )}
      {tab === "customers" && customers.data && (
        <OverviewCustomersTabPanel data={customers.data} />
      )}
      {tab === "staff" && staff.data && (
        <OverviewStaffTabPanel data={staff.data} />
      )}
    </Stack>
  );
}