import React, { useState, useEffect, useMemo } from "react";
import { manageOrdersService } from "../../../../../services/api";
import { MdKeyboardArrowDown } from "react-icons/md";
import { FiCheck } from "react-icons/fi";
import { getStatusFilterOptions } from "../../../../../utils/roleStatusLabels";

interface Product {
  id: number;
  name: string;
}

interface FilterValues {
  status: string | null;
  products: number[];
}

interface FilterPopoverProps {
  isOpen: boolean;
  onClose: () => void;
  onApply: (filters: FilterValues) => void;
  initialFilters: FilterValues;
}

const FilterPopover: React.FC<FilterPopoverProps> = ({
  isOpen,
  onClose,
  onApply,
  initialFilters,
}) => {
  const [products, setProducts] = useState<Product[]>([]);
  const [loading, setLoading] = useState(false);
  const [selectedStatus, setSelectedStatus] = useState<string | null>(
    initialFilters.status
  );
  const [selectedProducts, setSelectedProducts] = useState<number[]>(
    initialFilters.products || []
  );

  // Status options with role-based labels for supplier
  const statusOptions = useMemo(() => getStatusFilterOptions('supplier'), []);

  // Fetch products
  useEffect(() => {
    const fetchProducts = async () => {
      setLoading(true);
      try {
        const response = await manageOrdersService.getAllProducts();
        setProducts(response.data);
      } catch (error) {
        console.error("Failed to fetch products:", error);
      } finally {
        setLoading(false);
      }
    };

    if (isOpen) {
      fetchProducts();
    }
  }, [isOpen]);

  // Handle status selection
  const handleStatusChange = (status: string | null) => {
    setSelectedStatus(status);
  };

  // Handle product selection
  const handleProductChange = (productId: number) => {
    setSelectedProducts((prev) => {
      if (prev.includes(productId)) {
        return prev.filter((id) => id !== productId);
      } else {
        return [...prev, productId];
      }
    });
  };

  // Select/deselect all products
  const handleAllProductsChange = () => {
    if (selectedProducts.length === products.length) {
      setSelectedProducts([]);
    } else {
      setSelectedProducts(products.map((product) => product.id));
    }
  };

  // Apply filters
  const handleApply = () => {
    onApply({
      status: selectedStatus,
      products: selectedProducts,
    });
    onClose();
  };

  // Clear all filters
  const handleClear = () => {
    setSelectedStatus(null);
    setSelectedProducts([]);
  };

  if (!isOpen) return null;

  return (
    <div className="fixed inset-0 z-50 overflow-hidden">
      <div className="absolute inset-0 overflow-hidden">
        <div
          className="fixed inset-0 bg-black bg-opacity-25 transition-opacity"
          onClick={onClose}
        />

        <div className="absolute right-0 top-20 max-w-md transform p-4 transition-all md:right-16">
          <div className="bg-white rounded-xl shadow-[0px_4px_34px_0px_rgba(0,59,113,0.16)] overflow-hidden w-72">
            <div className="px-6 py-4 border-b border-gray-200">
              <h2 className="text-lg font-bold text-gray-800">Filter</h2>
            </div>

            <div className="px-6 py-4 border-b border-gray-100">
              <h3 className="font-medium text-gray-400 mb-2">Status</h3>
              <div className="flex items-center rounded-lg border border-gray-300 w-full pr-2">
                <select
                  value={selectedStatus || ""}
                  onChange={(e) =>
                    handleStatusChange(e.target.value ? e.target.value : null)
                  }
                  className="w-full bg-transparent text-sm outline-none appearance-none text-black"
                  style={{ padding: "8px" }}
                >
                  <option value="" style={{ padding: "8px" }}>
                    All
                  </option>
                  {statusOptions.map((option) => (
                    <option
                      key={option.value}
                      value={option.value}
                      style={{ padding: "8px" }}
                    >
                      {option.label}
                    </option>
                  ))}
                </select>
                <MdKeyboardArrowDown className="text-gray-500" size={20} />
              </div>
            </div>

            <div className="px-6 py-4">
              <h3 className="font-medium text-gray-400 mb-2">Products</h3>
              {loading ? (
                <div className="flex justify-center items-center p-4">
                  <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-blue-500"></div>
                </div>
              ) : (
                <div className="space-y-2 max-h-60 overflow-y-auto">
                  <div className="flex items-center mb-2">
                    <div
                      className={`w-6 h-6 rounded border flex items-center justify-center cursor-pointer ${
                        selectedProducts.length === products.length
                          ? "bg-blue-500 border-blue-500"
                          : "border-gray-300"
                      }`}
                      onClick={handleAllProductsChange}
                    >
                      {selectedProducts.length === products.length && (
                        <FiCheck className="text-white" size={14} />
                      )}
                    </div>
                    <span className="ml-2 text-sm text-black">All</span>
                  </div>

                  {products.map((product) => (
                    <div key={product.id} className="flex items-center">
                      <div
                        className={`w-6 h-6 rounded border flex items-center justify-center cursor-pointer ${
                          selectedProducts.includes(product.id)
                            ? "bg-blue-500 border-blue-500"
                            : "border-gray-300"
                        }`}
                        onClick={() => handleProductChange(product.id)}
                      >
                        {selectedProducts.includes(product.id) && (
                          <FiCheck className="text-white" size={14} />
                        )}
                      </div>
                      <span className="ml-2 text-sm text-black">
                        {product.name}
                      </span>
                    </div>
                  ))}
                </div>
              )}
            </div>

            <div className="px-6 py-3 flex justify-between items-center border-t border-gray-100">
              <button
                onClick={handleClear}
                className="text-gray-600 text-sm font-medium hover:text-gray-800"
              >
                Clear All
              </button>
              <button
                onClick={handleApply}
                className="bg-[#3997E0] text-white py-1 px-4 rounded-xl hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 flex items-center"
              >
                Apply
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default FilterPopover;