import {
  AlertCircle,
  FileSignature,
  ShieldCheck,
  UserCheck,
} from "lucide-react";
import { Grid, Stack } from "@mantine/core";

import { CONTRACT_STATUS_META } from "@/features/contracts/contract-status.config";
import type { IOverviewContractsTab } from "@/types/overview";
import { OverviewBookingTrendChart } from "../OverviewBookingTrendChart";
import { OverviewDonutChart } from "../OverviewDonutChart";
import { OverviewHorizontalBarChart } from "../OverviewHorizontalBarChart";
import { OverviewKpiStrip } from "../OverviewKpiStrip";
import { OverviewRecentContractsTable } from "../OverviewRecentContractsTable";

/** Human labels for the contract pipeline stages (see OVERVIEW_CONTRACT_PIPELINE on the API). */
const PIPELINE_STAGE_LABELS: Record<string, string> = {
  draft: "Draft",
  intake: "Intake",
  in_approval: "In approval",
  signing: "Signing",
  clearance: "Clearance",
  active: "Active",
  closed: "Closed",
  cancelled: "Cancelled",
};

function kindLabel(kind: string) {
  return kind === "GENERAL" ? "General" : kind === "ONE_TIME" ? "One-time" : kind;
}

interface OverviewContractsTabPanelProps {
  data: IOverviewContractsTab;
}

export function OverviewContractsTabPanel({
  data,
}: OverviewContractsTabPanelProps) {
  return (
    <Stack gap="lg">
      <OverviewKpiStrip
        items={[
          {
            label: "Active contracts",
            value: data.kpis.totalActive,
            icon: FileSignature,
            accent: "emerald",
            hint: "Currently in workflow",
          },
          {
            label: "Needs action",
            value: data.kpis.needsAction,
            icon: AlertCircle,
            accent: "amber",
            hint: "Awaiting your review",
          },
          {
            label: "In approval",
            value: data.kpis.inApproval,
            icon: UserCheck,
            accent: "sky",
            hint: "Pending sign-off",
          },
          {
            label: "In clearance",
            value: data.kpis.inClearance,
            icon: ShieldCheck,
            accent: "rose",
            hint: "Customs / documents",
          },
          {
            label: "Created today",
            value: data.kpis.createdToday,
            icon: FileSignature,
            hint: "New since midnight",
          },
        ]}
      />

      <Grid gap="md">
        <Grid.Col span={{ base: 12, lg: 7 }}>
          <OverviewBookingTrendChart data={data.contractTrend} />
        </Grid.Col>
        <Grid.Col span={{ base: 12, lg: 5 }}>
          <OverviewHorizontalBarChart
            title="Pipeline by stage"
            data={data.contractsByPipeline.map((item) => ({
              label: PIPELINE_STAGE_LABELS[item.stage] ?? item.stage,
              value: item.count,
            }))}
          />
        </Grid.Col>
      </Grid>

      <Grid gap="md">
        <Grid.Col span={{ base: 12, md: 6 }}>
          <OverviewDonutChart
            title="By status"
            data={data.contractsByStatus.map((item) => ({
              name: CONTRACT_STATUS_META[item.status]?.title ?? item.status,
              value: item.count,
            }))}
            emptyMessage="No contracts yet"
          />
        </Grid.Col>
        <Grid.Col span={{ base: 12, md: 6 }}>
          <OverviewDonutChart
            title="By kind"
            data={data.contractsByKind.map((item) => ({
              name: kindLabel(item.label),
              value: item.count,
            }))}
          />
        </Grid.Col>
      </Grid>

      <OverviewHorizontalBarChart
        title="By freight type"
        data={data.contractsByFreightType.map((item) => ({
          label: item.label === "CONTAINER" ? "Container" : "Bulk",
          value: item.count,
        }))}
      />

      <OverviewRecentContractsTable contracts={data.recentContracts} />
    </Stack>
  );
}
