import React, { useState, useMemo } from "react";
import { MdKeyboardArrowDown } from "react-icons/md";
import { getShipmentStatusLabelForRole } from "../../../../../utils/roleStatusLabels";

interface FilterValues {
  status: string | null;
}

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

const FilterPopover: React.FC<FilterPopoverProps> = ({
  isOpen,
  onClose,
  onApply,
  initialFilters,
}) => {
  const [selectedStatus, setSelectedStatus] = useState<string | null>(
    initialFilters.status
  );

  // Shipment status options with supplier-facing labels
  const statusOptions = useMemo(() => {
    return [
      { value: "draft", label: getShipmentStatusLabelForRole("draft", "supplier") },
      { value: "dispatched", label: getShipmentStatusLabelForRole("dispatched", "supplier") },
      { value: "received", label: getShipmentStatusLabelForRole("received", "supplier") },
      { value: "cancelled", label: getShipmentStatusLabelForRole("cancelled", "supplier") },
    ];
  }, []);

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

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

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

  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">
              <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={24} />
              </div>
            </div>

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

export default FilterPopover;