import { productApi } from "@/api/product-api.service";
import TrigerOpenModal from "@/components/btn/trigger-open-model";
import { ImprovedToggleFilter } from "@/components/improved-toggle-filter";
import Loader from "@/components/loader";
import ProductModal from "@/components/product-modal";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Input } from "@/components/ui/input";
import { Popover, PopoverContent } from "@/components/ui/popover";
import { ScrollArea } from "@/components/ui/scroll-area";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import type { Noti } from "@/content/content";
import { removeFalsyValues } from "@/features/app";
import useActionPostMutation from "@/hooks/use-action-post-mutation";
import { useShadowPortal } from "@/hooks/use-shadow-portal";
import { mapToIPost, type IPost } from "@/lib/utils";
import { useMutation, useQuery } from "@tanstack/react-query";
import {
  ChevronLeft,
  ChevronRight,
  Edit,
  Eye,
  EyeOff,
  MoreHorizontal,
  Search,
} from "lucide-react";
import { useEffect, useMemo, useState } from "react";
import { toast } from "sonner";
import { useDebounce } from "use-debounce";

export default function Popup() {
  const portalContainer = useShadowPortal();

  const [searchTerm, setSearchTerm] = useState("");
  const [filter, setFilter] = useState<Record<string, any>>({});
  const [currentPage, setCurrentPage] = useState(1);

  const [search] = useDebounce(searchTerm, 400);

  const [open, setOpen] = useState(false);

  const queryKey = useMemo(
    () => ["products", { currentPage, search, filter }],
    [currentPage, search, filter]
  );

  // --- React Query fetch ---
  const { data: rawProducts, isFetching } = useQuery({
    queryKey,
    queryFn: async () => {
      const data = await productApi.apiRequest(
        "index",
        removeFalsyValues({
          skip: (currentPage - 1) * productApi.item_per_page,
          where: {
            productModelCode: searchTerm,
            status_listing:
              filter?.statusFilter === "all" ? undefined : filter.statusFilter,
          },
        })
      );
      return data;
    },
  });

  const { data: publistedProducts } = useQuery({
    queryKey: ["publised-products"],
    queryFn: async () => {
      const data = await productApi.apiRequest("getPublistedProducts", {});
      return data ?? [];
    },
    staleTime: 0, // luôn coi là stale -> gọi lại API mỗi lần mount
    refetchOnMount: "always",
  });

  const actionMutation = useActionPostMutation();

  const data: IPost[] = useMemo(() => {
    if (!rawProducts || !(rawProducts as any)?.data) return [];
    return (rawProducts as any)?.data.map((item: any) => mapToIPost(item));
  }, [rawProducts]);

  const formatPrice = (price: number) =>
    new Intl.NumberFormat("en-US", {
      style: "currency",
      currency: "USD",
    }).format(price);

  const clearFilters = () => {
    setSearchTerm("");
    setFilter({ statusFilter: "" });
    setCurrentPage(1);
  };

  const activeFiltersCount = [filter.statusFilter, searchTerm !== ""].filter(
    Boolean
  ).length;

  const totalPages = useMemo(() => {
    if (!(rawProducts as any)?.total) return 0;

    return Math.ceil((rawProducts as any).total / productApi.item_per_page);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [(rawProducts as any)?.total, productApi.item_per_page]);

  // --- reset page when filter changes ---
  // eslint-disable-next-line react-hooks/exhaustive-deps

  const from = useMemo(() => {
    return (currentPage - 1) * productApi.item_per_page + 1;
  }, [currentPage]);

  const to = useMemo(() => {
    return Math.min(
      currentPage * productApi.item_per_page,
      (rawProducts as any)?.total ?? 0
    );
  }, [currentPage, rawProducts]);

  const handleActionListing = async (data: IPost) => {
    actionMutation.mutate(data);
  };

  useEffect(() => {
    const interval = setInterval(async () => {
      try {
        const data = (await productApi.apiRequest("dequeue", {})) as Noti;

        if (data) {
          toast[data.type](data.title, {
            description: (
              <span className="!text-black font-medium">{data.message}</span>
            ),
          });
        }
      } catch (err) {
        console.error("Error in interval:", err);
      }
    }, 1000);

    return () => clearInterval(interval);
  }, []);

  useEffect(() => {
    let styleEl: HTMLStyleElement | null = null;

    if (open) {
      styleEl = document.createElement("style");
      styleEl.setAttribute("data-global-boxsizing", "true");
      styleEl.textContent = `
        *, *::before, *::after {
          box-sizing: border-box;
        }
      `;
      document.head.appendChild(styleEl);
    } else {
      const existing = document.head.querySelector(
        "style[data-global-boxsizing]"
      );
      if (existing) existing.remove();
    }

    return () => {
      if (styleEl && styleEl.parentNode) {
        styleEl.parentNode.removeChild(styleEl);
      }
    };
  }, [open]);
  return (
    <Popover open={open} onOpenChange={setOpen}>
      <TrigerOpenModal />

      <PopoverContent
        container={portalContainer as Element}
        side="left"
        align="end"
        className="w-auto "
      >
        <div className="space-y-4 h-[78vh] min-w-[638px] ex-root">
          <div className="flex items-center justify-between gap-4">
            <div className="relative flex-1 h-9">
              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
              <Input
                placeholder="Search..."
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
                className="pl-10"
              />
            </div>

            <ImprovedToggleFilter
              filter={filter as any}
              setFilter={setFilter}
              activeFiltersCount={activeFiltersCount}
              clearFilters={clearFilters}
            />
          </div>

          <div className="flex items-center justify-between w-full gap-8">
            <span>
              Showing {from}-{to} of {(rawProducts as any)?.total ?? 0} products
            </span>
            {totalPages > 1 && (
              <div className="flex items-center justify-end gap-2">
                <Button
                  variant="outline"
                  size="xs"
                  onClick={() =>
                    setCurrentPage((prev) => Math.max(1, prev - 1))
                  }
                  disabled={currentPage === 1}
                >
                  <ChevronLeft />
                  Previous
                </Button>

                <div className="flex items-center gap-1">
                  {totalPages <= 7 ? (
                    // Show all pages if 7 or fewer
                    Array.from({ length: totalPages }, (_, i) => (
                      <Button
                        key={i + 1}
                        variant={currentPage === i + 1 ? "default" : "outline"}
                        size="xs"
                        onClick={() => setCurrentPage(i + 1)}
                      >
                        {i + 1}
                      </Button>
                    ))
                  ) : (
                    // Show pages with ellipsis for more than 7 pages
                    <>
                      {/* First page */}
                      <Button
                        variant={currentPage === 1 ? "default" : "outline"}
                        size="xs"
                        onClick={() => setCurrentPage(1)}
                      >
                        1
                      </Button>

                      {/* Left ellipsis */}
                      {currentPage > 4 && (
                        <span className="px-2 text-muted-foreground">...</span>
                      )}

                      {/* Middle pages */}
                      {Array.from({ length: 3 }, (_, i) => {
                        let pageNum;
                        if (currentPage <= 4) {
                          pageNum = i + 2;
                        } else if (currentPage >= totalPages - 3) {
                          pageNum = totalPages - 4 + i;
                        } else {
                          pageNum = currentPage - 1 + i;
                        }

                        if (pageNum > 1 && pageNum < totalPages) {
                          return (
                            <Button
                              key={pageNum}
                              variant={
                                currentPage === pageNum ? "default" : "outline"
                              }
                              size="xs"
                              onClick={() => setCurrentPage(pageNum)}
                            >
                              {pageNum}
                            </Button>
                          );
                        }
                        return null;
                      }).filter(Boolean)}

                      {/* Right ellipsis */}
                      {currentPage < totalPages - 3 && (
                        <span className="px-2 text-muted-foreground">...</span>
                      )}

                      {/* Last page */}
                      <Button
                        variant={
                          currentPage === totalPages ? "default" : "outline"
                        }
                        size="xs"
                        onClick={() => setCurrentPage(totalPages)}
                      >
                        {totalPages}
                      </Button>
                    </>
                  )}
                </div>

                <Button
                  variant="outline"
                  size="xs"
                  onClick={() =>
                    setCurrentPage((prev) => Math.min(totalPages, prev + 1))
                  }
                  disabled={currentPage === totalPages}
                >
                  Next
                  <ChevronRight />
                </Button>
              </div>
            )}
          </div>

          <div className="rounded-md border overflow-x-auto relative">
            <ScrollArea className="h-[66vh] w-full">
              <Table className="h-fit">
                <TableHeader>
                  <TableRow>
                    <TableHead className="min-w-[200px]">Name</TableHead>
                    <TableHead className="w-[80px]">Price</TableHead>
                    <TableHead className="w-[80px]">Status</TableHead>
                    <TableHead className="w-[80px] text-center sticky right-0 bg-background border-l shadow-[-4px_0_8px_rgba(0,0,0,0.1)]">
                      Actions
                    </TableHead>
                  </TableRow>
                </TableHeader>

                <TableBody className="relative">
                  {isFetching && (
                    <TableRow>
                      <TableCell
                        colSpan={10}
                        className="text-center py-8 text-muted-foreground "
                      >
                        <div className="h-full flex items-center justify-center w-full">
                          <Loader />
                        </div>
                      </TableCell>
                    </TableRow>
                  )}

                  {data.length === 0 && !isFetching ? (
                    <TableRow>
                      <TableCell
                        colSpan={10}
                        className="text-center py-8 text-muted-foreground"
                      >
                        <div className="h-full flex items-center justify-center w-full">
                          <span> No products found</span>
                        </div>
                      </TableCell>
                    </TableRow>
                  ) : (
                    data.map((post) => {
                      const status = (publistedProducts as any)?.some(
                        (item: any) => item.title.includes(post.sku)
                      );

                      post.status = status;

                      return (
                        <TableRow key={post.id}>
                          <TableCell className="font-medium">
                            <div
                              className="truncate max-w-[340px] w-fit"
                              title={post.title}
                            >
                              {post.title}
                            </div>
                            <div
                              className="text-sm text-muted-foreground truncate max-w-[340px]"
                              title={post.description}
                            >
                              {post.description}
                            </div>
                          </TableCell>
                          <TableCell className="font-semibold">
                            {formatPrice(post.price)}
                          </TableCell>
                          <TableCell>
                            <Badge variant="secondary">
                              {post?.status ? "Listed" : "Unlisted"}
                            </Badge>
                          </TableCell>

                          <TableCell className="text-center sticky right-0 bg-background border-l shadow-[-4px_0_8px_rgba(0,0,0,0.1)]">
                            <DropdownMenu>
                              <DropdownMenuTrigger asChild>
                                <div className="w-full flex items-center justify-center">
                                  <Button
                                    variant="ghost"
                                    size="sm"
                                    className="h-8 w-8 p-0 mx-auto"
                                  >
                                    <MoreHorizontal className="h-4 w-4" />
                                  </Button>
                                </div>
                              </DropdownMenuTrigger>
                              <DropdownMenuContent
                                container={portalContainer as Element}
                                align="end"
                              >
                                <ProductModal data={post}>
                                  <DropdownMenuItem
                                    onSelect={(e) => {
                                      e.preventDefault(); // Ngăn dropdown đóng lại
                                      e.stopPropagation();
                                    }}
                                  >
                                    <Edit className="h-4 w-4 mr-2" /> Review
                                  </DropdownMenuItem>
                                </ProductModal>
                                <DropdownMenuItem
                                  onClick={() => handleActionListing(post)}
                                >
                                  {post.status ? (
                                    <EyeOff className="h-4 w-4 mr-2" />
                                  ) : (
                                    <Eye className="h-4 w-4 mr-2" />
                                  )}
                                  {post.status ? "Unlist" : "List"}

                                  {/* {actionMutation.isPending && <Loader />} */}
                                </DropdownMenuItem>
                                {/* <DropdownMenuItem onClick={() => handleUnListing(post)}>
                            unList
                          </DropdownMenuItem>
                          <DropdownMenuItem onClick={() => handleRePublist(post)}>
                            re publist
                          </DropdownMenuItem> */}
                              </DropdownMenuContent>
                            </DropdownMenu>
                          </TableCell>
                        </TableRow>
                      );
                    })
                  )}
                </TableBody>
              </Table>
            </ScrollArea>
          </div>
        </div>
      </PopoverContent>
    </Popover>
  );
}
