import { ActionIcon, Button, Group, Menu, Stack, Text } from "@mantine/core";
import {
  ArrowDownLeft,
  ArrowUpRight,
  Edit2,
  FileText,
  HelpCircle,
  MoreHorizontal,
  RefreshCw,
  XCircle,
} from "lucide-react";
import type { ReactNode } from "react";

import type { Freight } from "@edr/types";

import { bookingSubtitle, isDraftLike, isNegative } from "../utils";

export interface PageHeaderMenuActions {
  onViewContract?: () => void;
  onCancel?: () => void;
  onEdit?: () => void;
  onSupport?: () => void;
  onRebook?: () => void;
}

export function PageHeader({
  booking,
  actions,
  menuActions,
}: {
  booking: Freight.IBooking;
  actions?: ReactNode;
  menuActions?: PageHeaderMenuActions;
}) {
  const status = booking.status as string;
  const negative = isNegative(status);
  const draft = isDraftLike(status);

  const dotColor = negative ? "#C0392B" : draft ? "#94A3B8" : "#0EA371";
  const pillBg = negative ? "#FBEAE7" : draft ? "#F1F4F7" : "#ECF6F1";
  const pillBorder = negative ? "#F3C8C1" : draft ? "#E1E7EE" : "#CDEBDD";
  const pillText = negative ? "#A93226" : draft ? "#475569" : "#0A6F4D";
  const isExport = booking.tradeDirection === "EXPORT";

  const hasMenu = menuActions && Object.values(menuActions).some(Boolean);

  return (
    <Group justify="space-between" align="flex-start" wrap="wrap" gap="md">
      <Stack gap={8} miw={0}>
        <Group gap={12} align="center" wrap="wrap">
          <Text fz="26px" fw={800} c="#10202F">
            {booking.reference}
          </Text>

          <span
            className="inline-flex items-center gap-[7px] rounded-full px-3 py-1.5 text-xs font-bold"
            style={{ backgroundColor: pillBg, border: `1px solid ${pillBorder}`, color: pillText }}
          >
            <span
              className="shrink-0 rounded-full"
              style={{ width: 7, height: 7, backgroundColor: dotColor }}
            />
            {status.replace(/_/g, " ").replace(/\b\w/g, (m) => m.toUpperCase())}
          </span>

          <span className="inline-flex items-center gap-[6px] rounded-full bg-[#F1F4F7] px-[11px] py-1.5 text-xs font-bold text-[#475569]">
            {isExport ? <ArrowUpRight size={14} /> : <ArrowDownLeft size={14} />}
            {isExport ? "Export" : "Import"}
          </span>
        </Group>
        <Text fz="14px" c="#6B7C8E">
          {bookingSubtitle(booking)}
        </Text>
      </Stack>

      <Group gap={8} wrap="nowrap" align="center">
        {actions}
        {hasMenu && (
          <Menu shadow="md" radius={12} position="bottom-end">
            <Menu.Target>
              <ActionIcon
                variant="default"
                size={42}
                radius={10}
                aria-label="More options"
              >
                <MoreHorizontal size={18} />
              </ActionIcon>
            </Menu.Target>
            <Menu.Dropdown miw={210}>
              {menuActions!.onViewContract && (
                <Menu.Item
                  leftSection={<FileText size={15} />}
                  onClick={menuActions!.onViewContract}
                >
                  View contract
                </Menu.Item>
              )}
              {menuActions!.onEdit && (
                <Menu.Item
                  leftSection={<Edit2 size={15} />}
                  onClick={menuActions!.onEdit}
                >
                  Edit
                </Menu.Item>
              )}
              {menuActions!.onSupport && (
                <Menu.Item
                  leftSection={<HelpCircle size={15} />}
                  onClick={menuActions!.onSupport}
                >
                  Contact customer support
                </Menu.Item>
              )}
              {menuActions!.onRebook && (
                <Menu.Item
                  leftSection={<RefreshCw size={15} />}
                  onClick={menuActions!.onRebook}
                >
                  Rebook similar schedule
                </Menu.Item>
              )}
              {menuActions!.onCancel && (
                <>
                  <Menu.Divider />
                  <Menu.Item
                    color="red"
                    leftSection={<XCircle size={15} />}
                    onClick={menuActions!.onCancel}
                  >
                    Cancel booking
                  </Menu.Item>
                </>
              )}
            </Menu.Dropdown>
          </Menu>
        )}
      </Group>
    </Group>
  );
}

export function HeaderButton({
  label,
  icon,
  onClick,
  dark,
  green,
  disabled,
}: {
  label: string;
  icon: ReactNode;
  onClick?: () => void;
  dark?: boolean;
  green?: boolean;
  disabled?: boolean;
}) {
  return (
    <Button
      onClick={onClick}
      disabled={disabled}
      leftSection={icon}
      radius={10}
      variant={green || dark ? "filled" : "default"}
      color={green ? "edr-green" : dark ? "#0C1A2B" : undefined}
      styles={{
        root: { height: 42, paddingInline: 16 },
        label: {
          fontSize: 13,
          fontWeight: 700,
          color: green || dark ? "#fff" : "#10202F",
        },
      }}
    >
      {label}
    </Button>
  );
}
