"use client";

import React, { useEffect, useState } from "react";
import { MdKeyboardArrowDown } from "react-icons/md";
import {
    StockAdjustmentTypeFilter,
    StockAdjustmentVoidFilter,
    STOCK_ADJUSTMENT_TYPE_LABELS,
    StockAdjustmentType,
} from "@/types/stock-adjustment";

interface FilterValues {
    voided: StockAdjustmentVoidFilter;
    adjustmentType: StockAdjustmentTypeFilter;
    warehouseId: number | null;
}

interface Props {
    isOpen: boolean;
    onClose: () => void;
    onApply: (filters: FilterValues) => void;
    initialFilters: FilterValues;
    warehouseOptions: Array<{ id: number; name: string }>;
}

const voidedOptions: Array<{ value: StockAdjustmentVoidFilter; label: string }> =
    [
        { value: "active", label: "Active" },
        { value: "voided", label: "Voided" },
        { value: "all", label: "All" },
    ];

const StockAdjustmentsFilterPopover: React.FC<Props> = ({
    isOpen,
    onClose,
    onApply,
    initialFilters,
    warehouseOptions,
}) => {
    const [voided, setVoided] = useState<StockAdjustmentVoidFilter>(
        initialFilters.voided
    );
    const [adjustmentType, setAdjustmentType] =
        useState<StockAdjustmentTypeFilter>(initialFilters.adjustmentType);
    const [warehouseId, setWarehouseId] = useState<number | null>(
        initialFilters.warehouseId
    );

    useEffect(() => {
        if (isOpen) {
            setVoided(initialFilters.voided);
            setAdjustmentType(initialFilters.adjustmentType);
            setWarehouseId(initialFilters.warehouseId);
        }
    }, [isOpen, initialFilters]);

    if (!isOpen) return null;

    const handleApply = () => {
        onApply({ voided, adjustmentType, warehouseId });
        onClose();
    };

    const handleClear = () => {
        setVoided("active");
        setAdjustmentType("all");
        setWarehouseId(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={voided}
                                    onChange={(e) =>
                                        setVoided(e.target.value as StockAdjustmentVoidFilter)
                                    }
                                    className="w-full bg-transparent text-sm outline-none appearance-none text-black"
                                    style={{ padding: "8px" }}
                                >
                                    {voidedOptions.map((option) => (
                                        <option key={option.value} value={option.value}>
                                            {option.label}
                                        </option>
                                    ))}
                                </select>
                                <MdKeyboardArrowDown size={16} className="text-black" />
                            </div>
                        </div>

                        <div className="px-6 pb-4">
                            <h3 className="font-medium text-gray-400 mb-2">Type</h3>
                            <div className="flex items-center rounded-lg border border-gray-300 w-full pr-2">
                                <select
                                    value={adjustmentType}
                                    onChange={(e) =>
                                        setAdjustmentType(
                                            e.target.value as StockAdjustmentTypeFilter
                                        )
                                    }
                                    className="w-full bg-transparent text-sm outline-none appearance-none text-black"
                                    style={{ padding: "8px" }}
                                >
                                    <option value="all">All</option>
                                    {Object.values(StockAdjustmentType).map((type) => (
                                        <option key={type} value={type}>
                                            {STOCK_ADJUSTMENT_TYPE_LABELS[type]}
                                        </option>
                                    ))}
                                </select>
                                <MdKeyboardArrowDown size={16} className="text-black" />
                            </div>
                        </div>

                        <div className="px-6 pb-4">
                            <h3 className="font-medium text-gray-400 mb-2">Warehouse</h3>
                            <div className="flex items-center rounded-lg border border-gray-300 w-full pr-2">
                                <select
                                    value={warehouseId ?? ""}
                                    onChange={(e) =>
                                        setWarehouseId(
                                            e.target.value ? Number(e.target.value) : null
                                        )
                                    }
                                    className="w-full bg-transparent text-sm outline-none appearance-none text-black"
                                    style={{ padding: "8px" }}
                                >
                                    <option value="">All warehouses</option>
                                    {warehouseOptions.map((w) => (
                                        <option key={w.id} value={w.id}>
                                            {w.name}
                                        </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 StockAdjustmentsFilterPopover;