"use client";

import React, { useEffect, useState } from "react";
import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import {
  PrinterIcon,
  EyeIcon,
  SearchIcon,
  CircleDashed,
  ChevronLeft,
  ChevronRight,
  CalendarIcon,
} from "lucide-react";
import { ScrollArea } from "@/components/ui/scroll-area";
import Link from "next/link";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Input } from "@/components/ui/input";
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui/tooltip";
import { useGetBranchQuery } from "@/redux/services/branchs.api";
import {
  useGetCancelledOrdersQuery,
  useGetCompletedOrdersQuery,
  useGetPendingOrdersQuery,
} from "@/redux/services/orders.api";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Calendar } from "@/components/ui/calendar";
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover";
import { DateRange } from "react-day-picker";
import {
  format,
  isWithinInterval,
  parseISO,
  startOfDay,
  endOfDay,
} from "date-fns";
import Image from "next/image";

type Products = {
  name: string;
  image: string;
  quantity: string;
};

type OrderBranch = {
  name: string;
  email: string;
  address: string;
};

type Orders = {
  _id: string;
  orderId: string;
  products: Products[];
  branchAddress: string;
  email: string;
  invoiceNumber: string;
  // totalAmount: number;
  totalProducts: number;
  customerName: string;
  additionalNote: string;
  customerPhone: number;
  date: string;
  createdBy: string;
  time: string;
  status: string;
  createdAt: string;
  branch: OrderBranch;
  updatedAt: string;
};

type Branch = {
  name: string;
  image?: string;
  phone: string;
  email: string;
  address: string;
  productCount: string | number;
  passcode: string;
  status: string;
  code: string;
  _id?: string;
};

export default function OrderManagement() {
  const {
    data: branches,
    isLoading: isBranchesLoading,
    error: branchesError,
  } = useGetBranchQuery();
  const {
    data: completedOrders,
    isLoading: isCompletedOrdersLoading,
    isSuccess: isCompletedOrdersSuccess,
    refetch: completedRefetch,
    error: completedOrdersError,
  } = useGetCompletedOrdersQuery();
  // const {
  //   data: pendingOrders,
  //   isLoading: isPendingOrdersLoading,
  //   isSuccess: isPendingOrdersSuccess,
  //   refetch: pendingRefetch,
  //   error: pendingOrdersError,
  // } = useGetPendingOrdersQuery();
  // const {
  //   data: cancelledOrders,
  //   isLoading: isCancelledOrdersLoading,
  //   isSuccess: isCancelledOrdersSuccess,
  //   refetch: cancelledRefetch,
  //   error: cancelledOrdersError,
  // } = useGetCancelledOrdersQuery();
  useEffect(() => {
    // if (isPendingOrdersSuccess) {
    //   pendingRefetch();
    // }
    // if (isCancelledOrdersSuccess) {
    //   cancelledRefetch();
    // }
    if (isCompletedOrdersSuccess) {
      completedRefetch();
    }
  }, [
    // isPendingOrdersSuccess,
    // pendingRefetch,
    // isCancelledOrdersSuccess,
    // cancelledRefetch,
    isCompletedOrdersSuccess,
    completedRefetch,
  ]);
  const additionalBranches: Branch[] = [
    {
      name: "All Branches",
      phone: "N/A",
      email: "all@example.com",
      address: "N/A",
      productCount: 0,
      passcode: "all-passcode",
      status: "active",
      code: "ALL",
    },
    {
      name: "admin",
      phone: "N/A",
      email: "admin@example.com",
      address: "N/A",
      productCount: 0,
      passcode: "admin-passcode",
      status: "active",
      code: "ADMIN",
    },
  ];

  const combinedBranches: Branch[] = React.useMemo(() => {
    if (!branches) return additionalBranches;
    return [...additionalBranches, ...branches];
  }, [branches]);

  const [isDialogOpen, setIsDialogOpen] = useState(false);
  const [selectedOrder, setSelectedOrder] = useState<Orders>();
  const [selectedBranch, setSelectedBranch] = useState<Branch>(
    additionalBranches[0]
  );
  const [searchTerm, setSearchTerm] = useState("");
  const [date, setDate] = React.useState<DateRange | undefined>({
    from: undefined,
    to: undefined,
  });

  // Pagination state
  const [currentPage, setCurrentPage] = useState(1);
  const [itemsPerPage] = useState(10);
  const [goToPage, setGoToPage] = useState("");

  const formatDate = (dateString: string) => {
    const [day, month, year] = dateString.split("-");
    const date = new Date(`${year}-${month}-${day}`);
    return date.toLocaleDateString("en-US", {
      month: "short",
      day: "numeric",
      year: "numeric",
    });
  };

  const formatDateWithOrdinal = (dateString: string): string => {
    const date = new Date(dateString);
    return date.toLocaleDateString("en-US", {
      month: "short",
      day: "numeric",
      year: "numeric",
    });
  };
  const handlePrint = (order: Orders) => {
    setSelectedOrder(order);
    setIsDialogOpen(true);
  };

  const filteredOrders = (orders: Orders[]) => {
    return orders?.filter((order) => {
      const orderDate = parseISO(order.date);

      const branchMatch =
        selectedBranch.name === "All Branches" ||
        order.createdBy === selectedBranch.name;

      const searchMatch =
        order.orderId.toLowerCase().includes(searchTerm.toLowerCase()) ||
        order.invoiceNumber.toLowerCase().includes(searchTerm.toLowerCase()) ||
        order.products.some((product) =>
          product.name.toLowerCase().includes(searchTerm.toLowerCase())
        );

      const dateMatch =
        !date?.from ||
        isWithinInterval(orderDate, {
          start: startOfDay(date.from),
          end: date.to ? endOfDay(date.to) : endOfDay(date.from),
        });

      return branchMatch && searchMatch && dateMatch;
    });
  };

  const renderOrderTable = (orders: Orders[]) => {
    if (
      isCompletedOrdersLoading
      // ||
      // isPendingOrdersLoading ||
      // isCancelledOrdersLoading
    ) {
      return (
        <div className="flex items-center ml-8 h-[65vh] justify-center">
          <CircleDashed className="animate-spin text-[#be063f]" />
        </div>
      );
    }

    const filtered = filteredOrders(orders);

    if (!filtered || filtered.length === 0) {
      return (
        <div className="flex items-center ml-8 h-[65vh] justify-center">
          <pre>No Orders Found</pre>
        </div>
      );
    }

    // Pagination logic
    const indexOfLastItem = currentPage * itemsPerPage;
    const indexOfFirstItem = indexOfLastItem - itemsPerPage;
    const currentItems = filtered.slice(indexOfFirstItem, indexOfLastItem);
    const totalPages = Math.ceil(filtered.length / itemsPerPage);

    return (
      <>
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>S.no</TableHead>
              <TableHead>Invoice Number</TableHead>
              {/* <TableHead>Price</TableHead> */}
              <TableHead>Created By</TableHead>
              <TableHead>Created At</TableHead>
              {/* <TableHead>Date</TableHead> */}
              <TableHead>Status</TableHead>
              <TableHead>Action</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {currentItems.map((order: Orders, index: number) => (
              <TableRow key={order._id}>
                <TableCell>{indexOfFirstItem + index + 1}</TableCell>
                <TableCell>{order.invoiceNumber}</TableCell>
                {/* <TableCell>${order.totalAmount}</TableCell> */}
                <TableCell>{order.createdBy}</TableCell>
                {/* <TableCell>{formatDateWithOrdinal(order.date)}</TableCell> */}
                <TableCell>{formatDateWithOrdinal(order.createdAt)}</TableCell>
                <TableCell>
                  <span
                    className={`px-2 py-1 capitalize rounded-full text-xs ${
                      order.status.toLowerCase() === "pending"
                        ? "bg-yellow-100 text-yellow-800"
                        : order.status.toLowerCase() === "completed"
                        ? "bg-green-100 text-green-800"
                        : "bg-red-100 text-red-800"
                    }`}
                  >
                    {order.status}
                  </span>
                </TableCell>
                <TableCell>
                  <div className="flex gap-2">
                    <Button
                      variant="ghost"
                      size="icon"
                      onClick={() => handlePrint(order)}
                    >
                      <PrinterIcon className="h-4 w-4" />
                    </Button>
                    <Button variant="ghost" size="icon">
                      <Link href={`order-management/${order._id}`}>
                        <EyeIcon className="h-4 w-4" />
                      </Link>
                    </Button>
                  </div>
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
        <div className="flex justify-between items-center mt-4">
          <div>
            Showing {indexOfFirstItem + 1} to{" "}
            {Math.min(indexOfLastItem, filtered.length)} of {filtered.length}{" "}
            items
          </div>
          <div className="flex items-center gap-2">
            <Button
              variant="outline"
              size="sm"
              onClick={() => setCurrentPage((prev) => Math.max(prev - 1, 1))}
              disabled={currentPage === 1}
            >
              <ChevronLeft className="h-4 w-4 mr-2" />
              Previous
            </Button>
            <span className="mx-2">
              Page {currentPage} of {totalPages}
            </span>
            <Button
              variant="outline"
              size="sm"
              onClick={() =>
                setCurrentPage((prev) => Math.min(prev + 1, totalPages))
              }
              disabled={currentPage === totalPages}
            >
              Next
              <ChevronRight className="h-4 w-4 ml-2" />
            </Button>
            <div className="flex items-center ml-4">
              <Input
                type="number"
                placeholder="Go to page"
                value={goToPage}
                onChange={(e) => setGoToPage(e.target.value)}
                className="w-20 mr-2"
              />
              <Button
                variant="outline"
                size="sm"
                onClick={() => {
                  const page = parseInt(goToPage);
                  if (page >= 1 && page <= totalPages) {
                    setCurrentPage(page);
                    setGoToPage("");
                  }
                }}
              >
                Go
              </Button>
            </div>
          </div>
        </div>
      </>
    );
  };

  return (
    <div className="container mx-auto p-6">
      <Tabs defaultValue="completed" className="mb-6">
        <div className="flex justify-between mb-4">
          <TabsList className="gap-4">
            {/* <TabsTrigger
              className="data-[state=active]:bg-[#be063f] data-[state=active]:text-white duration-500"
              value="pending"
            >
              Pending Orders
            </TabsTrigger> */}
            {/* <TabsTrigger
              className="data-[state=active]:bg-[#be063f] data-[state=active]:text-white duration-500"
              value="completed"
            >
              Completed Orders
            </TabsTrigger> */}
            {/* <TabsTrigger
              className="data-[state=active]:bg-[#be063f] data-[state=active]:text-white duration-500"
              value="cancelled"
            >
              Cancelled Orders
            </TabsTrigger> */}
          </TabsList>
          {/* <Select
            onValueChange={(value) => {
              const selected = combinedBranches.find(
                (branch) => branch.name === value
              );
              setSelectedBranch(selected!);
            }}
            defaultValue={selectedBranch.name}
          >
            <SelectTrigger className="w-[180px]">
              <SelectValue placeholder="Select Branch" />
            </SelectTrigger>
            <SelectContent>
              {combinedBranches.map((branch) => (
                <SelectItem key={branch._id} value={branch.name}>
                  {branch.name}
                </SelectItem>
              ))}
            </SelectContent>
          </Select> */}
        </div>
        <div className="flex gap-4 mb-4">
          <div className="relative flex-grow">
            <SearchIcon className="absolute left-2 top-1/2 transform -translate-y-1/2 text-gray-400" />
            <Input
              type="text"
              placeholder="Search by product order ID or Invoice Number"
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
              className="pl-8"
            />
          </div>
          <Popover>
            <PopoverTrigger asChild>
              <Button
                variant={"outline"}
                className={`w-[300px] justify-start text-left font-normal ${
                  !date && "text-muted-foreground"
                }`}
              >
                <CalendarIcon className="mr-2 h-4 w-4" />
                {date?.from ? (
                  date.to ? (
                    <>
                      {format(date.from, "LLL dd, y")} -{" "}
                      {format(date.to, "LLL dd, y")}
                    </>
                  ) : (
                    format(date.from, "LLL dd, y")
                  )
                ) : (
                  <span>Pick a date range</span>
                )}
              </Button>
            </PopoverTrigger>
            <PopoverContent className="w-auto p-0" align="start">
              <Calendar
                initialFocus
                mode="range"
                defaultMonth={date?.from}
                selected={date}
                onSelect={setDate}
                numberOfMonths={2}
              />
            </PopoverContent>
          </Popover>
        </div>
        {/* <TabsContent value="pending">
          {renderOrderTable(pendingOrders!)}
        </TabsContent> */}
        <TabsContent value="completed">
          {renderOrderTable(completedOrders!)}
        </TabsContent>
        {/* <TabsContent value="cancelled">
          {renderOrderTable(cancelledOrders!)}
        </TabsContent> */}
      </Tabs>
      <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
        <DialogContent className="max-w-lg">
          <DialogHeader>
            <DialogTitle className="flex items-center justify-between">
              {/* <LogoSmall /> */}
              {/* <Button
                variant="outline"
                size="sm"
                onClick={() => handlePrint(selectedOrder!)}
              >
                <PrinterIcon className="h-4 w-4 mr-2" />
                Print
              </Button> */}
            </DialogTitle>
          </DialogHeader>
          <ScrollArea className="max-h-[60vh] pr-4">
            <div className="space-y-4">
              <p className="text-center font-semibold">Details</p>
              {/* <div className="grid grid-cols-2 gap-2">
                <span className="text-gray-600">Customer Name</span>
                <span className="font-semibold flex justify-end">
                  {selectedOrder?.customerName}
                </span>
                <span className="text-gray-600">Customer Phone</span>
                <span className="font-semibold flex justify-end">
                  {selectedOrder?.customerPhone}
                </span>
              </div> */}
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>Product</TableHead>
                    <TableHead className="text-right">Quantity</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {selectedOrder?.products.map((product, i) => {
                    // console.log("productproductproductproductproduct");
                    // console.log(product.image.split("/"));
                    const splitarray = product.image.split("/");
                    // console.log(splitarray[splitarray.length - 1]);
                    return (
                      <TableRow key={i}>
                        <TableCell className="flex items-center gap-2">
                          <Avatar>
                            {product.image &&
                            product.image.length > 0 &&
                            splitarray[splitarray.length - 1] !==
                              "undefined" ? (
                              <Image
                                src={product.image}
                                height={200}
                                width={200}
                                alt="BI"
                              />
                            ) : (
                              <AvatarFallback>
                                {product.name.charAt(0)}
                              </AvatarFallback>
                            )}
                          </Avatar>
                          {/* <Avatar>
                          <AvatarImage
                            src={product.image}
                            alt={product.name.charAt(0)}
                          />
                          <AvatarFallback>
                            {product.name.charAt(0)}
                          </AvatarFallback>
                        </Avatar> */}
                          {product.name}
                        </TableCell>
                        <TableCell className="text-right">
                          {product.quantity}
                        </TableCell>
                      </TableRow>
                    );
                  })}
                </TableBody>
              </Table>
              <div className="grid grid-cols-2 gap-2">
                <span className="text-gray-600">Created Date</span>
                <span className="font-semibold justify-end flex">
                  {selectedOrder?.createdAt &&
                    new Date(selectedOrder?.createdAt).toLocaleDateString(
                      "en-US",
                      {
                        year: "numeric",
                        month: "short",
                        day: "numeric",
                      }
                    )}
                </span>
                <span className="text-gray-600">Created Time</span>
                <span className="font-semibold mb-4 justify-end flex">
                  {selectedOrder?.createdAt &&
                    new Date(selectedOrder?.createdAt).toLocaleString("en-US", {
                      hour: "numeric",
                      minute: "numeric",
                      hour12: true,
                    })}
                </span>
                {selectedOrder?.additionalNote && (
                  <>
                    <span className="text-gray-600 mb-4">Additional Notes</span>
                    <span className="font-light mb-4 justify-end flex">
                      {selectedOrder?.additionalNote}
                    </span>
                  </>
                )}
                {/* <div className="border border-dashed" />
                <div className="border border-dashed" />
                <span className="text-gray-600 mt-4">Invoice Number</span>
                <span className="font-semibold justify-end flex mt-4">
                  {selectedOrder?.invoiceNumber}
                </span>
                <span className="text-gray-600">Order ID</span>
                <span className="font-semibold justify-end flex">
                  {selectedOrder?.orderId}
                </span>
                <span className="text-gray-600">PickUp Date</span>
                <span className="font-semibold justify-end flex">
                  {selectedOrder?.date &&
                    formatDateWithOrdinal(selectedOrder.date)}
                </span>
                <span className="text-gray-600">PickUp Time</span>
                <span className="font-semibold justify-end flex">
                  {selectedOrder?.time}
                </span>
                <span className="text-gray-600">Contact Info</span>
                <div className="font-semibold">
                  <p className="justify-end flex">
                    {selectedOrder?.branch.email}
                  </p>
                </div>
                <span className="text-gray-600">Branch Address</span>
                <span className="font-semibold flex place-content-end place-items-end">
                  {selectedOrder?.branch.address}
                </span> */}
              </div>
            </div>
          </ScrollArea>
        </DialogContent>
      </Dialog>
    </div>
  );
}