"use client";
import Image from "next/image";
import { useRouter, usePathname } from "next/navigation"; // اضافه شدن usePathname برای تشخیص صفحه
import React, { useState } from "react";
import FilterModal from "./FilterModal";

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

const expertiseList = [
  { name: "مدل", color: "#B89FFF" },
  { name: "آرایشگر", color: "#23bace" },
  { name: "عکاس", color: "#dace63" },
];

interface ModelsFilterProps {
  expertise: string;
}

function ModelsFilter({ expertise }: ModelsFilterProps) {
  const router = useRouter();
  const pathname = usePathname(); // دریافت مسیر فعلی (مثلا /videos یا /)
  const [showFilterModal, setShowFilterModal] = useState<boolean>(false);
  const [stateId, setStateId] = useState<string>("");
  const [cityId, setCityId] = useState<string>("");
  const [rateFilter, setRateFilter] = useState<string>("");
  const [userLevel, setUserLevel] = useState<string>("");

  // تابع اصلی برای ساخت URL فارسی و سئو شده
  const handleFilterChange = (filter?: string) => {
    // ۱. تعیین تخصص
    const currentExpertise = filter || expertise || "";
    const currentLevel = userLevel;
    
    // ۲. پیدا کردن نام فارسی استان و شهر بر اساس ID ها
    const provinceObj = provinces.find(p => String(p.id) === String(stateId));
    const cityObj = cities.find(c => String(c.id) === String(cityId));

    // ۳. تشخیص مسیر پایه و تعیین کلمه کلیدی (استخدام یا ویدئو ها)
    const isVideoPage = pathname.startsWith("/videos");
    const basePath = isVideoPage ? "/videos" : "";
    const prefix = isVideoPage ? "ویدئو-ها-و-نمونه-کارهای" : "استخدام";

    // ۴. جمله‌سازی برای بخش Slug آدرس
    let slugParts = [];
    
    if (currentExpertise) {
      slugParts.push(`${prefix}-${currentExpertise.replace(/\s+/g, '-')}`);
    } else {
      // اگر تخصصی انتخاب نشده بود، عبارت پیش‌فرض متناسب با صفحه
      slugParts.push(isVideoPage ? "ویدئو-ها-متخصصین-مد-و-زیبایی" : "استخدام-متخصصین-مد-و-زیبایی");
    }

    if (currentLevel) {
      slugParts.push(`سطح-${currentLevel.replace(/\s+/g, '-')}`);
    }

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

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

    // ۵. انتقال به URL جدید
    // خروجی نهایی برای ویدئوها: /videos/ویدئو-ها-مدل-در-شهر-تهران
    router.push(`${basePath}/${encodeURIComponent(finalSlug)}`);
  };

  const clearFilters = () => {
    setStateId("");
    setCityId("");
    setRateFilter("");
    setUserLevel("");
    
    const basePath = pathname.startsWith("/videos") ? "/videos" : "/";
    router.push(basePath);
  };

  return (
    <div>
      <div className="flex items-center justify-between relative px-4 text-sm">
        <div className="flex items-center gap-3">
          {expertiseList.map((item) => (
            <button
              key={item.name}
              type="button"
              className="border rounded-full px-4 py-1"
              onClick={() => handleFilterChange(item.name)}
              style={{
                borderColor: item.color,
                backgroundColor: expertise === item.name ? item.color : "",
              }}
            >
              {item.name}
            </button>
          ))}
        </div>
        <div className="flex items-center gap-3">
          <button type="button" onClick={() => setShowFilterModal(true)}>
            <Image
              width={25}
              height={25}
              alt="filter icon"
              src="/images/icons/candle.svg"
              className="dark:invert"
            />
          </button>
          <button
            type="button"
            onClick={() => router.push("/explore")}
            className="gentle-transition flex h-9 w-9 items-center justify-center rounded-full border border-[#e1306c]/40 bg-gradient-to-br from-[#5b51d8]/10 to-[#e1306c]/10 active:scale-90"
            aria-label="اکسپلور"
          >
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" aria-hidden>
              <rect x="3" y="3" width="7" height="7" rx="2" stroke="#e1306c" strokeWidth="1.8" />
              <rect x="14" y="3" width="7" height="7" rx="2" stroke="#c13584" strokeWidth="1.8" />
              <rect x="3" y="14" width="7" height="7" rx="2" stroke="#5b51d8" strokeWidth="1.8" />
              <rect x="14" y="14" width="7" height="7" rx="2" stroke="#e1306c" strokeWidth="1.8" />
            </svg>
          </button>
        </div>
      </div>
      {showFilterModal && (
        <FilterModal
          setShowFilterModal={setShowFilterModal}
          showFilterModal={showFilterModal}
          setStateId={setStateId}
          setCityId={setCityId}
          setRateFilter={setRateFilter}
          setUserLevel={setUserLevel}
          stateId={stateId}
          cityId={cityId}
          rateFilter={rateFilter}
          userLevel={userLevel}
          handleFilterChange={() => handleFilterChange()} 
          clearFilters={clearFilters}
        />
      )}
    </div>
  );
}

export default ModelsFilter;