"use client";

import { useEffect, useMemo, useRef, useState, useCallback } from "react";
import { createPortal } from "react-dom";
import { toast } from "sonner";
import { useAppDispatch, useAppSelector } from "@/state/hooks";
import {
  fetchNewProducts,
  fetchProductById,
  createProductAction,
  updateProductAction,
  updateProductStatusAction,
  deleteProductsAction,
  setNewPage,
  setNewLimit,
  setDetailsProduct,
  clearDetailsProduct,
  mapStatusToApi,
} from "@/state/product/productSlice";
import { categoryService } from "@/state/category/categoryService";
import type { CatalogProduct, CatalogProductStatus, ProductDraft } from "@/types/product";
import type { CategoryNode } from "@/types/category";
import { getImageUrl } from "@/lib/imageUrl";
import { formatListingNo } from "@/lib/listingNo";
import DataTable, { type Column } from "../common/DataTable";
import ExportDropdown from "../common/ExportDropdown";
import FiltersDropdown from "../common/FiltersDropdown";
import ProductDetailsDrawer from "../common/ProductDetailsDrawer";
import ProductImage from "../common/ProductImage";
import StatusBadge from "../common/StatusBadge";
import SuccessModal from "../common/SuccessModal";
import type { ExportColumn } from "../common/export-utils";
import {
  EyeViewIcon,
  ExportArrowIcon,
  KebabIcon,
  LensThumb,
  PencilIcon,
  PlusCircleIcon,
  PowerIcon,
  TrashIcon,
} from "../dashboard/icons";
import DeleteProductModal from "../sellers/DeleteProductModal";
import AddProductModal, { type CategoryOption } from "./AddProductModal";
import InactivateProductModal from "./InactivateProductModal";

const statusColors: Record<CatalogProductStatus, { text: string; dot: string }> = {
  Active: { text: "#16A34A", dot: "#16A34A" },
  Inactive: { text: "#667085", dot: "#667085" },
  "Sold out": { text: "#1657D9", dot: "#1657D9" },
};

function toDraft(product: CatalogProduct): ProductDraft {
  const cleanPrice = String(product.rawPrice ?? product.price ?? "").replace(/[^0-9.]/g, "");
  return {
    id: product.id,
    categoryId: product.categoryId || "",
    category: product.category,
    title: product.title || product.product || "",
    description: product.rawDescription || "",
    manufacturer: product.brand === "-" ? "" : product.brand,
    modelNumber: product.modelNumber === "-" ? "" : product.modelNumber,
    price: cleanPrice,
    currency: product.currency === "Australian Dollar" || !product.currency ? "AUD" : product.currency,
    stockUnit: product.stock !== undefined ? String(product.stock) : "",
    negotiable: Boolean(product.negotiable),
    accessoriesIncluded: product.accessoriesIncluded === "-" ? "" : product.accessoriesIncluded,
    optionalAccessories: product.optionalAccessories || "",
    // Read the real notes field: `description` is now display text that may be the description itself
    detailedNotes: product.detailedNotes || "",
    images: product.images || [],
  };
}

const exportColumns: ExportColumn<CatalogProduct>[] = [
  { key: "listingNo", label: "Product No.", getValue: (p) => formatListingNo(p.listingNo) },
  { key: "product", label: "Product" },
  { key: "brand", label: "Brand" },
  { key: "category", label: "Category" },
  { key: "price", label: "Price (AUD)" },
  { key: "stock", label: "Stock" },
  { key: "quotes", label: "Quotes" },
  { key: "status", label: "Status" },
];

function extractCategoryOptions(nodes: CategoryNode[], parentPath = ""): CategoryOption[] {
  const options: CategoryOption[] = [];
  for (const node of nodes) {
    // An inactive category (and everything under it) can't be picked for a product
    if (node.status && node.status !== "active") continue;

    const isNavOrRoot = node.type === "root" || node.type === "navigation" || node.level <= 0;
    const currentPath = isNavOrRoot ? "" : parentPath ? `${parentPath} > ${node.name}` : node.name;
    if (!isNavOrRoot && node.id) {
      options.push({ id: node.id, name: currentPath || node.name });
    }
    const children = node.children || node.categories || node.subCategories || node.subSubCategories || [];
    if (Array.isArray(children) && children.length > 0) {
      options.push(...extractCategoryOptions(children, currentPath));
    }
  }
  return options;
}

export default function ProductsManagementTable({
  title = "Products Management",
  subtitle = "Manage admin-listed new products",
  fileName = "new-products",
}: {
  title?: string;
  subtitle?: string;
  data?: CatalogProduct[];
  fileName?: string;
}) {
  const dispatch = useAppDispatch();
  const {
    newProducts: products,
    newLoading: loading,
    newPage: page,
    newLimit: pageSize,
    newTotalPages: totalPages,
    newTotalResults: totalResults,
    detailsProduct,
    actionLoading,
    deleteLoading,
  } = useAppSelector((state) => state.product);

  const [selected, setSelected] = useState<Set<string>>(new Set());
  const [openMenu, setOpenMenu] = useState<string | null>(null);
  const [exportOpen, setExportOpen] = useState(false);
  const [bulkExportOpen, setBulkExportOpen] = useState(false);
  const [filtersOpen, setFiltersOpen] = useState(false);

  // Category options scoped strictly to New Products navigation
  const [newCategoryOptions, setNewCategoryOptions] = useState<CategoryOption[]>([]);

  // Modals state
  const [deleteIds, setDeleteIds] = useState<string[] | null>(null);
  const [inactivateIds, setInactivateIds] = useState<string[] | null>(null);
  const [productModal, setProductModal] = useState<{ mode: "add" } | { mode: "edit"; product: CatalogProduct } | null>(
    null
  );
  const [successModal, setSuccessModal] = useState<{ title: string; lines: string[] } | null>(null);

  // Search & Filters state
  const [search, setSearch] = useState("");
  const [debouncedSearch, setDebouncedSearch] = useState("");
  const [statusFilter, setStatusFilter] = useState<string>("All");
  const [filterValues, setFilterValues] = useState<{
    minPrice?: number;
    maxPrice?: number;
    minStock?: number;
    maxStock?: number;
    minQuotes?: number;
    maxQuotes?: number;
  }>({});

  // Fetch only categories belonging to the "new" navigation
  useEffect(() => {
    let isMounted = true;
    categoryService
      .getCategoryTree("new")
      .then((res) => {
        if (!isMounted) return;
        const rawTree = res.data?.data || res.data || [];
        const treeArray = Array.isArray(rawTree) ? rawTree : [rawTree];
        const opts = extractCategoryOptions(treeArray);
        setNewCategoryOptions(opts);
      })
      .catch((err) => {
        console.error("Failed to load new product categories", err);
      });
    return () => {
      isMounted = false;
    };
  }, []);

  // Debounce search
  useEffect(() => {
    const handler = setTimeout(() => {
      setDebouncedSearch(search.trim());
      dispatch(setNewPage(1));
    }, 350);
    return () => clearTimeout(handler);
  }, [search, dispatch]);

  // Load new products
  const loadData = useCallback(() => {
    dispatch(
      fetchNewProducts({
        page,
        limit: pageSize,
        search: debouncedSearch || undefined,
        status: mapStatusToApi(statusFilter),
        minPrice: filterValues.minPrice,
        maxPrice: filterValues.maxPrice,
        minStock: filterValues.minStock,
        maxStock: filterValues.maxStock,
        minQuotes: filterValues.minQuotes,
        maxQuotes: filterValues.maxQuotes,
      })
    );
  }, [dispatch, page, pageSize, debouncedSearch, statusFilter, filterValues]);

  useEffect(() => {
    loadData();
  }, [loadData]);

  const selectedProducts = useMemo(
    () => products.filter((product) => selected.has(product.id)),
    [products, selected]
  );

  // Save (Create / Edit) Product
  const handleSaveProduct = async (draft: ProductDraft, files: File[]) => {
    try {
      const formData = new FormData();
      formData.append("title", draft.title.trim());
      formData.append("description", draft.description.trim());

      const cleanPrice = draft.price.replace(/[^0-9.]/g, "");
      formData.append("price", cleanPrice || "0");
      // All listings are priced in AUD (the API rejects any other currency)
      formData.append("currency", "AUD");

      if (draft.stockUnit !== "") {
        formData.append("stockUnit", draft.stockUnit);
      }
      formData.append("isPriceNegotiable", String(draft.negotiable));

      if (draft.manufacturer) formData.append("manufacturer", draft.manufacturer.trim());
      if (draft.modelNumber) formData.append("modelNumber", draft.modelNumber.trim());
      if (draft.accessoriesIncluded) formData.append("accessoriesIncluded", draft.accessoriesIncluded.trim());
      if (draft.optionalAccessories) formData.append("optionalAccessories", draft.optionalAccessories.trim());
      if (draft.detailedNotes) formData.append("detailedNotes", draft.detailedNotes.trim());

      // Only pass valid 24-hex ObjectId for categoryId
      if (draft.categoryId && /^[0-9a-fA-F]{24}$/.test(draft.categoryId)) {
        formData.append("categoryId", draft.categoryId);
      }

      // Append uploaded image files
      files.forEach((file) => {
        formData.append("images", file);
      });

      if (productModal?.mode === "edit") {
        // In edit mode, also keep remaining existing images
        if (draft.images && draft.images.length > 0) {
          formData.append("images", JSON.stringify(draft.images));
        }

        await dispatch(
          updateProductAction({
            id: productModal.product.id,
            data: formData,
          })
        ).unwrap();

        setProductModal(null);
        setSuccessModal({
          title: "Product Updated Successfully",
          lines: ["Your product information has been refreshed successfully.", "All changes are now live."],
        });
      } else {
        await dispatch(createProductAction(formData)).unwrap();

        setProductModal(null);
        setSuccessModal({
          title: "Product Added Successfully",
          lines: [
            "Your product has been added successfully.",
            "All your changes have been saved and are now live on your catalog.",
          ],
        });
      }

      loadData();
    } catch (err: any) {
      toast.error(err || "Failed to save product");
    }
  };

  // Delete Action
  const handleDeleteConfirm = async () => {
    if (!deleteIds || deleteIds.length === 0) return;
    try {
      await dispatch(deleteProductsAction(deleteIds)).unwrap();
      toast.success(
        deleteIds.length > 1
          ? `${deleteIds.length} products deleted successfully`
          : "Product deleted successfully"
      );
      setSelected((prev) => {
        const next = new Set(prev);
        deleteIds.forEach((id) => next.delete(id));
        return next;
      });
      if (detailsProduct && deleteIds.includes(detailsProduct.id)) {
        dispatch(clearDetailsProduct());
      }
      setDeleteIds(null);
      loadData();
    } catch (err: any) {
      toast.error(err || "Failed to delete product(s)");
    }
  };

  // Inactivate Action
  const handleInactivateConfirm = async () => {
    if (!inactivateIds || inactivateIds.length === 0) return;
    try {
      await dispatch(
        updateProductStatusAction({
          ids: inactivateIds,
          status: "inactive",
        })
      ).unwrap();

      toast.success(
        inactivateIds.length > 1
          ? `${inactivateIds.length} products set to inactive`
          : "Product set to inactive"
      );

      setSelected((prev) => {
        const next = new Set(prev);
        inactivateIds.forEach((id) => next.delete(id));
        return next;
      });
      setInactivateIds(null);
      loadData();
    } catch (err: any) {
      toast.error(err || "Failed to inactivate product(s)");
    }
  };

  // Reactivate Action
  const handleReactivate = async (ids: string[]) => {
    try {
      await dispatch(
        updateProductStatusAction({
          ids,
          status: "active",
        })
      ).unwrap();
      toast.success("Product reactivated successfully");
      loadData();
    } catch (err: any) {
      toast.error(err || "Failed to reactivate product");
    }
  };


  // Filter handlers
  const handleApplyFilters = (
    statusSet: Set<string>,
    ranges: Record<string, { min: number; max: number }>
  ) => {
    const chosenStatus = Array.from(statusSet)[0] || "All";
    setStatusFilter(chosenStatus);
    setFilterValues({
      minPrice: ranges.price?.min,
      maxPrice: ranges.price?.max,
      minStock: ranges.stock?.min,
      maxStock: ranges.stock?.max,
      minQuotes: ranges.quotes?.min,
      maxQuotes: ranges.quotes?.max,
    });
    dispatch(setNewPage(1));
    setFiltersOpen(false);
  };

  const handleClearFilters = () => {
    setStatusFilter("All");
    setFilterValues({});
    dispatch(setNewPage(1));
    setFiltersOpen(false);
  };

  const handleViewDetails = (product: CatalogProduct) => {
    setOpenMenu(null);
    dispatch(setDetailsProduct(product));
    dispatch(fetchProductById(product.id));
  };

  const columns: Column<CatalogProduct>[] = [
    {
      key: "id",
      label: "ID",
      sortable: true,
      sortValue: (product) => Number(product.listingNo) || 0,
      render: (product) => (
        <span className="text-[14px] font-medium text-[#1657D9]">{formatListingNo(product.listingNo)}</span>
      ),
    },
    {
      key: "product",
      label: "Product",
      render: (product) => {
        return (
          <div className="flex items-center gap-2.5">
            <ProductImage
              src={product.images?.[0]}
              alt={product.product}
              className="h-8 w-8 shrink-0 rounded-lg object-cover border border-[#E4E7EC]"
            />
            <span className="max-w-[220px] truncate text-[14px] font-medium text-[#101828]" title={product.product}>
              {product.product}
            </span>
          </div>
        );
      },
    },
    {
      key: "brand",
      label: "Brand",
      sortable: true,
      render: (product) => <span className="whitespace-nowrap text-[13px] text-[#475467]">{product.brand}</span>,
    },
    {
      key: "category",
      label: "Category",
      sortable: true,
      render: (product) => <span className="whitespace-nowrap text-[13px] text-[#475467]">{product.category}</span>,
    },
    {
      key: "price",
      label: "Price (AUD)",
      sortable: true,
      render: (product) => (
        <span className="whitespace-nowrap text-[13px] font-medium text-[#101828]">{product.price}</span>
      ),
    },
    {
      key: "stock",
      label: "Stock",
      sortable: true,
      render: (product) => <span className="whitespace-nowrap text-[13px] text-[#475467]">{product.stock}</span>,
    },
    {
      key: "quotes",
      label: "Quotes",
      sortable: true,
      render: (product) => <span className="whitespace-nowrap text-[13px] text-[#475467]">{product.quotes}</span>,
    },
    {
      key: "status",
      label: "Status",
      sortable: true,
      render: (product) => <StatusBadge status={product.status} colorMap={statusColors} />,
    },
  ];

  return (
    <div className="min-w-0">
      <div className="flex flex-wrap items-start justify-between gap-3">
        <div>
          <h1 className="text-[20px] font-bold text-[#101828]">{title}</h1>
          <p className="mt-1 text-[13px] text-[#667085]">
            {subtitle} ({totalResults} total)
          </p>
        </div>
        <button
          type="button"
          onClick={() => setProductModal({ mode: "add" })}
          className="flex h-10 items-center gap-2 rounded-lg bg-[#1657D9] px-4 text-[13px] font-medium text-white transition-colors hover:bg-[#1445B0]"
        >
          <PlusCircleIcon />
          Add New Product
        </button>
      </div>

      <div className="mt-6">
        <DataTable<CatalogProduct>
          columns={columns}
          data={products}
          rowKey={(product) => product.id}
          searchValue={search}
          onSearchChange={setSearch}
          searchPlaceholder="Search by product, brand, or #listing..."
          showFilters
          onFiltersClick={() => setFiltersOpen((prev) => !prev)}
          filtersSlot={
            <FiltersDropdown
              open={filtersOpen}
              onClose={() => setFiltersOpen(false)}
              statusOptions={["All", "Active", "Inactive", "Sold out"]}
              initialStatus={new Set([statusFilter])}
              ranges={[
                {
                  key: "price",
                  label: "Price Range",
                  min: 0,
                  max: 20000,
                  initialMin: filterValues.minPrice ?? 0,
                  initialMax: filterValues.maxPrice ?? 20000,
                  format: (value) => `$${value.toFixed(0)}`,
                },
                {
                  key: "stock",
                  label: "Stock Range",
                  min: 0,
                  max: 100,
                  initialMin: filterValues.minStock ?? 0,
                  initialMax: filterValues.maxStock ?? 100,
                },
                {
                  key: "quotes",
                  label: "Quotes Range",
                  min: 0,
                  max: 100,
                  initialMin: filterValues.minQuotes ?? 0,
                  initialMax: filterValues.maxQuotes ?? 100,
                },
              ]}
              onApply={handleApplyFilters}
              onClear={handleClearFilters}
            />
          }
          showExport
          onExportClick={() => setExportOpen((prev) => !prev)}
          exportSlot={
            <ExportDropdown<CatalogProduct>
              open={exportOpen}
              onClose={() => setExportOpen(false)}
              allRows={products}
              selectedRows={selectedProducts}
              columns={exportColumns}
              fileName={fileName}
              title={title}
            />
          }
          selectedIds={selected}
          onSelectionChange={setSelected}
          pageSize={pageSize}
          onPageSizeChange={(size) => {
            dispatch(setNewLimit(size));
          }}
          externalPagination={{
            currentPage: page,
            totalPages: Math.max(1, totalPages),
            onPageChange: (newPage) => dispatch(setNewPage(newPage)),
          }}
          renderRowActions={(product) => (
            <RowActionMenu
              open={openMenu === product.id}
              onToggle={() => setOpenMenu(openMenu === product.id ? null : product.id)}
              onClose={() => setOpenMenu(null)}
              status={product.status}
              onViewDetails={() => handleViewDetails(product)}
              onEdit={() => {
                setOpenMenu(null);
                setProductModal({ mode: "edit", product });
              }}
              onSetInactive={() => {
                setOpenMenu(null);
                setInactivateIds([product.id]);
              }}
              onReactivate={() => {
                setOpenMenu(null);
                handleReactivate([product.id]);
              }}
              onDelete={() => {
                setOpenMenu(null);
                setDeleteIds([product.id]);
              }}
            />
          )}
          renderBulkActionBar={() => (
            <>
              <button
                type="button"
                disabled={deleteLoading}
                onClick={() => setDeleteIds(Array.from(selected))}
                className="flex h-9 items-center gap-2 rounded-lg border border-[#DC2626] bg-white px-4 text-[13px] font-medium text-[#DC2626] transition-colors hover:bg-red-50 disabled:opacity-50"
              >
                <TrashIcon />
                Delete Products ({selected.size})
              </button>
              <button
                type="button"
                disabled={actionLoading}
                onClick={() => {
                  const eligibleIds = Array.from(selected).filter((id) => {
                    const prod = products.find((p) => p.id === id);
                    return prod && prod.status !== "Sold out";
                  });
                  if (eligibleIds.length === 0) {
                    toast.error("Selected products are already sold out and cannot be changed.");
                    return;
                  }
                  if (eligibleIds.length < selected.size) {
                    toast.info(`Note: ${selected.size - eligibleIds.length} sold-out product(s) will be skipped.`);
                  }
                  setInactivateIds(eligibleIds);
                }}
                className="flex h-9 items-center gap-2 rounded-lg border border-[#D0D5DD] bg-white px-4 text-[13px] font-medium text-[#344054] transition-colors hover:bg-[#F5F7F9] disabled:opacity-50"
              >
                <PowerIcon />
                Inactive Products ({selected.size})
              </button>
              <div className="relative">
                <button
                  type="button"
                  onClick={() => setBulkExportOpen((prev) => !prev)}
                  className="flex h-9 items-center gap-2 rounded-lg border border-[#1657D9] bg-white px-4 text-[13px] font-medium text-[#1657D9] transition-colors hover:bg-blue-50"
                >
                  <ExportArrowIcon />
                  Export Selection
                </button>
                <ExportDropdown<CatalogProduct>
                  open={bulkExportOpen}
                  onClose={() => setBulkExportOpen(false)}
                  allRows={products}
                  selectedRows={selectedProducts}
                  columns={exportColumns}
                  fileName={`${fileName}-selection`}
                  title={title}
                />
              </div>
            </>
          )}
        />
      </div>

      <ProductDetailsDrawer
        product={detailsProduct}
        open={detailsProduct !== null}
        onClose={() => dispatch(clearDetailsProduct())}
        footer={
          <div className="flex items-center justify-end gap-3">
            <button
              type="button"
              onClick={() => {
                if (detailsProduct) setDeleteIds([detailsProduct.id]);
              }}
              style={{ width: "137px" }}
              className="rounded-lg bg-[#F5F7F9] px-3 py-2.5 text-center text-[13px] font-medium text-[#DC2626] transition-colors hover:bg-[#F2F4F7]"
            >
              Delete Product
            </button>
            {detailsProduct?.status === "Active" ? (
              <button
                type="button"
                onClick={() => {
                  if (detailsProduct) setInactivateIds([detailsProduct.id]);
                }}
                style={{ width: "137px" }}
                className="rounded-lg bg-[#F5F7F9] px-3 py-2.5 text-center text-[13px] font-medium text-[#1657D9] transition-colors hover:bg-[#F2F4F7]"
              >
                Inactive Product
              </button>
            ) : detailsProduct?.status === "Inactive" ? (
              <button
                type="button"
                onClick={() => {
                  if (detailsProduct) handleReactivate([detailsProduct.id]);
                }}
                style={{ width: "137px" }}
                className="rounded-lg bg-[#F5F7F9] px-3 py-2.5 text-center text-[13px] font-medium text-[#16A34A] transition-colors hover:bg-[#F2F4F7]"
              >
                Reactivate Product
              </button>
            ) : null}
            {/* Mark Sold button removed: stock depletes automatically via quote fulfillment */}
            <button
              type="button"
              onClick={() => {
                if (detailsProduct) {
                  const target = detailsProduct;
                  dispatch(clearDetailsProduct());
                  setProductModal({ mode: "edit", product: target });
                }
              }}
              style={{ width: "137px" }}
              className="rounded-lg bg-[#F5F7F9] px-3 py-2.5 text-center text-[13px] font-medium text-[#1657D9] transition-colors hover:bg-[#F2F4F7]"
            >
              Edit Product
            </button>
          </div>
        }
      />

      <DeleteProductModal
        open={deleteIds !== null}
        count={deleteIds?.length ?? 0}
        onClose={() => setDeleteIds(null)}
        onConfirm={handleDeleteConfirm}
      />

      <InactivateProductModal
        open={inactivateIds !== null}
        count={inactivateIds?.length ?? 0}
        onClose={() => setInactivateIds(null)}
        onConfirm={handleInactivateConfirm}
      />

      {productModal !== null && (
        <AddProductModal
          open={productModal !== null}
          mode={productModal.mode}
          initialDraft={productModal.mode === "edit" ? toDraft(productModal.product) : undefined}
          onClose={() => setProductModal(null)}
          categories={newCategoryOptions}
          onSave={handleSaveProduct}
          loading={actionLoading}
        />
      )}

      <SuccessModal
        open={successModal !== null}
        onClose={() => setSuccessModal(null)}
        title={successModal?.title ?? ""}
        lines={successModal?.lines ?? []}
      />
    </div>
  );
}

function RowActionMenu({
  open,
  onToggle,
  onClose,
  status,
  onViewDetails,
  onEdit,
  onSetInactive,
  onReactivate,
  onDelete,
}: {
  open: boolean;
  onToggle: () => void;
  onClose: () => void;
  status: CatalogProductStatus;
  onViewDetails: () => void;
  onEdit: () => void;
  onSetInactive: () => void;
  onReactivate: () => void;
  onDelete: () => void;
  isNearBottom?: boolean;
}) {
  const triggerRef = useRef<HTMLButtonElement | null>(null);
  const menuRef = useRef<HTMLDivElement | null>(null);
  const [mounted, setMounted] = useState(false);
  const [coords, setCoords] = useState<{ top: number; left: number } | null>(null);

  useEffect(() => {
    setMounted(true);
  }, []);

  const updatePosition = useCallback(() => {
    if (!triggerRef.current) return;
    const rect = triggerRef.current.getBoundingClientRect();
    const menuHeight = status === "Active" || status === "Inactive" ? 175 : 130;
    const menuWidth = 180;

    const spaceBelow = window.innerHeight - rect.bottom;
    const spaceAbove = rect.top;

    let top: number;
    if (spaceBelow < menuHeight + 10 && spaceAbove >= menuHeight) {
      // Open upwards when there isn't enough space below but enough space above
      top = rect.top - menuHeight - 4;
    } else {
      // Open downwards
      top = rect.bottom + 4;
    }

    // Align right edge of menu to right edge of button
    let left = rect.right - menuWidth;
    if (left < 10) left = 10;
    if (left + menuWidth > window.innerWidth - 10) {
      left = window.innerWidth - menuWidth - 10;
    }

    setCoords({ top, left });
  }, [status]);

  useEffect(() => {
    if (open) {
      updatePosition();

      const handlePointerDown = (event: MouseEvent) => {
        const target = event.target as Node;
        if (
          triggerRef.current?.contains(target) ||
          menuRef.current?.contains(target)
        ) {
          return;
        }
        onClose();
      };

      const handleScroll = (event: Event) => {
        if (menuRef.current?.contains(event.target as Node)) return;
        onClose();
      };

      document.addEventListener("mousedown", handlePointerDown);
      window.addEventListener("scroll", handleScroll, true);
      window.addEventListener("resize", onClose);

      return () => {
        document.removeEventListener("mousedown", handlePointerDown);
        window.removeEventListener("scroll", handleScroll, true);
        window.removeEventListener("resize", onClose);
      };
    }
  }, [open, onClose, updatePosition]);

  const itemClass =
    "flex w-full items-center gap-2.5 whitespace-nowrap px-3.5 py-2 text-left text-[13px] font-medium hover:bg-[#F5F7F9] cursor-pointer transition-colors";

  return (
    <>
      <button
        ref={triggerRef}
        type="button"
        onClick={onToggle}
        className="flex h-7 w-7 items-center justify-center rounded-full text-[#667085] transition-colors hover:bg-[#F2F4F7] cursor-pointer"
      >
        <KebabIcon />
      </button>

      {open && mounted && coords && createPortal(
        <div
          ref={menuRef}
          style={{
            position: "fixed",
            top: `${coords.top}px`,
            left: `${coords.left}px`,
            zIndex: 9999,
          }}
          className="min-w-[180px] rounded-lg border border-[#E4E7EC] bg-white py-1.5 shadow-[0_10px_24px_rgba(15,23,42,0.18)]"
        >
          <button type="button" onClick={onViewDetails} className={`${itemClass} text-[#344054]`}>
            <EyeViewIcon />
            View Details
          </button>
          <button type="button" onClick={onEdit} className={`${itemClass} text-[#344054]`}>
            <PencilIcon />
            Edit Product
          </button>
          {status === "Active" ? (
            <button type="button" onClick={onSetInactive} className={`${itemClass} text-[#344054]`}>
              <PowerIcon />
              Inactive Product
            </button>
          ) : status === "Inactive" ? (
            <button type="button" onClick={onReactivate} className={`${itemClass} text-[#16A34A]`}>
              <PowerIcon />
              Reactivate Product
            </button>
          ) : null}
          <button type="button" onClick={onDelete} className={`${itemClass} text-[#DC2626]`}>
            <TrashIcon />
            Delete Product
          </button>
        </div>,
        document.body
      )}
    </>
  );
}