import {
  CheckCircle2,
  Eye,
  MoreHorizontal,
  Pencil,
  Send,
  Trash2,
} from "lucide-react";
import { ActionIcon, Button, Group, Menu, Tooltip } from "@mantine/core";

import type { RuleEngineResourceConfig } from "@/pages/ruleEngine/config/resources";
import type { RuleEngineRecord } from "@/types/rule-engine";

export interface RuleEngineRecordActionsProps {
  record: RuleEngineRecord;
  config: RuleEngineResourceConfig;
  onEdit: (record: RuleEngineRecord) => void;
  onDelete: (record: RuleEngineRecord) => void;
  onViewChain?: () => void;
  onSubmitRate?: (id: string) => void;
  onApproveRate?: (record: RuleEngineRecord) => void;
  layout?: "row" | "compact";
  readOnly?: boolean;
}

const actionGroupStyle = {
  display: "inline-flex",
  alignItems: "center",
  gap: 4,
  borderRadius: 10,
  border: "1px solid var(--mantine-color-gray-2)",
  background: "var(--mantine-color-gray-0)",
  padding: 3,
} as const;

const RuleEngineRecordActions = ({
  record,
  config,
  onEdit,
  onDelete,
  onViewChain,
  onSubmitRate,
  onApproveRate,
  layout = "row",
  readOnly = false,
}: RuleEngineRecordActionsProps) => {
  const status = String(record.status ?? "");
  const hasRateActions =
    config.slug === "rates" && (status === "DRAFT" || status === "PENDING_APPROVAL");
  const showViewChain = config.slug === "approval-rules" && onViewChain;

  if (readOnly) {
    return showViewChain ? (
      <Tooltip label="View approval chain">
        <ActionIcon
          variant="subtle"
          color="gray"
          size="md"
          radius="md"
          onClick={onViewChain}
          aria-label="View approval chain"
        >
          <Eye size={16} />
        </ActionIcon>
      </Tooltip>
    ) : null;
  }

  if (layout === "compact") {
    return (
      <Group gap={6} wrap="nowrap" justify="flex-end">
        {showViewChain ? (
          <Button
            variant="light"
            color="gray"
            size="compact-sm"
            radius="md"
            onClick={onViewChain}
            leftSection={<Eye size={14} />}
          >
            Chain
          </Button>
        ) : null}

        {hasRateActions ? (
          <RateActionsMenu
            status={status}
            onSubmitRate={onSubmitRate}
            onApproveRate={onApproveRate}
            record={record}
            compact
          />
        ) : null}

        <div style={actionGroupStyle}>
          <Button
            variant="subtle"
            color="gray"
            size="compact-sm"
            radius="md"
            onClick={() => onEdit(record)}
            leftSection={<Pencil size={14} />}
            styles={{ root: { fontWeight: 600 } }}
          >
            Edit
          </Button>
          <Button
            variant="subtle"
            color="red"
            size="compact-sm"
            radius="md"
            onClick={() => onDelete(record)}
            leftSection={<Trash2 size={14} />}
            styles={{ root: { fontWeight: 600 } }}
          >
            Delete
          </Button>
        </div>
      </Group>
    );
  }

  return (
    <Group gap={6} wrap="nowrap" justify="flex-end">
      {showViewChain ? (
        <Tooltip label="View approval chain">
          <ActionIcon
            variant="light"
            color="gray"
            size="md"
            radius="md"
            onClick={onViewChain}
            aria-label="View approval chain"
            style={{
              border: "1px solid var(--mantine-color-gray-2)",
              background: "white",
            }}
          >
            <Eye size={16} />
          </ActionIcon>
        </Tooltip>
      ) : null}

      {hasRateActions ? (
        <RateActionsMenu
          status={status}
          onSubmitRate={onSubmitRate}
          onApproveRate={onApproveRate}
          record={record}
        />
      ) : null}

      <div style={actionGroupStyle}>
        <Tooltip label="Edit">
          <ActionIcon
            variant="subtle"
            color="gray"
            size="md"
            radius="md"
            onClick={() => onEdit(record)}
            aria-label="Edit record"
            style={{
              background: "white",
            }}
          >
            <Pencil size={16} />
          </ActionIcon>
        </Tooltip>
        <Tooltip label="Delete">
          <ActionIcon
            variant="subtle"
            color="red"
            size="md"
            radius="md"
            onClick={() => onDelete(record)}
            aria-label="Delete record"
            style={{
              background: "var(--mantine-color-red-0)",
            }}
          >
            <Trash2 size={16} />
          </ActionIcon>
        </Tooltip>
      </div>
    </Group>
  );
};

function RateActionsMenu({
  status,
  onSubmitRate,
  onApproveRate,
  record,
  compact = false,
}: {
  status: string;
  onSubmitRate?: (id: string) => void;
  onApproveRate?: (record: RuleEngineRecord) => void;
  record: RuleEngineRecord;
  compact?: boolean;
}) {
  return (
    <Menu position="bottom-end" shadow="md" withinPortal>
      <Menu.Target>
        {compact ? (
          <Button
            variant="light"
            color="gray"
            size="compact-sm"
            radius="md"
            leftSection={<MoreHorizontal size={14} />}
          >
            More
          </Button>
        ) : (
          <Tooltip label="More actions">
            <ActionIcon
              variant="light"
              color="gray"
              size="md"
              radius="md"
              aria-label="More actions"
              style={{
                border: "1px solid var(--mantine-color-gray-2)",
                background: "white",
              }}
            >
              <MoreHorizontal size={16} />
            </ActionIcon>
          </Tooltip>
        )}
      </Menu.Target>
      <Menu.Dropdown>
        {status === "DRAFT" && onSubmitRate ? (
          <Menu.Item
            leftSection={<Send size={14} />}
            onClick={() => onSubmitRate(record.id)}
          >
            Submit for approval
          </Menu.Item>
        ) : null}
        {status === "PENDING_APPROVAL" && onApproveRate ? (
          <Menu.Item
            leftSection={<CheckCircle2 size={14} />}
            onClick={() => onApproveRate(record)}
          >
            Approve
          </Menu.Item>
        ) : null}
      </Menu.Dropdown>
    </Menu>
  );
}

export default RuleEngineRecordActions;
