'use client'

import { useState, useEffect } from 'react'
import { useApp } from '@/contexts/AppContext'

interface SearchBarProps {
  placeholder?: string
  showFilters?: boolean
}

export function SearchBar({ placeholder = "Search vintage treasures...", showFilters = true }: SearchBarProps) {
  const { state, searchItems } = useApp()
  const [query, setQuery] = useState(state.searchQuery)
  const [showFilterPanel, setShowFilterPanel] = useState(false)
  const [filters, setFilters] = useState(state.searchFilters)

  useEffect(() => {
    const debounceTimer = setTimeout(() => {
      searchItems(query, filters)
    }, 300)

    return () => clearTimeout(debounceTimer)
  }, [query, filters])

  const handleFilterChange = (key: string, value: any) => {
    const newFilters = { ...filters, [key]: value }
    setFilters(newFilters)
  }

  const clearFilters = () => {
    setFilters({})
    setQuery('')
  }

  return (
    <div className="search-container" style={{ position: 'relative', width: '100%', maxWidth: '600px' }}>
      {/* Search Input */}
      <div style={{
        position: 'relative',
        display: 'flex',
        alignItems: 'center',
        backgroundColor: 'white',
        border: '2px solid #8B7D6B',
        borderRadius: '4px',
        overflow: 'hidden'
      }}>
        <div style={{
          padding: '12px 16px',
          color: '#8B7D6B',
          fontSize: '18px'
        }}>
          🔍
        </div>
        <input
          type="text"
          value={query}
          onChange={(e) => setQuery(e.target.value)}
          placeholder={placeholder}
          style={{
            flex: 1,
            padding: '12px 0',
            border: 'none',
            outline: 'none',
            fontFamily: 'Spectral, serif',
            fontSize: '16px',
            color: '#1E1A17',
            backgroundColor: 'transparent'
          }}
        />
        {showFilters && (
          <button
            onClick={() => setShowFilterPanel(!showFilterPanel)}
            style={{
              padding: '12px 16px',
              border: 'none',
              backgroundColor: showFilterPanel ? '#C89C2B' : 'transparent',
              color: showFilterPanel ? '#F7F1E1' : '#8B7D6B',
              cursor: 'pointer',
              fontFamily: 'Space Mono, monospace',
              fontSize: '12px',
              textTransform: 'uppercase',
              letterSpacing: '0.1em',
              transition: 'all 0.3s ease'
            }}
          >
            Filters
          </button>
        )}
      </div>

      {/* Filter Panel */}
      {showFilterPanel && (
        <div style={{
          position: 'absolute',
          top: '100%',
          left: 0,
          right: 0,
          backgroundColor: 'white',
          border: '2px solid #8B7D6B',
          borderTop: 'none',
          padding: '24px',
          zIndex: 10,
          boxShadow: '0 4px 8px rgba(30, 26, 23, 0.1)'
        }}>
          <div style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))',
            gap: '24px'
          }}>
            {/* Category Filter */}
            <div>
              <label style={{
                fontFamily: 'Space Mono, monospace',
                fontSize: '12px',
                textTransform: 'uppercase',
                letterSpacing: '0.1em',
                color: '#8B7D6B',
                display: 'block',
                marginBottom: '8px'
              }}>
                Category
              </label>
              <select
                value={filters.category || ''}
                onChange={(e) => handleFilterChange('category', e.target.value || undefined)}
                style={{
                  width: '100%',
                  padding: '8px 12px',
                  border: '1px solid #8B7D6B',
                  borderRadius: '4px',
                  fontFamily: 'Spectral, serif',
                  fontSize: '14px',
                  backgroundColor: 'white'
                }}
              >
                <option value="">All Categories</option>
                <option value="photography">Photography</option>
                <option value="music">Music</option>
                <option value="books">Books</option>
                <option value="design">Design</option>
              </select>
            </div>

            {/* Price Range */}
            <div>
              <label style={{
                fontFamily: 'Space Mono, monospace',
                fontSize: '12px',
                textTransform: 'uppercase',
                letterSpacing: '0.1em',
                color: '#8B7D6B',
                display: 'block',
                marginBottom: '8px'
              }}>
                Price Range
              </label>
              <div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
                <input
                  type="number"
                  placeholder="Min"
                  value={filters.priceMin || ''}
                  onChange={(e) => handleFilterChange('priceMin', e.target.value ? Number(e.target.value) : undefined)}
                  style={{
                    flex: 1,
                    padding: '8px 12px',
                    border: '1px solid #8B7D6B',
                    borderRadius: '4px',
                    fontFamily: 'Spectral, serif',
                    fontSize: '14px'
                  }}
                />
                <span style={{ color: '#8B7D6B' }}>-</span>
                <input
                  type="number"
                  placeholder="Max"
                  value={filters.priceMax || ''}
                  onChange={(e) => handleFilterChange('priceMax', e.target.value ? Number(e.target.value) : undefined)}
                  style={{
                    flex: 1,
                    padding: '8px 12px',
                    border: '1px solid #8B7D6B',
                    borderRadius: '4px',
                    fontFamily: 'Spectral, serif',
                    fontSize: '14px'
                  }}
                />
              </div>
            </div>

            {/* Sort By */}
            <div>
              <label style={{
                fontFamily: 'Space Mono, monospace',
                fontSize: '12px',
                textTransform: 'uppercase',
                letterSpacing: '0.1em',
                color: '#8B7D6B',
                display: 'block',
                marginBottom: '8px'
              }}>
                Sort By
              </label>
              <select
                value={filters.sortBy || 'date'}
                onChange={(e) => handleFilterChange('sortBy', e.target.value)}
                style={{
                  width: '100%',
                  padding: '8px 12px',
                  border: '1px solid #8B7D6B',
                  borderRadius: '4px',
                  fontFamily: 'Spectral, serif',
                  fontSize: '14px',
                  backgroundColor: 'white'
                }}
              >
                <option value="date">Newest First</option>
                <option value="price-low">Price: Low to High</option>
                <option value="price-high">Price: High to Low</option>
                <option value="rarity">Rarity</option>
              </select>
            </div>
          </div>

          {/* Filter Actions */}
          <div style={{
            display: 'flex',
            justifyContent: 'space-between',
            alignItems: 'center',
            marginTop: '24px',
            paddingTop: '16px',
            borderTop: '1px solid #8B7D6B'
          }}>
            <div style={{
              fontFamily: 'Space Mono, monospace',
              fontSize: '12px',
              color: '#8B7D6B'
            }}>
              {state.filteredItems.length} items found
            </div>
            <div style={{ display: 'flex', gap: '12px' }}>
              <button
                onClick={clearFilters}
                style={{
                  padding: '8px 16px',
                  border: '1px solid #8B7D6B',
                  backgroundColor: 'transparent',
                  color: '#8B7D6B',
                  fontFamily: 'Space Mono, monospace',
                  fontSize: '12px',
                  textTransform: 'uppercase',
                  letterSpacing: '0.1em',
                  cursor: 'pointer',
                  borderRadius: '4px'
                }}
              >
                Clear
              </button>
              <button
                onClick={() => setShowFilterPanel(false)}
                className="ticket-button"
                style={{ fontSize: '12px', padding: '8px 16px' }}
              >
                Apply
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  )
}