"use client";

import { useEffect, useState } from "react";
import { useRouter, useSearchParams } from "next/navigation";
import { FilterCategory } from "./filterTypes";

const filters: FilterCategory[] = [
  {
    id: "gsm",
    title: "gsm",
    options: [
      { label: "50-100", value: "50-100", checked: false },
      { label: "100-150", value: "100-150", checked: false },
      { label: "150-200", value: "150-200", checked: false },
      { label: "200-250", value: "200-250", checked: false },
      { label: "250+", value: "250+", checked: false },
    ],
  },
  {
    id: "finish",
    title: "Finish",
    options: [
      { label: "Ready for Dye", value: "Ready for Dye", checked: false },
      { label: "Greige", value: "Greige", checked: false },
      { label: "Azo Free Yarn Dyed", value: "Azo Free Yarn Dyed", checked: false },
      { label: "Azo Free Piece Dyed", value: "Azo Free Piece Dyed", checked: false },
      { label: "Digital Printed", value: "Digital Printed", checked: false },
      { label: "Eco Printed", value: "Eco Printed", checked: false },
      { label: "Block Printed", value: "Block Printed", checked: false },
      { label: "Screen Printed", value: "Screen Printed", checked: false },
    ],
  },
  {
    id: "idealFor",
    title: "Ideal for",
    options: [
      { label: "Tops", value: 14, checked: false },
      { label: "Bottoms", value: 12, checked: false },
      { label: "Co-ord Sets", value: 13, checked: false },
      { label: "Suits", value: 22, checked: false },
      { label: "One-Pieces", value: 27, checked: false },
      { label: "Outerwear", value: 17, checked: false },
      { label: "Bags", value: 26, checked: false },
      { label: "Activewear", value: 21, checked: false },
    ],
  },
  {
    id: "color",
    title: "Color",
    options: [
      { label: "Red", value: 1, checked: false },
      { label: "Orange", value: 2, checked: false },
      { label: "Yellow", value: 3, checked: false },
      { label: "Green", value: 4, checked: false },
      { label: "Blue", value: 5, checked: false },
      { label: "Purple", value: 6, checked: false },
      { label: "Pink", value: 7, checked: false },
      { label: "Natural", value: 8, checked: false },
      { label: "Black", value: 9, checked: false },
      { label: "White", value: 10, checked: false },
      { label: "Grey", value: 11, checked: false },
      { label: "Brown", value: 12, checked: false },
    ],
  },
];

export default function FabricFilters(props: any) {
  const [openId, setOpenId] = useState<string | null>(null);
  const [localFilters, setLocalFilters] = useState<FilterCategory[]>([]);
  const router = useRouter();
  const searchQueryString = useSearchParams();

  const totalResultsCount = props.totalResults || 0;

  useEffect(() => {
  const params = new URLSearchParams(searchQueryString.toString());

  const initializedFilters = filters.map((filter) => {
    const selectedValues = params.get(filter.id)?.split(",") || [];

    return {
      ...filter,
      options: filter.options.map((opt) => ({
        ...opt,
        checked: selectedValues.includes(opt.value.toString()),
      })),
    };
  });

  setLocalFilters(initializedFilters);

  if (filters.length > 0) {
    setOpenId(filters[0].id);
  }
}, [searchQueryString]);


  const toggleAccordion = (id: string) => {
    setOpenId((prev) => (prev === id ? null : id));
  };

  const handleCheckboxChange = (
    sectionId: string,
    optionValue: string,
    checked: boolean
  ) => {
    const updatedFilters = localFilters.map((filter) => {
      if (filter.id !== sectionId) return filter;

      return {
        ...filter,
        options: filter.options.map((opt) =>
          opt.value.toString() === optionValue
            ? { ...opt, checked }
            : opt
        ),
      };
    });

    setLocalFilters(updatedFilters);
  };

  const handleApplyFilter = () => {
    const url = new URL(window.location.href);
    const params = new URLSearchParams(url.search);

    // Clear existing filters
    filters.forEach((filter) => {
      params.delete(filter.id);
    });

    // Set selected filters
    localFilters.forEach((filter) => {
      const selected = filter.options
        .filter((opt) => opt.checked)
        .map((opt) => opt.value);

      if (selected.length > 0) {
        params.set(filter.id, selected.join(","));
      }
    });

    params.set("hasFilterClick", Math.random().toString());
    router.push(`?${params.toString()}`);
    router.refresh();
  };

  const handleClearAll = () => {
    const clearedFilters = localFilters.map((filter) => ({
      ...filter,
      options: filter.options.map((opt) => ({ ...opt, checked: false })),
    }));

    setLocalFilters(clearedFilters);
    window.history.replaceState(null, "", window.location.pathname);
  };

  return (
    <>
      <div className="flex flex-col border-t-1">
        {localFilters.map((filter) => {
          const isOpen = openId === filter.id;
          return (
            <div key={filter.id} className="flex flex-col border-b-1">
              <button
                onClick={() => toggleAccordion(filter.id)}
                className="flex w-full items-center justify-between py-0.5 text-xs font-medium uppercase"
              >
                <span>{filter.title}</span>
                <span className="text-lg font-normal">
                  {isOpen ? "-" : "+"}
                </span>
              </button>

              {isOpen && (
                <div className="pb-2">
                  {filter.options.map((option) => (
                    <label
                      key={option.value}
                      className="flex py-1 text-xs font-medium"
                    >
                      <input
                        type="checkbox"
                        className="mr-2 appearance-auto rounded-none accent-gray-950"
                        checked={option.checked}
                        onChange={(e) =>
                          handleCheckboxChange(
                            filter.id,
                            option.value.toString(),
                            e.target.checked
                          )
                        }
                      />
                      {option.label}
                    </label>
                  ))}
                </div>
              )}
            </div>
          );
        })}
      </div>

      <div className="flex flex-col items-center justify-center gap-4">
        {totalResultsCount > 0 ? (
          <button
            className="btn-outline w-full"
            type="button"
            onClick={handleApplyFilter}
          >
            Apply Filter
          </button>
        ) : (
          <div className="text-xs text-red-500">No results found.</div>
        )}

        <button className="btn-link" type="button" onClick={handleClearAll}>
          Clear All
        </button>
      </div>
    </>
  );
}