'use client';

import { useState } from 'react';

interface OrdersFilterProps {
  searchQuery: string;
  setSearchQuery: (query: string) => void;
  statusFilter: string;
  setStatusFilter: (status: string) => void;
  paymentFilter: string;
  setPaymentFilter: (payment: string) => void;
}

const statusOptions = ['الكل', 'مكتمل', 'قيد المعالجة', 'ملغي'];
const paymentOptions = ['الكل', 'المحفظة', 'بطاقة ائتمان'];

export default function OrdersFilter({
  searchQuery,
  setSearchQuery,
  statusFilter,
  setStatusFilter,
  paymentFilter,
  setPaymentFilter,
}: OrdersFilterProps) {
  const [showStatusDropdown, setShowStatusDropdown] = useState(false);
  const [showPaymentDropdown, setShowPaymentDropdown] = useState(false);

  // Helper to safely reset filters
  const resetFilters = () => {
    try {
      setSearchQuery('');
      setStatusFilter('الكل');
      setPaymentFilter('الكل');
    } catch (error) {
      console.error('Failed to reset filters:', error);
    }
  };

  return (
    <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-5 mb-6">
      <div className="flex flex-col lg:flex-row items-start lg:items-center gap-4">
        <div className="relative flex-1 w-full">
          <i className="ri-search-line absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 text-lg"></i>
          <input
            type="text"
            placeholder="ابحث برقم الطلب أو اسم المنتج..."
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
            className="w-full pr-10 pl-4 py-2.5 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm bg-gray-50"
          />
        </div>

        <div className="flex items-center gap-3">
          {/* Status filter dropdown */}
          <div className="relative">
            <button
              onClick={() => {
                setShowStatusDropdown(!showStatusDropdown);
                setShowPaymentDropdown(false);
              }}
              className="flex items-center gap-2 px-4 py-2.5 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors cursor-pointer text-sm whitespace-nowrap"
            >
              <i className="ri-filter-3-line text-gray-500"></i>
              <span className="text-gray-700">الحالة: {statusFilter}</span>
              <i className="ri-arrow-down-s-line text-gray-400"></i>
            </button>
            {showStatusDropdown && (
              <div className="absolute top-full mt-2 right-0 bg-white border border-gray-200 rounded-lg shadow-lg z-20 min-w-[160px]">
                {statusOptions.map((option) => (
                  <button
                    key={option}
                    onClick={() => {
                      setStatusFilter(option);
                      setShowStatusDropdown(false);
                    }}
                    className={`w-full text-right px-4 py-2.5 text-sm hover:bg-blue-50 transition-colors cursor-pointer first:rounded-t-lg last:rounded-b-lg ${
                      statusFilter === option ? 'bg-blue-50 text-blue-600 font-semibold' : 'text-gray-700'
                    }`}
                  >
                    {option}
                  </button>
                ))}
              </div>
            )}
          </div>

          {/* Payment filter dropdown */}
          <div className="relative">
            <button
              onClick={() => {
                setShowPaymentDropdown(!showPaymentDropdown);
                setShowStatusDropdown(false);
              }}
              className="flex items-center gap-2 px-4 py-2.5 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors cursor-pointer text-sm whitespace-nowrap"
            >
              <i className="ri-bank-card-line text-gray-500"></i>
              <span className="text-gray-700">الدفع: {paymentFilter}</span>
              <i className="ri-arrow-down-s-line text-gray-400"></i>
            </button>
            {showPaymentDropdown && (
              <div className="absolute top-full mt-2 right-0 bg-white border border-gray-200 rounded-lg shadow-lg z-20 min-w-[160px]">
                {paymentOptions.map((option) => (
                  <button
                    key={option}
                    onClick={() => {
                      setPaymentFilter(option);
                      setShowPaymentDropdown(false);
                    }}
                    className={`w-full text-right px-4 py-2.5 text-sm hover:bg-blue-50 transition-colors cursor-pointer first:rounded-t-lg last:rounded-b-lg ${
                      paymentFilter === option ? 'bg-blue-50 text-blue-600 font-semibold' : 'text-gray-700'
                    }`}
                  >
                    {option}
                  </button>
                ))}
              </div>
            )}
          </div>

          {/* Clear filters button */}
          {(statusFilter !== 'الكل' || paymentFilter !== 'الكل' || searchQuery) && (
            <button
              onClick={resetFilters}
              className="flex items-center gap-1 px-3 py-2.5 text-red-600 hover:bg-red-50 rounded-lg transition-colors cursor-pointer text-sm whitespace-nowrap"
            >
              <i className="ri-close-circle-line"></i>
              <span>مسح الفلاتر</span>
            </button>
          )}
        </div>
      </div>
    </div>
  );
}