"use client";
import Image from "next/image";
import { useRouter, useParams, useSearchParams } from "next/navigation"; // اضافه شدن useParams و useSearchParams
import React, { useState, useEffect } from "react";
import RoundedInput from "@/components/elements/RoundedInput";
import FilterModal from "./FilterModal";
import BoldIcon from "@/components/ui/BoldIcon";
import Link from "next/link";

// وارد کردن دیتاها برای تبدیل نام فارسی به ID جهت روشن ماندن فیلترها
import provinces from "@/data/provinces.json";
import cities from "@/data/cities.json";

function BillboardsFilter() {
  const router = useRouter();
  const params = useParams(); // برای خواندن اسلاگ فارسی از URL
  const searchParams = useSearchParams(); // برای خواندن کوئری پارامترها (search و sort)

  const [showFilterModal, setShowFilterModal] = useState<boolean>(false);
  const [stateId, setStateId] = useState<string>("");
  const [cityId, setCityId] = useState<string>("");
  const [category, setCategory] = useState<string>("");
  const [sort, setSort] = useState<string>("");
  const [searchText, setSearchText] = useState<string>("");

  // --- بخش جدید: همگام‌سازی وضعیت فیلتر با URL در هنگام لود شدن صفحه ---
  useEffect(() => {
    const slugSegments = params.slug as string[];
    if (slugSegments && slugSegments.length > 0) {
      const fullText = decodeURIComponent(slugSegments[0]).replace(/-/g, ' ');

      if (fullText.startsWith("تبلیغات")) {
        // استخراج دسته‌بندی
        const afterAds = fullText.split("تبلیغات")[1]?.trim();
        if (afterAds) {
          const extractedCat = afterAds.split("در")[0]?.trim();
          if (extractedCat && !extractedCat.includes("خدمات مد و زیبایی")) {
            setCategory(extractedCat);
          }
        }

        // استخراج شهر یا استان و ست کردن ID آن‌ها برای فعال ماندن در مدال
        if (fullText.includes("در شهر")) {
          const cityName = fullText.split("در شهر")[1]?.trim();
          const foundCity = cities.find(c => cityName.includes(c.name));
          if (foundCity) setCityId(foundCity.id.toString());
        } else if (fullText.includes("در استان")) {
          const provinceName = fullText.split("در استان")[1]?.trim();
          const foundProvince = provinces.find(p => provinceName.includes(p.name));
          if (foundProvince) setStateId(foundProvince.id.toString());
        }
      }
    }

    // ست کردن مقادیر سرچ و سورت از URL
    setSearchText(searchParams.get("search") || "");
    setSort(searchParams.get("sort") || "");
  }, [params, searchParams]);
  // -----------------------------------------------------------------

  const handleFilterChange = () => {
    const provinceObj = provinces.find(p => String(p.id) === String(stateId));
    const cityObj = cities.find(c => String(c.id) === String(cityId));

    let slugParts = [];
    const prefix = "تبلیغات";

    if (category) {
      slugParts.push(`${prefix}-${category.replace(/\s+/g, '-')}`);
    } else {
      slugParts.push(`${prefix}-خدمات-مد-و-زیبایی`);
    }

    if (cityObj) {
      slugParts.push(`در-شهر-${cityObj.name.replace(/\s+/g, '-')}`);
    } else if (provinceObj) {
      slugParts.push(`در-استان-${provinceObj.name.replace(/\s+/g, '-')}`);
    }

    const finalSlug = slugParts.join("-");

    const queryParams = new URLSearchParams();
    if (searchText) queryParams.set("search", searchText);
    if (sort) queryParams.set("sort", sort);

    const queryString = queryParams.toString();
    const finalPath = `/billboards/${encodeURIComponent(finalSlug)}`;
    
    router.push(`${finalPath}${queryString ? `?${queryString}` : ""}`);
    setShowFilterModal(false);
  };

  const clearFilters = () => {
    setStateId("");
    setCityId("");
    setCategory("");
    setSort("");
    setSearchText("");

    router.push("/billboards");
    setShowFilterModal(false);
  };

  return (
    <div>
      <div className="flex items-center justify-between relative px-4 text-sm gap-3">
        <div className="w-full relative">
          <RoundedInput
            value={searchText}
            onChange={(e) => setSearchText(e.target.value)}
            onKeyDown={(e) => e.key === "Enter" && handleFilterChange()}
            placeholder="جستجو"
            className="w-full"
          />
          <Image
            onClick={() => handleFilterChange()}
            width={25}
            height={25}
            alt="search icon"
            src="/images/icons/search-normal.svg"
            className=" min-w-[25px] absolute left-3 top-[7px] cursor-pointer"
          />
        </div>
        <div className="flex items-center gap-3">
          <button onClick={() => setShowFilterModal(true)}>
            <Image
              width={25}
              height={25}
              alt="filter icon"
              src="/images/icons/candle.svg"
              className="dark:invert min-w-[25px]"
            />
          </button>
          <Link href="/billboards/new" aria-label="ثبت بیلبورد">
            <BoldIcon
              name="add-square"
              size={25}
              tinted
              className="text-neutral-700 dark:text-neutral-200 min-w-[25px]"
            />
          </Link>
        </div>
      </div>
      {showFilterModal && (
        <FilterModal
          setShowFilterModal={setShowFilterModal}
          showFilterModal={showFilterModal}
          setStateId={setStateId}
          setCityId={setCityId}
          setCategory={setCategory}
          setSort={setSort}
          stateId={stateId}
          cityId={cityId}
          category={category}
          sort={sort}
          handleFilterChange={handleFilterChange}
          clearFilters={clearFilters}
        />
      )}
    </div>
  );
}

export default BillboardsFilter;