"use client";

import { useEffect, useRef, useState } from "react";
import Link from "next/link";
import api from "@/lib/api";
import {
  ChevronLeft,
  ChevronRight,
  Sparkles,
} from "lucide-react";

interface Category {
  id: number;
  parent_id?: number | null;
  name: string;
  slug?: string;
}

export default function CategorySlider() {
  const [categories, setCategories] = useState<Category[]>([]);
  const scrollRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    fetchCategories();
  }, []);

  const fetchCategories = async () => {
    try {
      const res = await api.get("/categories");

      const allCategories = res.data.data || [];

      const mainCategories = allCategories.filter(
        (category: Category) =>
          category.parent_id === null ||
          category.parent_id === undefined
      );

      setCategories(mainCategories);
    } catch (error) {
      console.error(error);
    }
  };

  const scroll = (direction: "left" | "right") => {
    if (!scrollRef.current) return;

    scrollRef.current.scrollBy({
      left: direction === "left" ? -500 : 500,
      behavior: "smooth",
    });
  };

  return (
    <section className="bg-[#fafafa] py-16">
      <div className="relative mb-12">

        {/* Center Title */}
        <div className="text-center">

          <div className="inline-flex items-center gap-3 bg-white border border-green-100 shadow-sm px-5 py-2 rounded-full">
            <Sparkles size={16} className="text-green-600" />

            <p className="text-green-600 font-black text-xs uppercase tracking-[0.25em]">
              Browse Collection
            </p>
          </div>

          <h2 className="section-title mt-5">
            <span className="text-slate-900">Shop By </span>

            <span className="bg-gradient-to-r from-green-500 to-green-700 bg-clip-text text-transparent">
              Category
            </span>
          </h2>

          <div className="mx-auto mt-5 h-1.5 w-24 rounded-full bg-gradient-to-r from-green-400 to-green-700" />
        </div>

        {/* Arrows */}
        <div className="absolute right-0 top-1/2 -translate-y-1/2 hidden md:flex items-center gap-3">

          <button
            onClick={() => scroll("left")}
            className="
              w-11 h-11
              rounded-full
              bg-white
              border
              border-slate-200
              hover:bg-green-600
              hover:border-green-600
              hover:text-white
              transition-all
              duration-300
              flex
              items-center
              justify-center
            "
          >
            <ChevronLeft size={20} />
          </button>

          <button
            onClick={() => scroll("right")}
            className="
              w-11 h-11
              rounded-full
              bg-white
              border
              border-slate-200
              hover:bg-green-600
              hover:border-green-600
              hover:text-white
              transition-all
              duration-300
              flex
              items-center
              justify-center
            "
          >
            <ChevronRight size={20} />
          </button>

        </div>

      </div>

        {/* Categories */}
        <div
          ref={scrollRef}
          className="
            flex
            gap-4
            overflow-x-auto
            scroll-smooth
            scrollbar-hide
            pb-2
          "
        >
          {categories.map((category) => (
            <Link
              key={category.id}
              href={`/categories/${category.slug || category.id}`}
              className="shrink-0 group"
            >
              <div
                className="
                  w-[220px]
                  h-[100px]
                  bg-white
                  border
                  border-slate-200
                  rounded-xl
                  flex
                  items-center
                  justify-center
                  px-5
                  text-center
                  shadow-sm
                  hover:border-green-600
                  hover:bg-green-600
                  hover:text-white
                  hover:shadow-xl
                  transition-all
                  duration-300
                "
              >
                <span className="font-bold text-base">
                  {category.name}
                </span>
              </div>
            </Link>
          ))}
        </div>

      
    </section>
  );
}