"use client";
import { useState, useEffect } from "react";
import {
  Headphones, FileText, Truck, ShieldCheck, CircleDashed,
  Disc,
  Hexagon,
  Settings,
  Wrench,
  Droplets, Square, MoreVertical, Circle, Target, CookingPot, Minus, MessageCircleCheckIcon,
} from "lucide-react";
import ProductCard from "@/components/productcard";
import ArticleCard from "@/components/articlecard";
import FAQItem from "@/components/faq";
import { articles } from "@/lib/data";
import Link from "next/link";
import { useCategories } from "@/components/context/categoryprovider";
import { getProducts } from "@/public/src/services/products/api";

export default function Home() {
  const [activeTab, setActiveTab] = useState(0);
  
  const [products, setProducts] = useState<any[]>([]);
  const [loading, setLoading] = useState(true);

  const brands = ["NTN", "KOYO", "NACHI", "TIMKEN", "FAG", "SKF"];
  const latestArticles = articles.slice(-4);
  const { rootCategories } = useCategories();

  useEffect(() => {
    const fetchInitialProducts = async () => {
      try {
        setLoading(true);
        const data = await getProducts(1, 20);
        
        const formattedProducts = data.items.map((p: any) => ({
          id: p.id,
          title: p.title,
          brand: p.brand,
          slug: p.slug, 
          price: p.calculated_price,
          stock: p.stock,
          image: p.mainImageUrl || "/placeholder.png",
          attributes: p.attributes
        }));

        setProducts(formattedProducts);
      } catch (error) {
        console.error("Error fetching products:", error);
      } finally {
        setLoading(false);
      }
    };

    fetchInitialProducts();
  }, []); 

  const features = [
    {
      icon: Headphones,
      title: "مشاوره فنی رایگان",
      desc: "انتخاب بهترین قطعه با توجه به نیاز شما",
    },
    {
      icon: FileText,
      title: "فاکتور رسمی",
      desc: "صدور فاکتور برای شرکت‌ها",
    },
    {
      icon: Truck,
      title: "ارسال فوری",
      desc: "ارسال در سریع‌ترین زمان ممکن",
    },
    {
      icon: ShieldCheck,
      title: "ضمانت اصالت کالا",
      desc: "تضمین اورجینال بودن محصولات",
    },
  ];

  const tabs = ["پرفروش‌ترین‌ها", "تخفیف‌دار", "جدیدترین‌ها"];

  const faqs = [
    {
      question: "آیا تمامی قطعات دارای ضمانت اصالت هستند؟",
      answer:
        "بله، تمامی محصولات ارائه شده دارای ضمانت اصالت کالا بوده و از برندهای معتبر جهانی تأمین می‌شوند.",
    },
    {
      question: "امکان صدور فاکتور رسمی برای شرکت‌ها وجود دارد؟",
      answer:
        "بله، برای تمامی سفارشات امکان صدور فاکتور رسمی وجود دارد.",
    },
    {
      question: "سفارش‌ها چه زمانی ارسال می‌شوند؟",
      answer:
        "سفارش‌ها در سریع‌ترین زمان ممکن پردازش شده و از طریق روش‌های ارسال معتبر ارسال می‌شوند.",
    },
  ];

  const categoryIcons = [
    CircleDashed,
    Disc,
    Hexagon,
    Wrench,
    Droplets
  ];

  return (
    <main className=" bg-gray-50">

      {/* hero section */}
      <section className="bg-[#0b1d36] text-white py-16">
        <div className="container mx-auto text-center">
          <div className="inline-block border mb-4 px-3 py-2 bg-[#443A27] text-[#ffb900] text-xs rounded-full">
            تأمین‌کننده برتر قطعات
          </div>
          <h1 className=" leading-snug md:text-5xl font-extrabold mb-4">
            تخصصی‌ترین مرجع
            <br></br>
            بلبرینگ و قطعات صنعتی
          </h1>
          <p className=" text-[15px] text-[#9a9a9a] mb-10">
            دسترسی به بیش از 10.000 قطعه با ضمانت اصالت کالا
          </p>
        </div>
      </section>

      {/* hero search  */}
      <div className="w-full px-4">
        <div className=" max-w-[70.5rem] mx-auto px-4 bg-white -mt-20 text-gray-800 rounded-2xl shadow-lg  p-6 flex flex-col md:flex-row gap-4 md:gap-2 items-center justify-between">
          <div className="grid grid-cols-1 md:grid-cols-6 w-full gap-4 justify-between">
            <div className="flex flex-col md:col-span-2">
              <label htmlFor="partNumber" className="text-xs mb-3 text-black font-bold">
                شماره فنی (Part Number)
              </label>
              <input
                id="partNumber"
                type="text"
                placeholder="Part Number"
                className="px-4 py-3 bg-[#f9f9f9] rounded-xl border border-gray-300 text-sm focus:outline-none focus:ring-2 focus:ring-[#e6d3a3]"
              />
            </div>
            <div className="flex flex-col">
              <label htmlFor="innerDiameter" className="text-xs mb-3 text-black font-bold">
                قطر داخل
              </label>
              <input
                id="innerDiameter"
                type="text"
                placeholder="mm"
                className="px-4 bg-[#f9f9f9] py-3 rounded-xl border border-gray-300 text-sm focus:outline-none focus:ring-2 focus:ring-[#e6d3a3]"
              />
            </div>
            <div className="flex flex-col">
              <label htmlFor="outerDiameter" className="text-xs mb-3 text-black font-bold">
                قطر خارج
              </label>
              <input
                id="outerDiameter"
                type="text"
                placeholder="mm"
                className="px-4 bg-[#f9f9f9] py-3 rounded-xl border border-gray-300 text-sm focus:outline-none focus:ring-2 focus:ring-[#e6d3a3]"
              />
            </div>
            <div className="flex flex-col">
              <label htmlFor="thickness" className="text-xs mb-3 text-black font-bold">
                ضخامت
              </label>
              <input
                id="thickness"
                type="text"
                placeholder="mm"
                className="px-4 bg-[#f9f9f9] py-3 rounded-xl border border-gray-300 text-sm focus:outline-none focus:ring-2 focus:ring-[#e6d3a3]"
              />
            </div>
            <button
              className="mt-6 rounded-xl border-2 md:w-auto md:h-auto w-[100px] h-[48px] border-[#e6d3a3] bg-[#ffb900] text-black font-semibold text-xs transition-all hover:bg-[#da9800]">
              جستجوی قطعه
            </button>
          </div>
        </div>
      </div>

      {/* feature cards  */}
      <div className="w-full py-6 mt-12">
        <div className="max-w-6xl  px-4 mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
          {features.map((item, index) => {
            const Icon = item.icon;
            return (
              <div
                key={index}
                className="flex items-center gap-4 px-4 py-7 border bg-white shadow-sm hover:shadow-md transition-shadow duration-300 border-[#e3e3e3] rounded-xl "
              >
                <div className="p-3 bg-gray-100 rounded-lg">
                  <Icon size={24} className="text-gray-700" />
                </div>
                <div>
                  <h3 className="font-semibold text-gray-800 text-sm">
                    {item.title}
                  </h3>
                  <p className="text-xs text-gray-500">{item.desc}</p>
                </div>
              </div>
            );
          })}
        </div>
      </div>

      {/* categories card  */}
      <section className="w-full py-12 bg-gray-50">
        <div className="max-w-6xl mx-auto px-4">
          <div className="w-full mb-10">
            <div className="flex">
              <h2 className="text-xl font-bold text-gray-800">
                دسته بندی های بلبرینگ
              </h2>
            </div>
            <div className="relative mt-3 h-[2px] bg-gray-200 w-full">
              <div className="absolute right-0 top-0 h-[2px] w-24 bg-yellow-500"></div>
            </div>
          </div>
          <div className="grid justify-center grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-6">
            {rootCategories.map((cat, index) => {
              const Icon = categoryIcons[index % categoryIcons.length];
              return (
                <Link
                  key={cat.id}
                  href={`/category/${cat.slug}`}
                  className="bg-white border gap-2 border-gray-200 rounded-xl shadow-sm hover:shadow-md hover:border-blue-400 transition-all duration-300 flex flex-col items-center justify-center py-8 cursor-pointer group"
                >
                  <Icon size={34} strokeWidth={1} className="text-gray-400 mb-3 group-hover:text-blue-500 transition-colors" />
                  <span className="text-sm font-medium text-gray-700 group-hover:text-blue-600">{cat.name}</span>
                </Link>
              );
            })}
          </div>
        </div>
      </section>

      {/* products */}
      <section className="py-12">
        <div className="max-w-6xl mx-auto px-4">
          <div className="items-center justify-between mb-8">
            <div className="flex flex-wrap md:flex-nowrap justify-between w-full mb-4">
              <div className="flex">
                <h3 className="text-xl font-bold text-gray-800">
                  پیشنهاد ویژه صنعتی
                </h3>
              </div>
              <div className="flex mt-6 mb-4 md:mt-0 md:mb-0 gap-8 text-sm">
                {tabs.map((tab, index) => (
                  <button
                    key={index}
                    onClick={() => setActiveTab(index)}
                    className={`pb-2 cursor-pointer border-b-2 transition 
                ${activeTab === index
                        ? "border-yellow-500 text-black"
                        : "border-transparent text-gray-400"
                      }`}
                  >
                    {tab}
                  </button>
                ))}
              </div>
            </div>
            <div className="relative mt-3 h-[2px] bg-gray-200 w-full">
              <div className="absolute right-0 top-0 h-[2px] w-24 bg-yellow-500"></div>
            </div>
          </div>

          {loading ? (
            <div className="flex justify-center py-10">
              <p>در حال بارگذاری محصولات...</p>
            </div>
          ) : (
            <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
              {products.slice(0,4).map((product: any) => (
                <ProductCard key={product.id} product={product} />
              ))}
            </div>
          )}

        </div>
      </section>

      {/* blog */}
      <section className="py-16 bg-white">
        <div className="max-w-6xl mx-auto px-4">
          <div className="mb-8">
            <div className="flex justify-between w-full mb-4">
              <h3 className="text-xl font-bold text-gray-800">
                مجله فنی و مهندسی
              </h3>
              <a className="text-[#ffb900] text-sm cursor-pointer">
                مشاهده آرشیو
              </a>
            </div>
            <div className="relative h-[2px] bg-gray-200 w-full">
              <div className="absolute right-0 top-0 h-[2px] w-24 bg-yellow-500" />
            </div>
          </div>
          <div className="grid md:grid-cols-3 lg:grid-cols-4 gap-6">
            {latestArticles.map((article, i) => (
              <ArticleCard key={i} article={article} />
            ))}
          </div>
        </div>
      </section>

      {/* search */}
      <section className="py-16">
        <div className="max-w-6xl mx-auto px-4">
          <div className="bg-[#0b1e3b] rounded-2xl p-10 flex flex-col lg:flex-row items-center justify-between gap-8 relative overflow-hidden">
            <div className="text-right text-white max-w-md">
              <h2 className="text-2xl font-bold text-amber-400 mb-3">
                قطعه خاصی مد نظرتان است؟
              </h2>
              <p className="text-sm text-gray-300 leading-7">
                تیم فنی ما آماده است تا قطعات صنعتی مورد نیاز شما را در سریع‌ترین زمان
                ممکن تأمین کند. مشخصات قطعه را وارد کنید.
              </p>
              <div className="flex items-center gap-2 mt-3 text-sm text-gray-300">
                <MessageCircleCheckIcon size={16} />
                پاسخگویی سریع در واتساپ
              </div>
            </div>
            <div className="bg-[#2a3548] p-4 flex-wrap rounded-xl flex items-center gap-3 w-full max-w-xl">
              <input
                type="text"
                placeholder="شماره تماس"
                className="flex-1 bg-gray-200 rounded-lg md:px-4 px-0 py-3 outline-none text-xs"
              />
              <input
                type="text"
                placeholder=" کد فنی قطعه"
                className="flex-1 bg-gray-200 rounded-lg px-0 md:px-4 py-3 outline-none text-xs"
              />
              <button className="bg-amber-500 hover:bg-amber-600 text-black px-3 py-3 rounded-lg flex items-center gap-2 text-xs cursor-pointer">
                ثبت درخواست
              </button>
            </div>
          </div>
        </div>
      </section>

      {/* faq */}
      <section className="py-6">
        <div className="max-w-3xl mx-auto px-4">
          <h2 className="text-center text-xl font-bold mb-10">
            سوالات پرتکرار مشتریان
          </h2>
          <div className="space-y-4">
            {faqs.map((faq, index) => (
              <FAQItem
                key={index}
                question={faq.question}
                answer={faq.answer}
              />
            ))}
          </div>
        </div>
      </section>

      {/* brands  */}
      <section className="w-full py-20 px-6">
        <div className="max-w-6xl mx-auto text-center">
          <h2 className="text-gray-500 text-sm font-semibold mb-10">
            تامین کننده برندهای معتبر جهان
          </h2>
          <div className="flex flex-wrap justify-center items-center gap-8">
            {brands.map((brand) => (
              <div
                key={brand}
                className="w-40 h-16 flex items-center justify-center border border-gray-200 rounded-md bg-white"
              >
                <span className="text-gray-300 font-semibold tracking-wider text-lg">
                  {brand}
                </span>
              </div>
            ))}
          </div>
        </div>
      </section>

    </main>
  );
}