import React, { useState } from 'react';

const FilterMenu = () => {
  const [price, setPrice] = useState(1500);
  const [temperature, setTemperature] = useState('any');
  const [dateRange, setDateRange] = useState('last-year');
  const [retailer, setRetailer] = useState('Amazon');

  const handlePriceChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setPrice(Number(e.target.value));
  };

  const handleTemperatureChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setTemperature(e.target.value);
  };

  const handleDateRangeChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
    setDateRange(e.target.value);
  };

  const handleRetailerChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
    setRetailer(e.target.value);
  };

  return (
    <div className="bg-surface p-6 shadow-lg rounded-lg border border-border">
      <h3 className="text-lg font-semibold text-text mb-4">Filteler</h3>

      {/* Sort By */}
      <div className="mb-6">
        <label className="block text-sm text-text-muted mb-2">Sıralama</label>
        <select
          className="w-full p-3 border border-border rounded-md focus:ring-2 focus:ring-primary transition-all"
          value={temperature}
          onChange={handleTemperatureChange}
        >
          <option value="most-recent">En yeni</option>
          <option value="lowest-price">En düşük fiyat</option>
          <option value="highest-price">En yüksek fiyat</option>
        </select>
      </div>

      {/* Price Slider */}
      <div className="mb-6">
        <label className="block text-sm text-text-muted mb-2">Fiyat</label>
        <input
          type="range"
          min="0"
          max="3000"
          step="10"
          value={price}
          onChange={handlePriceChange}
          className="w-full h-2 bg-gradient-to-r from-orange-400 to-orange-600 rounded-lg appearance-none focus:outline-none"
        />
        <div className="flex justify-between text-sm text-text-muted mt-2">
          <span>£0</span><span>£3000</span>
        </div>
      </div>

      {/* Temperature Radio Buttons */}
      <div className="mb-6">
        <label className="block text-sm text-text-muted mb-2">Sıcaklık</label>
        <div className="flex flex-col gap-2">
          <label className="flex items-center">
            <input
              type="radio"
              name="temperature"
              value="any"
              checked={temperature === 'any'}
              onChange={handleTemperatureChange}
              className="mr-2"
            />
            Herhangi bir sıcaklık
          </label>
          <label className="flex items-center">
            <input
              type="radio"
              name="temperature"
              value="20-up"
              checked={temperature === '20-up'}
              onChange={handleTemperatureChange}
              className="mr-2"
            />
            20° & üstü
          </label>
          <label className="flex items-center">
            <input
              type="radio"
              name="temperature"
              value="100-up"
              checked={temperature === '100-up'}
              onChange={handleTemperatureChange}
              className="mr-2"
            />
            100° & üstü
          </label>
          <label className="flex items-center">
            <input
              type="radio"
              name="temperature"
              value="500-up"
              checked={temperature === '500-up'}
              onChange={handleTemperatureChange}
              className="mr-2"
            />
            500° & üstü
          </label>
        </div>
      </div>

      {/* Date Range Dropdown */}
      <div className="mb-6">
        <label className="block text-sm text-text-muted mb-2">Tarih Aralığı</label>
        <select
          className="w-full p-3 border border-border rounded-md focus:ring-2 focus:ring-primary transition-all"
          value={dateRange}
          onChange={handleDateRangeChange}
        >
          <option value="last-year">Geçen yıl</option>
          <option value="last-month">Geçen ay</option>
          <option value="last-week">Geçen hafta</option>
        </select>
      </div>

      {/* Retailer Dropdown */}
      <div className="mb-6">
        <label className="block text-sm text-text-muted mb-2">Perakendeci</label>
        <select
          className="w-full p-3 border border-border rounded-md focus:ring-2 focus:ring-primary transition-all"
          value={retailer}
          onChange={handleRetailerChange}
        >
          <option value="Amazon">Amazon</option>
          <option value="eBay">eBay</option>
          <option value="Best Buy">Best Buy</option>
        </select>
      </div>

      {/* Reset Button */}
      <button
        className="w-full p-3 bg-primary text-on-primary rounded-lg hover:bg-primary-hover transition-all"
        onClick={() => {
          setPrice(1500);
          setTemperature('any');
          setDateRange('last-year');
          setRetailer('Amazon');
        }}
      >
        Filtreleri Sıfırla
      </button>
    </div>
  );
};

export default FilterMenu;
