import React, { useState } from 'react'
import { Tooltip } from 'antd'
import { useArchivedOrder } from '../../context/ArchivedOrderContext'

const SearchFilterSection = () => {
  const {
    searchQuery,
    setSearchQuery,
    handleSearch,
    handleClearSearch,
    filterStatus,
    handleStatusFilterChange,
    filterDateRange,
    handleDateFilterChange,
    handleApplyFilter,
    t
  } = useArchivedOrder()

  // Local state for filter dropdown visibility
  const [isFilterOpen, setIsFilterOpen] = useState(false)

  // Handle filter toggle
  const handleFilterToggle = () => {
    setIsFilterOpen(!isFilterOpen)
  }

  return (
    <div className='arcm-flex arcm-items-center arcm-gap-4 arcm-ml-auto'>
      {/* Search Section */}
      <div className='arcm-flex arcm-items-center arcm-gap-2'>
        <div className='arcm-relative'>
          <input
            type='text'
            className='!arcm-p-4 !arcm-bg-white arcm-h-[38px] !arcm-rounded-lg !arcm-border !arcm-border-gray-400 !arcm-text-black !arcm-text-sm !arcm-font-normal !arcm-shadow-none placeholder:!arcm-text-gray-400 !arcm-w-[256px] focus:!arcm-border-[#3858e9]'
            value={searchQuery}
            onChange={e => setSearchQuery(e.target.value)}
            placeholder={t('search_orders')}
          />
          {searchQuery && (
            <button
              type='button'
              onClick={handleClearSearch}
              className='arcm-absolute arcm-right-3 arcm-top-1/2 arcm--translate-y-1/2 arcm-text-gray-400 hover:arcm-text-gray-600'
              aria-label='Clear search'
            >
              <svg
                className='arcm-w-4 arcm-h-4'
                fill='none'
                stroke='currentColor'
                viewBox='0 0 24 24'
              >
                <path
                  strokeLinecap='round'
                  strokeLinejoin='round'
                  strokeWidth='2'
                  d='M6 18L18 6M6 6l12 12'
                />
              </svg>
            </button>
          )}
        </div>
        <button
          onClick={handleSearch}
          className='arcm-text-white arcm-text-xs arcm-font-medium arcm-px-4 arcm-h-[38px] arcm-bg-[#3858e9] arcm-rounded-lg arcm-justify-center arcm-items-center arcm-gap-2 arcm-inline-flex arcm-transition-all hover:arcm-bg-blue-700'
        >
          {t('search_orders_button')}
        </button>
      </div>

      {/* Filter Section */}
      <div className='arcm-flex arcm-items-center arcm-gap-2'>
        <div className='arcm-relative'>
          <button
            onClick={handleFilterToggle}
            className='arcm-text-gray-700 arcm-text-sm arcm-font-medium arcm-px-4 arcm-h-[38px] arcm-bg-white arcm-rounded-lg arcm-justify-center arcm-items-center arcm-gap-2 arcm-inline-flex arcm-transition-all hover:arcm-bg-gray-50 arcm-border arcm-border-gray-400'
          >
            {t('filter')}
            <svg
              className='arcm-w-4 arcm-h-4'
              fill='none'
              stroke='currentColor'
              viewBox='0 0 24 24'
            >
              <path
                strokeLinecap='round'
                strokeLinejoin='round'
                strokeWidth='2'
                d='M19 9l-7 7-7-7'
              />
            </svg>
          </button>
          {/* Filter Dropdown */}
          {isFilterOpen && (
            <div className='arcm-absolute arcm-right-0 arcm-mt-2 arcm-w-[380px] arcm-bg-white arcm-rounded-lg arcm-shadow-lg arcm-border arcm-border-gray-200 arcm-z-50'>
              <div className='arcm-p-4'>
                <h3 className='arcm-text-base arcm-font-bold arcm-text-gray-900 arcm-mb-4'>
                  {t('filter_by_status')}
                </h3>
                <div className='arcm-grid arcm-grid-cols-2 arcm-gap-x-6 arcm-gap-y-3'>
                  {(window?.archm_admin?.orderStatuses || []).map(status => {
                    const statusKey = status.value.replace('wc-', '')
                    return (
                      <label
                        key={statusKey}
                        className='arcm-flex arcm-items-center arcm-gap-2 arcm-min-w-0 arcm-overflow-hidden'
                      >
                        <div className='arcm-relative arcm-flex arcm-items-center arcm-flex-shrink-0 arcm-mt-0.5'>
                          <input
                            type='checkbox'
                            checked={filterStatus[statusKey] || false}
                            onChange={() =>
                              handleStatusFilterChange(statusKey)
                            }
                            className='arcm-h-[18px] arcm-w-[18px] arcm-rounded arcm-border-gray-300 arcm-appearance-none checked:arcm-bg-[#3858e9] checked:arcm-border-[#3858e9] focus:arcm-ring-[#3858e9] focus:arcm-ring-offset-0 arcm-relative arcm-filter-checkbox'
                          />
                          {filterStatus[statusKey] && (
                            <svg
                              className='arcm-absolute arcm-left-[3px] arcm-top-[0px] arcm-h-3 arcm-w-3 arcm-text-white arcm-pointer-events-none'
                              xmlns='http://www.w3.org/2000/svg'
                              viewBox='0 0 16 16'
                              fill='none'
                            >
                              <path
                                d='M13.3334 4L6.00008 11.3333L2.66675 8'
                                stroke='currentColor'
                                strokeWidth='2'
                                strokeLinecap='round'
                                strokeLinejoin='round'
                              />
                            </svg>
                          )}
                        </div>
                        <div className='arcm-flex arcm-items-center arcm-gap-2 arcm-min-w-0 arcm-flex-1'>
                          {status.label.length > 12 ? (
                            <Tooltip
                              title={status.label}
                              placement='top'
                              className=' arcm-text-sm'
                              color='#fff'
                            >
                              <span className='arcm-text-sm arcm-font-medium arcm-text-gray-700 arcm-truncate arcm-min-w-0'>
                                {status.label}
                              </span>
                            </Tooltip>
                          ) : (
                            <span className='arcm-text-sm arcm-font-medium arcm-text-gray-700 arcm-truncate arcm-min-w-0'>
                              {status.label}
                            </span>
                          )}
                          {status.isCustom && (
                            <span className='arcm-px-1.5 arcm-py-0.5 arcm-text-[11px] arcm-font-medium arcm-bg-blue-100 arcm-text-blue-700 arcm-rounded arcm-flex-shrink-0'>
                              Custom
                            </span>
                          )}
                        </div>
                      </label>
                    )
                  })}
                </div>
              </div>

              <div className='arcm-border-t arcm-border-gray-200 arcm-p-4'>
                <h3 className='arcm-text-base arcm-font-bold arcm-text-gray-900 arcm-mb-4'>
                  {t('filter_by_timeline')}
                </h3>
                <div className='arcm-grid arcm-grid-cols-2 arcm-gap-4'>
                  <div>
                    <label className='arcm-text-sm arcm-font-medium arcm-text-gray-700 arcm-block arcm-mb-1'>
                      {t('from_date')}
                    </label>
                    <input
                      type='date'
                      value={filterDateRange.fromDate}
                      onChange={e =>
                        handleDateFilterChange('fromDate', e.target.value)
                      }
                      className='arcm-w-full arcm-h-[38px] arcm-px-3 arcm-rounded-lg arcm-border arcm-border-gray-400 arcm-text-gray-700 arcm-text-sm focus:arcm-outline-none focus:arcm-ring-1 focus:arcm-ring-blue-500 focus:arcm-border-blue-500'
                    />
                  </div>
                  <div>
                    <label className='arcm-text-sm arcm-font-medium arcm-text-gray-700 arcm-block arcm-mb-1'>
                      {t('to_date')}
                    </label>
                    <input
                      type='date'
                      value={filterDateRange.toDate}
                      onChange={e =>
                        handleDateFilterChange('toDate', e.target.value)
                      }
                      className='arcm-w-full arcm-h-[38px] arcm-px-3 arcm-rounded-lg arcm-border arcm-border-gray-400 arcm-text-gray-700 arcm-text-sm focus:arcm-outline-none focus:arcm-ring-1 focus:arcm-ring-blue-500 focus:arcm-border-blue-500'
                    />
                  </div>
                </div>
              </div>

              <div className='arcm-border-t arcm-border-gray-200 arcm-p-4'>
                <button
                  onClick={handleApplyFilter}
                  className='arcm-w-full arcm-bg-[#3858e9] arcm-text-white arcm-h-[38px] arcm-rounded-lg arcm-text-sm arcm-font-medium hover:arcm-bg-blue-700 arcm-transition-colors'
                >
                  {t('apply_filter')}
                </button>
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  )
}

export default SearchFilterSection