import { Box, Button, Group, Skeleton, Stack, Text } from "@mantine/core";
import { memo } from "react";
import { useNavigate } from "react-router-dom";
import { Plus } from "lucide-react";
import type { Freight } from "@edr/types";
import { ContractCustomerAction } from "@/components/customer-actions/ContractCustomerAction";
import {
  ContractDocButton,
  ContractStatusBadge,
} from "@/pages/contracts/contract-ui";
import { Card } from "./Card";
import { EmptyState } from "./EmptyState";

const INK = "#10202F";
const MUTED = "#6B7C8E";
const BORDER = "#E6ECF2";

interface RecentContractsSectionProps {
  contracts: Freight.IContract[];
  bookings: Freight.IBooking[];
  isLoading: boolean;
}

export const RecentContractsSection = memo(function RecentContractsSection({
  contracts,
  bookings,
  isLoading,
}: RecentContractsSectionProps) {
  const navigate = useNavigate();

  return (
    <Card className="h-full" padding={28}>
      <Group justify="space-between" align="center" mb={18} wrap="nowrap">
        <Box>
          <Text fz={19} fw={800} c="edr-text">
            Recent Contracts
          </Text>
          <Text fz={13} c="edr-muted">
            Your freight agreements — ship against them after signing
          </Text>
        </Box>
        <Button
          variant="light"
          color="edr-green"
          radius="md"
          size="xs"
          leftSection={<Plus size={14} />}
          onClick={() => navigate("/contracts/new", { state: { fresh: true } })}
        >
          New
        </Button>
      </Group>

      {isLoading ? (
        <Stack gap={6}>
          {[1, 2, 3, 4].map((i) => (
            <Skeleton key={i} height={60} radius="md" />
          ))}
        </Stack>
      ) : contracts.length === 0 ? (
        <EmptyState message="No contracts yet. Create one to get started." />
      ) : (
        <Stack gap={10}>
          {contracts.map((c) => {
            const isGeneral = c.contractKind === "GENERAL";
            const isContainer = c.freightType === "CONTAINER";
            return (
              <Group
                key={c.id}
                justify="space-between"
                wrap="nowrap"
                gap={12}
                p="sm"
                style={{
                  borderRadius: 12,
                  border: `1px solid ${BORDER}`,
                  cursor: "pointer",
                }}
                onClick={() => navigate(`/contracts/${c.id}`)}
              >
                <Box style={{ minWidth: 0 }}>
                  <Text fz={14} fw={700} style={{ color: INK }} truncate>
                    {c.reference}
                  </Text>
                  <Text fz={12} style={{ color: MUTED }} truncate>
                    {isGeneral ? "General" : "One-Time"} ·{" "}
                    {isContainer ? "Container" : "Bulk"}
                  </Text>
                </Box>

                <Group gap={8} wrap="nowrap" style={{ flexShrink: 0 }}>
                  <ContractDocButton
                    contract={c}
                    onClick={(e) => e.stopPropagation()}
                  />
                  <ContractStatusBadge status={c.status} />
                  <ContractCustomerAction
                    contract={c}
                    bookings={bookings}
                    size="xs"
                  />
                </Group>
              </Group>
            );
          })}
        </Stack>
      )}
    </Card>
  );
});
