import React, { useState } from "react";
import { useTranslation } from "react-i18next";
import { TiTick } from "react-icons/ti";
import { Divider } from "antd";
import styles from "../CategoryPage.module.scss";

const CategoryFilters = ({
  filtersData,
  selectedFilterCategory,
  selectedFilterBrand,
  brandSearchQuery,
  searchQuery,
  minPrice,
  maxPrice,
  onMinPriceChange,
  onMaxPriceChange,
  onCategorySelect,
  onCategoryDeselect,
  onBrandSelect,
  onBrandDeselect,
  onBrandSearchChange,
  sorting = "",
  onSortingChange = () => {},
  className,
}) => {
  const { t } = useTranslation();

  const pricePresets = [
    { label: t("category.under50"), min: 0, max: 50 },
    { label: t("category.under100"), min: 0, max: 100 },
    { label: t("category.from50to200"), min: 50, max: 200 },
    { label: t("category.from200to500"), min: 200, max: 500 },
    { label: t("category.from500to1000"), min: 500, max: 1000 },
    { label: t("category.over1000"), min: 1000, max: 999999 },
  ];

  const handlePricePreset = (preset) => {
    // Eğer zaten aktifse, sıfırla
    if (minPrice === preset.min.toString() && maxPrice === preset.max.toString()) {
      onMinPriceChange("");
      onMaxPriceChange("");
    } else {
      onMinPriceChange(preset.min.toString());
      onMaxPriceChange(preset.max.toString());
    }
  };

  const sortOptions = [
    { value: "price_amount-ascending", label: t("category.priceLowToHigh") },
    { value: "price_amount-descending", label: t("category.priceHighToLow") },
  ];

  if (searchQuery) return null;

  return (
    <aside className={`${styles.filtersContainer} ${className}`}>
      {filtersData?.categories?.length > 0 && (
        <div className={styles.filterSection}>
          <h3>{t("category.subCategories")}</h3>
          <ul>
            {filtersData.categories.map((category) => (
              <li
                key={category.id}
                onClick={() => {
                  if (selectedFilterCategory === category.id) {
                    onCategoryDeselect();
                  } else {
                    onCategorySelect(category.id);
                  }
                }}
                className={
                  selectedFilterCategory === category.id
                    ? styles.activeSubcategory
                    : ""
                }
              >
                {category.name}
              </li>
            ))}
          </ul>
        </div>
      )}

      {filtersData?.brands?.length > 0 && (
        <div className={styles.filterSection}>
          <h3>{t("navbar.brands")}</h3>

          <input
            type="text"
            placeholder="Gözleg"
            value={brandSearchQuery}
            onChange={(e) => onBrandSearchChange(e.target.value)}
            className={styles.searchInput}
          />

          <ul>
            {filtersData.brands
              .filter((brand) =>
                brand.name
                  .toLowerCase()
                  .includes(brandSearchQuery.toLowerCase()),
              )
              .map((brand) => (
                <li key={brand.id}>
                  <label>
                    <input
                      type="checkbox"
                      checked={selectedFilterBrand === brand.id}
                      onChange={() => {
                        if (selectedFilterBrand === brand.id) {
                          onBrandDeselect();
                        } else {
                          onBrandSelect(brand.id);
                        }
                      }}
                    />
                    <span className={styles.customCheckbox}>
                      <TiTick className={styles.checkIcon} />
                    </span>
                    {brand.name}
                  </label>
                </li>
              ))}
          </ul>
        </div>
      )}
      <div className={styles.filterSection}>
        <h3>{t("category.price")}</h3>
        
        <div className={styles.pricePresetsContainer}>
          {pricePresets.map((preset, idx) => (
            <button
              key={idx}
              className={`${styles.pricePresetBtn} ${
                minPrice === preset.min.toString() && maxPrice === preset.max.toString()
                  ? styles.activePreset
                  : ""
              }`}
              onClick={() => handlePricePreset(preset)}
            >
              {preset.label}
            </button>
          ))}
        </div>

        <div className={styles.priceFilterContainer}>
          <div className={styles.priceInputGroup}>
            <span className={styles.priceLabel}>{t("category.minPrice")}</span>
            <input
              type="number"
              min="0"
              placeholder={t("category.minPrice")}
              value={minPrice}
              onChange={(e) => onMinPriceChange(e.target.value)}
              className={styles.priceInput}
            />
          </div>
          <span className={styles.priceDivider}>-</span>
          <div className={styles.priceInputGroup}>
            <span className={styles.priceLabel}>{t("category.maxPrice")}</span>
            <input
              type="number"
              min="0"
              placeholder={t("category.maxPrice")}
              value={maxPrice}
              onChange={(e) => onMaxPriceChange(e.target.value)}
              className={styles.priceInput}
            />
          </div>
        </div>

        <Divider style={{ margin: "12px 0" }} />

        <div className={styles.sortingSection}>
          <h4 className={styles.sortingTitle}>{t("category.sortBy")}</h4>
          <div className={styles.sortingButtonsContainer}>
            {sortOptions.map((option) => (
              <button
                key={option.value}
                className={`${styles.sortingBtn} ${sorting === option.value ? styles.activeSorting : ""}`}
                onClick={() => onSortingChange(option.value)}
                aria-pressed={sorting === option.value}
              >
                {option.label}
                {sorting === option.value && (
                  <span style={{ marginLeft: 4, fontWeight: "bold" }}></span>
                )}
              </button>
            ))}
          </div>
        </div>
      </div>
    </aside>
  );
};

export default CategoryFilters;
