"use client";

import React, { useEffect, useState } from "react";
import { MdKeyboardArrowDown } from "react-icons/md";
import {
  DiscrepancyConditionFilter,
  DiscrepancyStatusFilter,
} from "@/types/discrepancy";

interface FilterValues {
  status: DiscrepancyStatusFilter;
  condition: DiscrepancyConditionFilter;
}

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

const statusOptions: Array<{ value: DiscrepancyStatusFilter; label: string }> =
  [
    { value: "active", label: "Active" },
    { value: "resolved", label: "Resolved" },
    { value: "all", label: "All" },
  ];

const conditionOptions: Array<{
  value: DiscrepancyConditionFilter;
  label: string;
}> = [
  { value: "all", label: "All" },
  { value: "damaged", label: "Damaged" },
  { value: "missing", label: "Missing" },
];

const DiscrepanciesFilterPopover: React.FC<DiscrepanciesFilterPopoverProps> = ({
  isOpen,
  onClose,
  onApply,
  initialFilters,
}) => {
  const [status, setStatus] = useState<DiscrepancyStatusFilter>(
    initialFilters.status
  );
  const [condition, setCondition] = useState<DiscrepancyConditionFilter>(
    initialFilters.condition
  );

  // Resync local state every time the popover opens
  useEffect(() => {
    if (isOpen) {
      setStatus(initialFilters.status);
      setCondition(initialFilters.condition);
    }
  }, [isOpen, initialFilters]);

  if (!isOpen) return null;

  const handleApply = () => {
    onApply({ status, condition });
    onClose();
  };

  const handleClear = () => {
    setStatus("active");
    setCondition("all");
  };

  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>

            {/* Status */}
            <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={status}
                  onChange={(e) =>
                    setStatus(e.target.value as DiscrepancyStatusFilter)
                  }
                  className="w-full bg-transparent text-sm outline-none appearance-none text-black"
                  style={{ padding: "8px" }}
                >
                  {statusOptions.map((option) => (
                    <option key={option.value} value={option.value}>
                      {option.label}
                    </option>
                  ))}
                </select>
                <MdKeyboardArrowDown size={16} className="text-black" />
              </div>
            </div>

            {/* Condition */}
            <div className="px-6 pb-4">
              <h3 className="font-medium text-gray-400 mb-2">Condition</h3>
              <div className="flex items-center rounded-lg border border-gray-300 w-full pr-2">
                <select
                  value={condition}
                  onChange={(e) =>
                    setCondition(e.target.value as DiscrepancyConditionFilter)
                  }
                  className="w-full bg-transparent text-sm outline-none appearance-none text-black"
                  style={{ padding: "8px" }}
                >
                  {conditionOptions.map((option) => (
                    <option key={option.value} value={option.value}>
                      {option.label}
                    </option>
                  ))}
                </select>
                <MdKeyboardArrowDown size={16} className="text-black" />
              </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 DiscrepanciesFilterPopover;