"use client";

import { cn } from "@/app/lib/cn";
import { AddSquare, MinusSquare } from "iconsax-reactjs";
import { useState, type FC } from "react";
import { FILTER_SECTIONS, type FilterSection } from "../constants";

const CategoryFilters: FC = () => {
  const [openSections, setOpenSections] = useState<Record<string, boolean>>(() => Object.fromEntries(FILTER_SECTIONS.map((section) => [section.id, Boolean(section.defaultOpen)])));
  const [selected, setSelected] = useState<string[]>([]);

  const toggleSection = (id: string) => {
    setOpenSections((prev) => ({ ...prev, [id]: !prev[id] }));
  };

  const toggleOption = (option: string) => {
    setSelected((prev) => (prev.includes(option) ? prev.filter((item) => item !== option) : [...prev, option]));
  };

  return (
    <div className="w-full shrink-0 lg:w-70 xl:w-75">
      <aside className="rounded-2xl bg-white p-4 shadow-[0_0_6px_rgba(50,103,137,0.18)] sm:rounded-3xl sm:p-5">
        <h2 className="mb-4 text-center text-lg font-bold text-[#0A1B2C]">فیلترها</h2>

        <div className="flex flex-col gap-3">
          {FILTER_SECTIONS.map((section) => (
            <FilterAccordion
              key={section.id}
              section={section}
              isOpen={Boolean(openSections[section.id])}
              selected={selected}
              onToggle={() => toggleSection(section.id)}
              onToggleOption={toggleOption}
            />
          ))}
        </div>
      </aside>
    </div>
  );
};

type FilterAccordionProps = {
  section: FilterSection;
  isOpen: boolean;
  selected: string[];
  onToggle: () => void;
  onToggleOption: (option: string) => void;
};

const FilterAccordion: FC<FilterAccordionProps> = ({ section, isOpen, selected, onToggle, onToggleOption }) => {
  const Icon = isOpen ? MinusSquare : AddSquare;

  return (
    <div className="rounded-xl bg-[rgba(233,238,242,0.35)] p-3">
      <button type="button" className="flex w-full items-center justify-between gap-2" onClick={onToggle} aria-expanded={isOpen}>
        <span className="text-sm text-[#0A1B2C] sm:text-base">{section.title}</span>
        <Icon size={16} color="currentColor" className="shrink-0 text-primary" />
      </button>

      {isOpen && section.options && (
        <ul className="mt-3 flex flex-col gap-2.5">
          {section.options.map((option) => {
            const checked = selected.includes(option);

            return (
              <li key={option}>
                <button type="button" className="flex w-full items-center gap-2" onClick={() => onToggleOption(option)}>
                  <span
                    role="checkbox"
                    aria-checked={checked}
                    className={cn("size-4 shrink-0 rounded border-2 transition-colors", checked ? "border-primary bg-primary" : "border-[rgba(50,103,137,0.29)] bg-transparent")}
                  />
                  <span className="text-right text-sm text-[#53606B]">{option}</span>
                </button>
              </li>
            );
          })}
        </ul>
      )}
    </div>
  );
};

export default CategoryFilters;
