edr-platform/apps/edr-freight-web/backoffice/src/components/bookings/BookingRequestsHeader.tsx

import type { ReactNode } from "react";
import { Box, Button, Group, Paper, Stack, Text } from "@mantine/core";
import type { LucideIcon } from "lucide-react";
import {
  AlertTriangle,
  CheckCircle2,
  Clock,
  LayoutList,
  Plus,
  RefreshCw,
} from "lucide-react";

import { MiniRing, MiniSparkline } from "@/components/common/MiniGraph";
import { ACCENT_CHIP_BG } from "@/components/overview/OverviewKpiCard";
import {
  overviewAccentGradients,
  type OverviewAccent,
} from "@/components/overview/overview.styles";
import type {
  BookingListSummaryMetrics,
  BookingListSummaryTabs,
} from "@/services/bookings.service";

/** Lifecycle stages for the pipeline distribution bar (in flow order). */
const PIPELINE_STAGES: Array<{
  key: keyof BookingListSummaryTabs;
  label: string;
  color: string;
}> = [
  { key: "intake", label: "Intake", color: "#38bdf8" },
  { key: "in_approval", label: "Approval", color: "#f59e0b" },
  { key: "approved_contract", label: "Contract", color: "#8b5cf6" },
  { key: "payment", label: "Payment", color: "#fb923c" },
  { key: "operations", label: "Operations", color: "#14b8a6" },
  { key: "completed", label: "Completed", color: "#22c55e" },
];

const CARD_STYLE = {
  background: "var(--mantine-color-gray-0)",
  border: "1px solid var(--mantine-color-gray-2)",
} as const;

export interface BookingRequestsHeaderProps {
  metrics?: BookingListSummaryMetrics;
  tabs?: BookingListSummaryTabs;
  loading?: boolean;
  isFetching?: boolean;
  onCreate: () => void;
  onRefresh: () => void;
}

export function BookingRequestsHeader({
  metrics,
  tabs,
  loading,
  isFetching,
  onCreate,
  onRefresh,
}: BookingRequestsHeaderProps) {
  const val = (n?: number) => (loading ? "—" : (n ?? 0));

  return (
    <Stack gap="lg">
      <Group justify="flex-end" gap="sm">
        <Button color="edr-green" radius="lg" leftSection={<Plus size={18} />} onClick={onCreate}>
          Create booking
        </Button>
        <Button
          variant="default"
          radius="lg"
          leftSection={<RefreshCw size={16} />}
          loading={isFetching}
          onClick={onRefresh}
        >
          Refresh
        </Button>
      </Group>

      <Group grow gap="md" align="stretch" wrap="wrap">
        <HeroStat
          icon={LayoutList}
          label="In queue"
          value={val(metrics?.inQueue)}
          hint="Matching current filter"
          accent="gold"
          variant="area"
        />
        <HeroStat
          icon={Clock}
          label="Needs action"
          value={val(metrics?.needsAction)}
          hint="Submitted or pending"
          ratio={metrics?.inQueue ? (metrics.needsAction ?? 0) / metrics.inQueue : 0}
          accent="orange"
        />
        <HeroStat
          icon={AlertTriangle}
          label="Urgent"
          value={val(metrics?.urgent)}
          hint="High priority score"
          ratio={metrics?.inQueue ? (metrics.urgent ?? 0) / metrics.inQueue : 0}
          accent="rose"
        />
        <HeroStat
          icon={CheckCircle2}
          label="Completed"
          value={val(tabs?.completed)}
          hint="Fully executed"
          accent="gold"
          variant="line"
        />
      </Group>

      {/* {tabs ? <PipelineBar tabs={tabs} /> : null} */}
    </Stack>
  );
}

/**
 * KPI card matching the overview style: icon chip + value + label, with a mini
 * graph at the bottom. Ratio cards show a ring; the rest show an area/line trend.
 */
function HeroStat({
  icon: Icon,
  label,
  value,
  hint,
  ratio,
  accent = "emerald",
  variant = "area",
}: {
  icon: LucideIcon;
  label: string;
  value: ReactNode;
  hint?: string;
  ratio?: number;
  accent?: OverviewAccent;
  variant?: "area" | "line";
}) {
  const [, accentDeep] = overviewAccentGradients[accent] ?? overviewAccentGradients.default;
  const chipBg = ACCENT_CHIP_BG[accent] ?? ACCENT_CHIP_BG.default;
  const pct = ratio != null ? Math.round(Math.min(1, Math.max(0, ratio)) * 100) : null;

  return (
    <Paper p="md" radius="lg" style={{ flex: "1 1 180px", minWidth: 160, ...CARD_STYLE }}>
      <Stack gap={8}>
        <Group gap="sm" wrap="nowrap" align="center">
          <Box
            style={{
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
              width: 40,
              height: 40,
              borderRadius: 11,
              background: chipBg,
              color: accentDeep,
              flexShrink: 0,
            }}
          >
            <Icon size={20} strokeWidth={2} />
          </Box>
          <Stack gap={1} style={{ minWidth: 0, flex: 1 }}>
            <Text fw={800} size="24px" lh={1.05} style={{ color: "#0f172a" }} truncate>
              {value}
            </Text>
            <Text size="xs" fw={600} c="dimmed" truncate>
              {label}
              {hint ? ` · ${pct != null ? `${pct}% of queue` : hint}` : ""}
            </Text>
          </Stack>
          {pct != null ? (
            <MiniRing pct={pct} accent={accent} size={44} stroke={5}>
              <Text size="10px" fw={800} style={{ color: accentDeep }}>
                {pct}%
              </Text>
            </MiniRing>
          ) : null}
        </Group>

        {pct == null ? (
          <MiniSparkline variant={variant} accent={accent} baseline={0.5} seed={label} height={22} />
        ) : null}
      </Stack>
    </Paper>
  );
}

function PipelineBar({ tabs }: { tabs: BookingListSummaryTabs }) {
  const segments = PIPELINE_STAGES.map((s) => ({ ...s, count: tabs[s.key] ?? 0 }));
  const total = segments.reduce((sum, s) => sum + s.count, 0);

  return (
    <Paper p="md" radius="lg" style={CARD_STYLE}>
      <Group justify="space-between" mb={10}>
        <Text size="sm" fw={700} style={{ color: "#0f172a" }}>
          Booking pipeline
        </Text>
        <Text size="xs" c="dimmed">
          {total} active
        </Text>
      </Group>

      <Box
        style={{
          display: "flex",
          height: 14,
          borderRadius: 999,
          overflow: "hidden",
          background: "var(--mantine-color-gray-2)",
          gap: 2,
        }}
      >
        {total > 0 ? (
          segments.map((s) =>
            s.count > 0 ? (
              <Box
                key={s.key}
                title={`${s.label}: ${s.count}`}
                style={{ width: `${(s.count / total) * 100}%`, background: s.color, transition: "width 200ms ease" }}
              />
            ) : null,
          )
        ) : (
          <Box style={{ width: "100%" }} />
        )}
      </Box>

      <Group gap="md" mt={10} wrap="wrap">
        {segments.map((s) => (
          <Group key={s.key} gap={6} wrap="nowrap">
            <Box style={{ width: 9, height: 9, borderRadius: 3, background: s.color }} />
            <Text size="xs" c="dimmed">
              {s.label}
            </Text>
            <Text size="xs" fw={700} style={{ color: "#0f172a" }}>
              {s.count}
            </Text>
          </Group>
        ))}
      </Group>
    </Paper>
  );
}