import React from "react";
import { Filter, CloseSquare } from "iconsax-react";
import Input from "../../../components/Input";
import Select from "../../../components/Select";
import DatePicker from "../../../components/DatePicker";
import Button from "../../../components/Button";
import {
    AccessLogQuery,
    OperationType,
    UserType,
    OperationTypeLabels,
    UserTypeLabels,
} from "../types/AccessLogTypes";

interface FilterPanelProps {
    filters: AccessLogQuery;
    onFiltersChange: (filters: Partial<AccessLogQuery>) => void;
    onReset: () => void;
    loading?: boolean;
}

const FilterPanel: React.FC<FilterPanelProps> = ({
    filters,
    onFiltersChange,
    onReset,
    loading = false,
}) => {
    const operationTypeOptions = Object.values(OperationType).map((type) => ({
        value: type,
        label: OperationTypeLabels[type],
    }));

    const userTypeOptions = Object.values(UserType).map((type) => ({
        value: type,
        label: UserTypeLabels[type],
    }));

    const statusCodeOptions = [
        { value: "200", label: "200 - موفق" },
        { value: "201", label: "201 - ایجاد شده" },
        { value: "400", label: "400 - درخواست نامعتبر" },
        { value: "401", label: "401 - عدم احراز هویت" },
        { value: "403", label: "403 - عدم دسترسی" },
        { value: "404", label: "404 - یافت نشد" },
        { value: "500", label: "500 - خطای سرور" },
    ];

    const hasActiveFilters = () => {
        return Object.entries(filters).some(([key, value]) => {
            if (key === "page" || key === "limit" || key === "sortBy" || key === "sortOrder") {
                return false;
            }
            return value !== undefined && value !== null && value !== "";
        });
    };

    return (
        <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6 mb-6">
            <div className="flex items-center justify-between mb-4">
                <div className="flex items-center gap-2">
                    <Filter size={20} className="text-gray-600" />
                    <h3 className="text-lg font-semibold text-gray-900">فیلترها</h3>
                    {hasActiveFilters() && (
                        <span className="bg-blue-100 text-blue-800 text-xs font-medium px-2 py-1 rounded-full">
                            فعال
                        </span>
                    )}
                </div>
                {hasActiveFilters() && (
                    <Button
                        onClick={onReset}
                        disabled={loading}
                        className="text-sm px-3 py-1 border border-gray-300 bg-white text-gray-600 hover:text-gray-800"
                    >
                        <CloseSquare size={16} className="ml-1" />
                        پاک کردن فیلترها
                    </Button>
                )}
            </div>

            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
                {/* Search */}
                <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">
                        جستجو
                    </label>
                    <Input
                        placeholder="جستجو در توضیحات و نام موجودیت..."
                        value={filters.search || ""}
                        onChange={(e: React.ChangeEvent<HTMLInputElement>) => onFiltersChange({ search: e.target.value })}
                        disabled={loading}
                    />
                </div>

                {/* Operation Type */}
                <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">
                        نوع عملیات
                    </label>
                    <Select
                        items={[{ value: "", label: "همه" }, ...operationTypeOptions]}
                        value={filters.operationType || ""}
                        onChange={(e: React.ChangeEvent<HTMLSelectElement>) => onFiltersChange({ operationType: e.target.value as OperationType })}
                        disabled={loading}
                    />
                </div>

                {/* User Type */}
                <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">
                        نوع کاربر
                    </label>
                    <Select
                        items={[{ value: "", label: "همه" }, ...userTypeOptions]}
                        value={filters.userType || ""}
                        onChange={(e: React.ChangeEvent<HTMLSelectElement>) => onFiltersChange({ userType: e.target.value as UserType })}
                        disabled={loading}
                    />
                </div>

                {/* Entity Name */}
                <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">
                        نام موجودیت
                    </label>
                    <Input
                        placeholder="مثال: User, Blog, Service"
                        value={filters.entityName || ""}
                        onChange={(e: React.ChangeEvent<HTMLInputElement>) => onFiltersChange({ entityName: e.target.value })}
                        disabled={loading}
                    />
                </div>



                {/* Status Code */}
                <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">
                        کد وضعیت
                    </label>
                    <Select
                        items={[{ value: "", label: "همه" }, ...statusCodeOptions]}
                        value={filters.statusCode?.toString() || ""}
                        onChange={(e: React.ChangeEvent<HTMLSelectElement>) => onFiltersChange({ statusCode: e.target.value ? parseInt(e.target.value) : undefined })}
                        disabled={loading}
                    />
                </div>



                {/* User ID */}
                <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">
                        شناسه کاربر
                    </label>
                    <Input
                        placeholder="شناسه کاربر"
                        value={filters.userId || ""}
                        onChange={(e: React.ChangeEvent<HTMLInputElement>) => onFiltersChange({ userId: e.target.value })}
                        disabled={loading}
                    />
                </div>

                {/* Start Date */}
                <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">
                        از تاریخ
                    </label>
                    <DatePicker
                        defaulValue={filters.startDate || ""}
                        onChange={(value: string) => onFiltersChange({ startDate: value })}
                        placeholder="انتخاب تاریخ شروع"
                    />
                </div>

                {/* End Date */}
                <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">
                        تا تاریخ
                    </label>
                    <DatePicker
                        defaulValue={filters.endDate || ""}
                        onChange={(value: string) => onFiltersChange({ endDate: value })}
                        placeholder="انتخاب تاریخ پایان"
                    />
                </div>

            </div>
        </div>
    );
};

export default FilterPanel;
