"use client";

import React, { useEffect, useState } from "react";
import Link from "next/link";
import { warehouseStocksService } from "../../../../services/api";
import { StockLevel } from "../../../../types/stock";
import { MdSearch, MdFilterList, MdEvent, MdAdd } from "react-icons/md";
import { HiPhoto } from "react-icons/hi2";
import FilterPopover from "./components/FilterPopover";
import DateFilterPopover from "./components/DateFilterPopover";
import { useRouter, useSearchParams } from "next/navigation";
import { debounce } from "lodash";
import toast from "react-hot-toast";
import { toastMessages } from "../../../../utils/toast";
import ConfirmationModal from "../../../../components/ui/ConfirmationModal";
import { PaginationMeta } from "@/types/pagination";

// Helper function to determine stock status
const getStockStatus = (quantity: number) => {
  if (quantity === 0)
    return {
      status: "out-of-stock",
      color: "bg-red-100",
      textColor: "text-red-600",
      text: "0",
    };
  if (quantity <= 10)
    return {
      status: "running-low",
      color: "bg-orange-100",
      textColor: "text-orange-600",
      text: quantity.toString(),
    };
  return {
    status: "normal",
    color: "bg-blue-100",
    textColor: "text-blue-600",
    text: quantity.toString(),
  };
};

export default function WarehouseStocksPage() {
  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 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 [stocks, setStocks] = useState<StockLevel[]>([]);
  const [warehouses, setWarehouses] = useState<any[]>([]);
  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 [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 = () => {
    const params = new URLSearchParams();
    params.set("page", currentPage.toString());
    params.set("limit", itemsPerPage.toString());
    if (searchQuery) params.set("search", searchQuery);
    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 });
  };

  // Debounced search function
  const debouncedSearch = debounce((query: string) => {
    setSearchQuery(query);
    setCurrentPage(1);
  }, 300);

  const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    debouncedSearch(e.target.value);
  };

  const handleFilterToggle = () => {
    setIsFilterOpen(!isFilterOpen);
  };

  const handleDateFilterToggle = () => {
    setIsDateFilterOpen(!isDateFilterOpen);
  };

  const handleFilterApply = (filters: { warehouseId: number | null }) => {
    // For now, we'll just close the filter popover
    // In the future, you can implement warehouse filtering here
    setCurrentPage(1);
    setIsFilterOpen(false);
  };

  const handleDateFilterApply = (
    startDate: string | null,
    endDate: string | null
  ) => {
    setStartDate(startDate);
    setEndDate(endDate);
    setCurrentPage(1);
    setIsDateFilterOpen(false);
  };

  const handlePageChange = (page: number) => {
    setCurrentPage(page);
  };

  const handleItemsPerPageChange = (newItemsPerPage: number) => {
    setItemsPerPage(newItemsPerPage);
    setCurrentPage(1);
  };

  const handleSort = (newSortBy: string, newSortOrder: "ASC" | "DESC") => {
    setSortBy(newSortBy);
    setSortOrder(newSortOrder);
    setCurrentPage(1);
  };

  // Fetch warehouses data
  useEffect(() => {
    const fetchWarehouses = async () => {
      try {
        const response = await warehouseStocksService.getStocksByWarehouse(1, {
          limit: 1000,
        });
        // Extract unique warehouses from stocks data
        const uniqueWarehouses = Array.from(
          new Map(
            response.data?.data?.map((stock: any) => [
              stock.warehouse.id,
              stock.warehouse,
            ])
          ).values()
        );
        setWarehouses(uniqueWarehouses || []);
      } catch (err) {
        console.error("Error fetching warehouses:", err);
        setWarehouses([]);
      }
    };

    fetchWarehouses();
  }, []);

  // Fetch stocks data
  useEffect(() => {
    const fetchStocks = async () => {
      try {
        setLoading(true);
        console.log("Making API call with params:", {
          page: currentPage,
          limit: itemsPerPage,
          search: searchQuery || undefined,
          warehouseId: undefined,
          sortBy: sortBy,
          sortOrder: sortOrder,
        });

        const response = await warehouseStocksService.getAllStocks({
          page: currentPage,
          limit: itemsPerPage,
          search: searchQuery || undefined,
          warehouseId: undefined, // Not filtering by specific warehouse
          sortBy: sortBy,
          sortOrder: sortOrder,
        });
        console.log("Stocks API response:", response);
        console.log("Response data:", response.data);
        console.log("Response data type:", typeof response.data);
        console.log("Is response.data an array?", Array.isArray(response.data));
        console.log("Response.data length:", response.data?.length);

        // Handle nested response structure
        const stocksData = response.data?.data || response.data || response;
        const metaData = response.data?.meta;

        // Ensure stocksData is always an array
        const stocksArray = Array.isArray(stocksData) ? stocksData : [];

        // Map backend StockWithProduct to frontend StockLevel
        const mappedStocks = stocksArray.map((stock: any) => ({
          id: stock.productId * 1000 + stock.warehouseId, // Create a unique ID
          warehouseId: stock.warehouseId,
          productId: stock.productId,
          availableQty: stock.availableQty,
          reservedQty: 0, // Backend doesn't provide this, default to 0
          lastUpdated:
            stock.lastUpdated instanceof Date
              ? stock.lastUpdated.toISOString()
              : stock.lastUpdated,
          product: {
            id: stock.product.id,
            key: stock.product.key,
            name: stock.product.name,
            type: stock.product.type,
            technology: stock.product.technology || "",
            generation: stock.product.generation || "",
            image: stock.product.image || "",
            description: stock.product.description,
            price: stock.product.price || 0,
          },
          warehouse: {
            id: stock.warehouse.id,
            name: stock.warehouse.name,
            location: stock.warehouse.location,
          },
        }));

        const finalMetaData = metaData || {
          currentPage: currentPage,
          itemsPerPage: itemsPerPage,
          totalItems: mappedStocks.length,
          totalPages: Math.ceil(mappedStocks.length / itemsPerPage),
          hasNextPage: false,
          hasPreviousPage: currentPage > 1,
        };

        setStocks(mappedStocks);
        setPaginationMeta(finalMetaData);
        setError(null);
      } catch (err) {
        console.error("Error fetching stocks:", err);
        console.error("Error details:", {
          message: err instanceof Error ? err.message : "Unknown error",
          status: (err as any)?.response?.status,
          statusText: (err as any)?.response?.statusText,
          data: (err as any)?.response?.data,
        });
        setError("Failed to load stocks");
      } finally {
        setLoading(false);
      }
    };

    fetchStocks();
  }, [
    currentPage,
    itemsPerPage,
    searchQuery,
    filterProducts,
    startDate,
    endDate,
    sortBy,
    sortOrder,
  ]);

  // Update URL when state changes
  useEffect(() => {
    updateUrlParams();
  }, [
    currentPage,
    itemsPerPage,
    searchQuery,
    filterProducts,
    startDate,
    endDate,
    sortBy,
    sortOrder,
  ]);

  // Get filter badge count
  const getFilterCount = () => {
    return filterProducts.length;
  };

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

  return (
    <div className="warehouse-stocks-page min-h-screen">
      {/* 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">
                Current Stocks
              </h1>
            </div>
            <Link
              href="/purchase-orders/create"
              className="bg-[#3997E0] text-white py-2 px-4 rounded-xl hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 flex items-center justify-center sm:justify-start w-full sm:w-auto"
            >
              <MdAdd size={20} className="mr-2" />
              Create Purchase
            </Link>
          </div>
        </div>
      </div>

      {/* Main Content */}
      <div className="m-4 md:m-6">
        {/* Search and Filters */}
        <div className="bg-white rounded-lg shadow-md p-4 md:p-6 mb-6">
          <div className="flex flex-col lg:flex-row justify-between items-center space-y-4 lg:space-y-0 lg:space-x-4">
            <div className="flex items-center bg-gray-100 p-3 rounded-lg w-full lg:w-1/3">
              <MdSearch
                size={20}
                color="#6B7280"
                className="mr-3 flex-shrink-0"
              />
              <input
                type="text"
                placeholder="Search products..."
                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-2 sm:space-x-3 w-full lg:w-auto">
              <button
                className="flex items-center justify-center text-gray-600 hover:text-gray-800 text-sm bg-gray-100 p-3 rounded-lg relative transition-colors flex-1 lg:flex-none"
                onClick={handleFilterToggle}
              >
                <MdFilterList size={20} className="mr-2 flex-shrink-0" />
                <span className="hidden sm:inline">Filters</span>
                {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 justify-center text-gray-600 hover:text-gray-800 text-sm bg-gray-100 p-3 rounded-lg relative transition-colors flex-1 lg:flex-none"
                onClick={handleDateFilterToggle}
              >
                <MdEvent size={20} className="mr-2 flex-shrink-0" />
                <span className="hidden sm:inline">Date Filter</span>
                {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>
        </div>

        {/* Stock Cards Grid */}
        {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 stocks...</span>
          </div>
        ) : error ? (
          <div className="p-6 bg-red-100 text-red-700 rounded-lg">
            <p className="font-medium">Error</p>
            <p>{error}</p>
          </div>
        ) : !Array.isArray(stocks) || stocks.length === 0 ? (
          <div className="p-6 text-center bg-white rounded-lg shadow-sm">
            <p className="text-gray-500">No stocks found.</p>
          </div>
        ) : (
          <div
            className="grid grid-cols-1 gap-4 md:gap-6"
            style={{
              gridTemplateColumns: "repeat(auto-fill, minmax(350px, 1fr))",
            }}
          >
            {stocks.map((stock) => {
              const stockStatus = getStockStatus(stock.availableQty);
              return (
                <div
                  key={stock.id}
                  className="bg-white rounded-lg shadow-md p-4 hover:shadow-xl transition-all duration-200 cursor-pointer transform hover:-translate-y-1"
                >
                  <div className="flex items-start justify-between mb-3">
                    {/* Product Image */}
                    <div className="w-20 h-20 bg-gray-100 rounded-lg flex items-center justify-center overflow-hidden">
                      {stock.product?.image ? (
                        <img
                          src={`/${stock.product.image}`}
                          alt={stock.product.name}
                          className="w-full h-full object-cover"
                        />
                      ) : (
                        <div className="w-20 h-20 flex items-center justify-center bg-gray-200 rounded-lg">
                          <HiPhoto className="w-8 h-8 text-gray-400" />
                        </div>
                      )}
                    </div>

                    {/* Stock Status Badge */}
                    <div className="flex flex-col items-end">
                      <div
                        className={`w-16 h-16 rounded-full ${stockStatus.color} flex items-center justify-center shadow-sm border-2 border-white`}
                      >
                        <span
                          className={`text-lg font-bold ${stockStatus.textColor}`}
                        >
                          {stockStatus.text}
                        </span>
                      </div>
                      {stockStatus.status === "running-low" && (
                        <span className="text-xs text-orange-600 font-medium mt-1 bg-orange-50 px-2 py-1 rounded-full">
                          Running Low
                        </span>
                      )}
                      {stockStatus.status === "out-of-stock" && (
                        <span className="text-xs text-red-600 font-medium mt-1 bg-red-50 px-2 py-1 rounded-full">
                          Out of Stock
                        </span>
                      )}
                    </div>
                  </div>

                  {/* Product Details */}
                  <div>
                    <h3 className="text-lg font-semibold text-gray-900 mb-1 line-clamp-2">
                      {stock.product?.name || "Unknown Product"}
                    </h3>
                    <p className="text-sm text-gray-600 mb-3 font-medium">
                      {stock.product?.description ||
                        stock.product?.key ||
                        stock.product?.type ||
                        "Product"}
                    </p>
                    <div className="text-xs text-gray-500 space-y-1 bg-gray-50 p-2 rounded-md">
                      <div className="flex justify-between">
                        <span className="font-medium">Warehouse:</span>
                        <span>{stock.warehouse?.name || "Unknown"}</span>
                      </div>
                      <div className="flex justify-between">
                        <span className="font-medium">Updated:</span>
                        <span>
                          {new Date(stock.lastUpdated).toLocaleDateString()}
                        </span>
                      </div>
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
        )}

        {/* Pagination */}
        {paginationMeta.totalPages > 1 && (
          <div className="mt-8 flex justify-center">
            <div className="flex items-center space-x-2">
              <button
                onClick={() => handlePageChange(currentPage - 1)}
                disabled={!paginationMeta.hasPreviousPage}
                className="px-3 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-md hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
              >
                Previous
              </button>

              {Array.from(
                { length: paginationMeta.totalPages },
                (_, i) => i + 1
              ).map((page) => (
                <button
                  key={page}
                  onClick={() => handlePageChange(page)}
                  className={`px-3 py-2 text-sm font-medium rounded-md ${
                    page === currentPage
                      ? "bg-blue-600 text-white"
                      : "text-gray-500 bg-white border border-gray-300 hover:bg-gray-50"
                  }`}
                >
                  {page}
                </button>
              ))}

              <button
                onClick={() => handlePageChange(currentPage + 1)}
                disabled={!paginationMeta.hasNextPage}
                className="px-3 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-md hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
              >
                Next
              </button>
            </div>
          </div>
        )}
      </div>

      {/* Filter Popover */}
      <FilterPopover
        isOpen={isFilterOpen}
        onClose={() => setIsFilterOpen(false)}
        onApply={handleFilterApply}
        initialFilters={{
          warehouseId: null,
        }}
        warehouses={warehouses}
      />

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