"use client";

import React, { useEffect, useState, useCallback } from "react";
import { manageOrdersService } from "../../../../services/api";
import {
  PurchaseOrder,
  PurchaseOrderStatus,
} from "../../../../types/purchase-order";
import { MdSearch, MdFilterList } from "react-icons/md";
import { FiCalendar } from "react-icons/fi";
import ManageOrdersTable from "./components/ManageOrdersTable";
import FilterPopover from "./components/FilterPopover";
import DateFilterPopover from "./components/DateFilterPopover";
import { useRouter, useSearchParams } from "next/navigation";
import { debounce } from "lodash";
import { PaginationMeta } from "@/types/pagination";

export default function ManageOrdersPage() {
  const router = useRouter();
  const searchParams = useSearchParams();

  // Get initial values from URL query params
  const initialPage = Number(searchParams.get("page")) || 1;
  const initialLimit = Number(searchParams.get("limit")) || 10;
  const initialSearch = searchParams.get("search") || "";
  const initialStatus = searchParams.get("status") || null;
  const initialProducts = searchParams.get("products")
    ? searchParams.get("products")!.split(",").map(Number)
    : [];
  const initialStartDate = searchParams.get("startDate") || null;
  const initialEndDate = searchParams.get("endDate") || null;
  const initialSortBy = searchParams.get("sortBy") || "createdAt";
  const initialSortOrder =
    (searchParams.get("sortOrder") as "ASC" | "DESC") || "DESC";

  const [orders, setOrders] = useState<PurchaseOrder[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [currentPage, setCurrentPage] = useState(initialPage);
  const [itemsPerPage, setItemsPerPage] = useState(initialLimit);
  const [searchQuery, setSearchQuery] = useState(initialSearch);
  const [filterStatus, setFilterStatus] = useState<string | null>(
    initialStatus
  );
  const [filterProducts, setFilterProducts] =
    useState<number[]>(initialProducts);
  const [startDate, setStartDate] = useState<string | null>(initialStartDate);
  const [endDate, setEndDate] = useState<string | null>(initialEndDate);
  const [sortBy, setSortBy] = useState<string>(initialSortBy);
  const [sortOrder, setSortOrder] = useState<"ASC" | "DESC">(initialSortOrder);
  const [isFilterOpen, setIsFilterOpen] = useState(false);
  const [isDateFilterOpen, setIsDateFilterOpen] = useState(false);

  const [paginationMeta, setPaginationMeta] = useState<PaginationMeta>({
    currentPage: initialPage,
    itemsPerPage: initialLimit,
    totalItems: 0,
    totalPages: 1,
    hasNextPage: false,
    hasPreviousPage: false,
  });

  // Update URL with current pagination and filter state
  const updateUrlParams = useCallback(() => {
    const params = new URLSearchParams();
    params.set("page", currentPage.toString());
    params.set("limit", itemsPerPage.toString());
    if (searchQuery) params.set("search", searchQuery);
    if (filterStatus) params.set("status", filterStatus);
    if (filterProducts.length > 0)
      params.set("products", filterProducts.join(","));
    if (startDate) params.set("startDate", startDate);
    if (endDate) params.set("endDate", endDate);
    if (sortBy) params.set("sortBy", sortBy);
    if (sortOrder) params.set("sortOrder", sortOrder);

    // Update URL without refreshing the page
    router.push(`?${params.toString()}`, { scroll: false });
  }, [
    currentPage,
    itemsPerPage,
    searchQuery,
    filterStatus,
    filterProducts,
    startDate,
    endDate,
    sortBy,
    sortOrder,
    router,
  ]);

  // Fetch orders with filters
  const fetchOrders = useCallback(async () => {
    try {
      setLoading(true);

      const response = await manageOrdersService.getAllOrders({
        page: currentPage,
        limit: itemsPerPage,
        search: searchQuery,
        status: filterStatus || undefined,
        products: filterProducts.length > 0 ? filterProducts : undefined,
        startDate: startDate || undefined,
        endDate: endDate || undefined,
        sortBy,
        sortOrder,
      });

      setOrders(response.data.data);
      setPaginationMeta(response.data.meta);
      setError(null);

      // Update URL after successful fetch
      updateUrlParams();
    } catch (err) {
      console.error("Failed to fetch orders:", err);
      setError("Failed to load orders. Please try again.");
    } finally {
      setLoading(false);
    }
  }, [
    currentPage,
    itemsPerPage,
    searchQuery,
    filterStatus,
    filterProducts,
    startDate,
    endDate,
    sortBy,
    sortOrder,
    updateUrlParams,
  ]);

  // Debounced search handler
  const debouncedSearch = useCallback(
    debounce((value: string) => {
      setSearchQuery(value);
      setCurrentPage(1); // Reset to first page on new search
    }, 500),
    []
  );

  useEffect(() => {
    return () => {
      debouncedSearch.cancel();
    };
  }, [debouncedSearch]);

  // Handle search input change
  const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const value = e.target.value;
    debouncedSearch(value);
  };

  // Handle filter toggle
  const handleFilterToggle = () => {
    setIsFilterOpen(!isFilterOpen);
  };

  // Handle date filter toggle
  const handleDateFilterToggle = () => {
    setIsDateFilterOpen(!isDateFilterOpen);
  };

  // Handle filter apply
  const handleFilterApply = ({
    status,
    products,
  }: {
    status: string | null;
    products: number[];
  }) => {
    setFilterStatus(status);
    setFilterProducts(products);
    setCurrentPage(1); // Reset to first page when applying filters
  };

  // Handle date filter apply
  const handleDateFilterApply = (start: string | null, end: string | null) => {
    setStartDate(start);
    setEndDate(end);
    setCurrentPage(1); // Reset to first page when applying date filters
  };

  // Handle sorting
  const handleSort = (field: string) => {
    if (sortBy === field) {
      // Toggle sort order if same field
      setSortOrder(sortOrder === "ASC" ? "DESC" : "ASC");
    } else {
      // Set new field with default DESC order
      setSortBy(field);
      setSortOrder("DESC");
    }
    setCurrentPage(1); // Reset to first page when sorting
  };

  // Set up page change handlers
  const handlePageChange = (page: number) => {
    setCurrentPage(page);
  };

  const handleItemsPerPageChange = (size: number) => {
    setItemsPerPage(size);
    setCurrentPage(1); // Reset to first page when changing items per page
  };

  // Fetch data on initial load and whenever dependencies change
  useEffect(() => {
    fetchOrders();
  }, [fetchOrders]);

  // Get filter badge count
  const getFilterCount = () => {
    let count = 0;
    if (filterStatus) count++;
    if (filterProducts.length > 0) count++;
    return count;
  };

  // Get date filter badge count
  const getDateFilterCount = () => {
    return startDate || endDate ? 1 : 0;
  };

  return (
    <div className="manage-orders-page">
      {/* Sticky Header */}
      <div className="sticky top-0 z-30 bg-gradient-to-l from-white to-[#DFF9FF] shadow-sm border-b border-gray-200 backdrop-blur-sm">
        <div className="px-4 md:px-6 py-4">
          <div className="flex flex-col sm:flex-row sm:justify-between sm:items-center space-y-4 sm:space-y-0">
            <div>
              <h1 className="text-xl md:text-2xl font-bold text-gray-800">
                Manage Orders
              </h1>
            </div>
          </div>
        </div>
      </div>

      {/* Main Content */}
      <div className="m-4 md:m-6">
        {/* Single Card for Order List, Search/Filters, Table, and Pagination */}
        <div className="bg-white rounded-lg shadow-[0px_4px_34px_0px_rgba(0,59,113,0.16)]">
          {/* Order List Title */}
          <div className="px-6 py-4 border-b border-gray-200">
            <h2 className="text-lg font-bold text-gray-800">Order List</h2>
          </div>

          {/* Search and Filters */}
          <div className="p-4 md:p-6 flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0 md:space-x-4">
            <div className="flex items-center bg-gray-100 p-2 rounded-md w-full md:w-1/3">
              <MdSearch className="mr-2 text-gray-500" size={20} />
              <input
                type="text"
                placeholder="Search..."
                defaultValue={searchQuery}
                onChange={handleSearchChange}
                className="bg-transparent outline-none w-full text-sm text-gray-700 placeholder-gray-500"
              />
            </div>
            <div className="flex items-center space-x-4">
              <button
                className="flex items-center text-gray-600 hover:text-gray-800 text-sm bg-gray-100 p-2 rounded-md relative"
                onClick={handleFilterToggle}
              >
                <MdFilterList className="mr-2 text-gray-500" size={20} />
                Filters
                {getFilterCount() > 0 && (
                  <span className="absolute -top-2 -right-2 bg-blue-500 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center">
                    {getFilterCount()}
                  </span>
                )}
              </button>
              <button
                className="flex items-center text-gray-600 hover:text-gray-800 text-sm bg-gray-100 p-2 rounded-md relative"
                onClick={handleDateFilterToggle}
              >
                <FiCalendar className="mr-2 text-gray-500" size={20} />
                Date Filter
                {getDateFilterCount() > 0 && (
                  <span className="absolute -top-2 -right-2 bg-blue-500 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center">
                    {getDateFilterCount()}
                  </span>
                )}
              </button>
            </div>
          </div>

          {loading ? (
            <div className="flex justify-center items-center h-40">
              <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500 mr-3"></div>
              <span>Loading orders...</span>
            </div>
          ) : error ? (
            <div className="p-6 bg-red-100 text-red-700">
              <p className="font-medium">Error</p>
              <p>{error}</p>
            </div>
          ) : orders.length === 0 ? (
            <div className="p-6 text-center">
              <p className="text-gray-500">No orders found.</p>
            </div>
          ) : (
            <ManageOrdersTable
              data={orders}
              currentPage={currentPage}
              setCurrentPage={handlePageChange}
              pageSize={itemsPerPage}
              setPageSize={handleItemsPerPageChange}
              totalItems={paginationMeta.totalItems}
              totalPages={paginationMeta.totalPages}
              sortBy={sortBy}
              sortOrder={sortOrder}
              onSort={handleSort}
            />
          )}
        </div>
      </div>

      {/* Filter Popover */}
      <FilterPopover
        isOpen={isFilterOpen}
        onClose={() => setIsFilterOpen(false)}
        onApply={handleFilterApply}
        initialFilters={{
          status: filterStatus,
          products: filterProducts,
        }}
      />

      {/* Date Filter Popover */}
      <DateFilterPopover
        isOpen={isDateFilterOpen}
        onClose={() => setIsDateFilterOpen(false)}
        onApply={handleDateFilterApply}
        initialStartDate={startDate}
        initialEndDate={endDate}
      />
    </div>
  );
}