"use client";

import Image from "next/image";
import DataLink from "@/components/common/DataLink";
import type { FormEvent, MouseEvent } from "react";
import {
  shopAssets,
  shopCategories,
  shopPriceFilter,
  shopTags,
  shopTopRatedProducts,
} from "@/data/shop";

const iconImgStyle = { width: "auto", height: "auto" } as const;
const STAR_SIZE = 16;

export type ShopSidebarProps = {
  searchValue: string;
  onSearchChange: (value: string) => void;
  onSearchSubmit: (e: FormEvent<HTMLFormElement>) => void;
  priceSliderMin: number;
  priceSliderMax: number;
  onPriceSliderMinChange: (value: number) => void;
  onPriceSliderMaxChange: (value: number) => void;
  displayPriceMin: number;
  displayPriceMax: number;
  onApplyPriceFilter: (e: MouseEvent<HTMLAnchorElement>) => void;
  onResetFilters: (e: MouseEvent<HTMLAnchorElement>) => void;
  onCategoryClick: (
    categoryId: string,
    e: MouseEvent<HTMLAnchorElement>,
  ) => void;
  onTagClick: (tagId: string, e: MouseEvent<HTMLAnchorElement>) => void;
  onTopRatedProductClick: (
    shopProductId: string,
    e: MouseEvent<HTMLAnchorElement>,
  ) => void;
};

export default function ShopSidebar({
  searchValue,
  onSearchChange,
  onSearchSubmit,
  priceSliderMin,
  priceSliderMax,
  onPriceSliderMinChange,
  onPriceSliderMaxChange,
  displayPriceMin,
  displayPriceMax,
  onApplyPriceFilter,
  onResetFilters,
  onCategoryClick,
  onTagClick,
  onTopRatedProductClick,
}: ShopSidebarProps) {
  return (
    <div className="col-xl-3 col-lg-4">
      <div className="side-bar">
        <div className="side-widget2 form-widget2">
          <form className="comment-form2" onSubmit={onSearchSubmit}>
            <div className="form-group">
              <input
                type="text"
                name="name"
                placeholder="Search"
                value={searchValue}
                onChange={(e) => onSearchChange(e.target.value)}
                required={false}
              />
              <button type="submit" aria-label={shopAssets.searchAlt}>
                <Image
                  src={shopAssets.searchIcon}
                  alt=""
                  width={20}
                  height={20}
                  unoptimized
                  style={iconImgStyle}
                />
              </button>
            </div>
          </form>
        </div>

        <div className="side-widget2 price-filter-widget">
          <h4 className="side-bar-title">{shopPriceFilter.title}</h4>
          <div className="range-slider">
            <div className="progress" />
            <input
              type="range"
              min={shopPriceFilter.rangeMin}
              max={shopPriceFilter.rangeMax}
              value={priceSliderMin}
              id="minRange"
              onChange={(e) => onPriceSliderMinChange(Number(e.target.value))}
            />
            <input
              type="range"
              min={shopPriceFilter.rangeMin}
              max={shopPriceFilter.rangeMax}
              value={priceSliderMax}
              id="maxRange"
              onChange={(e) => onPriceSliderMaxChange(Number(e.target.value))}
            />
          </div>
          <div className="filter-btn">
            <p className="price-text">
              Price: <span>$</span>
              <span id="minPrice">{displayPriceMin}</span> — <span>$</span>
              <span id="maxPrice">{displayPriceMax}</span>
            </p>
            <DataLink
              href={shopPriceFilter.filterHref}
              title=""
              className="price-btn"
              onClick={onApplyPriceFilter}
            >
              {shopPriceFilter.filterLabel}
            </DataLink>
          </div>
        </div>

        <div className="side-widget2 product-list-widget">
          <h4 className="side-bar-title">Product categories</h4>
          <ul className="product-list2">
            {shopCategories.map((cat) => (
              <li key={cat.id}>
                <DataLink
                  href={cat.href}
                  onClick={(e) => onCategoryClick(cat.id, e)}
                >
                  {cat.label}
                  <span>({cat.count})</span>
                </DataLink>
              </li>
            ))}
          </ul>
        </div>

        <div className="side-widget2 product-widget">
          <h4 className="side-bar-title">Top rated products</h4>
          {shopTopRatedProducts.map((p) => (
            <div className="product-block" key={p.id}>
              <div className="product-img2">
                <DataLink
                  href={p.href}
                  onClick={(e) => onTopRatedProductClick(p.id, e)}
                >
                  <Image
                    src={p.imageSrc}
                    alt={p.imageAlt}
                    width={p.imageWidth}
                    height={p.imageHeight}
                    style={iconImgStyle}
                  />
                </DataLink>
              </div>
              <div className="shop-content2">
                <h3 className="title">
                  <DataLink
                    href={p.href}
                    onClick={(e) => onTopRatedProductClick(p.id, e)}
                  >
                    {p.title}
                  </DataLink>
                </h3>
                <ul className="rating-area">
                  {Array.from({ length: p.rating }, (_, i) => (
                    <li key={i}>
                      <Image
                        src={shopAssets.ratingIcon}
                        alt={shopAssets.ratingAlt}
                        width={STAR_SIZE}
                        height={STAR_SIZE}
                        style={iconImgStyle}
                      />
                    </li>
                  ))}
                </ul>
                <span className="price2">
                  {p.compareAtPrice ? <del>{p.compareAtPrice}</del> : null}
                  <span>{p.price}</span>
                </span>
              </div>
            </div>
          ))}
        </div>

        <div className="side-widget2 tag-widget">
          <h4 className="side-bar-title">Product tags</h4>
          <ul className="tag-list m-0">
            {shopTags.map((tag) => (
              <li key={tag.id}>
                <DataLink href={tag.href} onClick={(e) => onTagClick(tag.id, e)}>
                  {tag.label}
                </DataLink>
              </li>
            ))}
          </ul>
        </div>
        <div className="side-widget2 tag-widget">
          <h4 className="side-bar-title">Reset Filters</h4>
          <div className="mt-2">
            <DataLink
              href="#"
              title="Reset All Data"
              className="price-btn"
              onClick={onResetFilters}
            >
              Reset filters
            </DataLink>
          </div>
        </div>
      </div>
    </div>
  );
}