import { Edit2, Trash2, Eye, Users, MoreVertical } from "lucide-react";
import { ActionIcon, Menu, MenuItem, Tooltip } from "@mantine/core";
import { useNavigate } from "react-router-dom";

import type { FleetResourceConfig } from "@/pages/fleet/config/resources";
import type { FleetRecord } from "@/services/fleet/fleet.service";

export interface FleetRecordActionsProps {
  record: FleetRecord;
  config: FleetResourceConfig;
  onEdit: (record: FleetRecord) => void;
  onRemove: (record: FleetRecord) => void;
  onAssignDriver?: (record: FleetRecord) => void;
  layout?: "row" | "compact";
}

const FleetRecordActions = ({
  record,
  config,
  onEdit,
  onRemove,
  onAssignDriver,
  layout = "row",
}: FleetRecordActionsProps) => {
  const navigate = useNavigate();
  const removeLabel = config.removeActionLabel ?? "Delete";
  const showDetail = Boolean(config.detailPath && "id" in record);
  const isVehicle = config.slug === "vehicles";

  const handleDetail = () => {
    if (!config.detailPath || !("id" in record)) return;
    navigate(config.detailPath.replace(":id", String(record.id)));
  };

  if (layout === "compact") {
    return (
      <Menu position="bottom-end" withinPortal shadow="md">
        <Menu.Target>
          <Tooltip label="Actions">
            <ActionIcon variant="subtle" color="gray" size="sm">
              <MoreVertical size={16} strokeWidth={2} />
            </ActionIcon>
          </Tooltip>
        </Menu.Target>
        <Menu.Dropdown>
          {isVehicle && onAssignDriver ? (
            <MenuItem
              onClick={() => onAssignDriver(record)}
              leftSection={<Users size={14} strokeWidth={2} />}
            >
              Assign Driver
            </MenuItem>
          ) : null}
          <MenuItem
            onClick={() => onEdit(record)}
            leftSection={<Edit2 size={14} strokeWidth={2} />}
          >
            Edit
          </MenuItem>
          {showDetail ? (
            <MenuItem
              onClick={handleDetail}
              leftSection={<Eye size={14} strokeWidth={2} />}
            >
              View details
            </MenuItem>
          ) : null}
          <MenuItem
            color="red"
            onClick={() => onRemove(record)}
            leftSection={<Trash2 size={14} strokeWidth={2} />}
          >
            {removeLabel}
          </MenuItem>
        </Menu.Dropdown>
      </Menu>
    );
  }

  return (
    <Menu position="bottom-end" withinPortal shadow="md">
      <Menu.Target>
        <Tooltip label="Actions">
          <ActionIcon variant="subtle" color="gray" size="sm">
            <MoreVertical size={16} strokeWidth={2} />
          </ActionIcon>
        </Tooltip>
      </Menu.Target>
      <Menu.Dropdown>
        {isVehicle && onAssignDriver ? (
          <MenuItem
            onClick={() => onAssignDriver(record)}
            leftSection={<Users size={14} strokeWidth={2} />}
          >
            Assign Driver
          </MenuItem>
        ) : null}
        <MenuItem
          onClick={() => onEdit(record)}
          leftSection={<Edit2 size={14} strokeWidth={2} />}
        >
          Edit
        </MenuItem>
        {showDetail ? (
          <MenuItem
            onClick={handleDetail}
            leftSection={<Eye size={14} strokeWidth={2} />}
          >
            View details
          </MenuItem>
        ) : null}
        <MenuItem
          color="red"
          onClick={() => onRemove(record)}
          leftSection={<Trash2 size={14} strokeWidth={2} />}
        >
          {removeLabel}
        </MenuItem>
      </Menu.Dropdown>
    </Menu>
  );
};

export default FleetRecordActions;
