"use client";
import { useRouter, usePathname } from "next/navigation";
import React, { useEffect, useState } from "react";
import toast from "react-hot-toast";
import BoldIcon from "@/components/ui/BoldIcon";
import FilterModal from "./FilterModal";
import { getCreatePostPath } from "@/lib/getCreateContentPath";
// وارد کردن دیتاها برای تبدیل 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" },
];

const TOOLBAR_ICON_SIZE = 25;
const toolbarIconButtonClass =
  "inline-flex h-[25px] w-[25px] items-center justify-center shrink-0 p-0 leading-none";
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>("");
  const [userType, setUserType] = useState<string | null>(null);

  useEffect(() => {
    if (typeof window !== "undefined") {
      setUserType(localStorage.getItem("usertype"));
    }
  }, []);

  const handleCreatePost = () => {
    if (!userType) {
      toast.error("لطفا ابتدا در سایت وارد شوید یا ثبت نام کنید.");
      return;
    }
    router.push(getCreatePostPath());
  };

  // تابع اصلی برای ساخت 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 shrink-0 self-center">
          <button
            type="button"
            onClick={handleCreatePost}
            aria-label="ثبت پست"
            className={toolbarIconButtonClass}
          >
            <BoldIcon name="add-square" size={TOOLBAR_ICON_SIZE} className="block" />
          </button>
          <button
            type="button"
            onClick={() => router.push("/search?type=user")}
            aria-label="جستجوی کاربر"
            className={toolbarIconButtonClass}
          >
            <BoldIcon name="search-normal" size={TOOLBAR_ICON_SIZE} className="block" />
          </button>
          <button
            type="button"
            onClick={() => setShowFilterModal(true)}
            aria-label="فیلتر"
            className={toolbarIconButtonClass}
          >
            <BoldIcon name="candle" size={TOOLBAR_ICON_SIZE} className="block" />
          </button>
          <button
            type="button"
            onClick={() => router.push("/explore")}
            aria-label="اکسپلور"
            className={toolbarIconButtonClass}
          >
            <BoldIcon name="grid-3" size={TOOLBAR_ICON_SIZE} className="block" />
          </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;