"use client";

import { useEffect, useRef, useState } from "react";
import Image from "next/image";
import { ChevronLeft, ChevronRight, Building2 } from "lucide-react";
import { useCityStore } from "@/store/city.store";
import Link from "next/link";
import { FadeUp } from "./animations/FadeUp";
import { StaggerContainer, StaggerItem } from "./animations/StaggerContainer";

export function ExploreJobs() {
  const { cities, isLoading, fetchFrontOrderCities } = useCityStore();
  const scrollContainerRef = useRef<HTMLDivElement>(null);
  const [scrollProgress, setScrollProgress] = useState(0);

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

  const handleScroll = () => {
    if (scrollContainerRef.current) {
      const { scrollLeft, scrollWidth, clientWidth } = scrollContainerRef.current;
      const progress = scrollLeft / (scrollWidth - clientWidth);
      setScrollProgress(progress);
    }
  };

  const scrollLeft = () => {
    if (scrollContainerRef.current) {
      scrollContainerRef.current.scrollBy({ left: -300, behavior: "smooth" });
    }
  };

  const scrollRight = () => {
    if (scrollContainerRef.current) {
      scrollContainerRef.current.scrollBy({ left: 300, behavior: "smooth" });
    }
  };

  if (isLoading) {
    return (
      <div className="py-16 text-center text-gray-500 animate-pulse">
        Loading cities...
      </div>
    );
  }

  if (cities.length === 0) return null;

  return (
    <section className="py-10 md:py-12 bg-white relative">
      <div className="container mx-auto px-4">
        {/* Header */}
        <FadeUp delay={0.1} className="text-center mb-6">
          <h2 className="text-3xl md:text-4xl font-bold text-black mb-3">
            Explore jobs in 400+ cities
          </h2>
        </FadeUp>

        {/* Carousel Container */}
        <div className="relative group">
          {/* Left Button */}
          <button
            onClick={scrollLeft}
            className="absolute -left-4 md:-left-6 top-1/2 -translate-y-1/2 z-10 bg-white border border-teal-100 shadow-[0_4px_12px_rgba(0,0,0,0.05)] rounded-full p-3 text-teal-600 hover:bg-teal-50 transition-all focus:outline-none"
            aria-label="Scroll left"
          >
            <ChevronLeft className="w-6 h-6" />
          </button>

          {/* Cards Wrapper */}
          <StaggerContainer
            staggerDelay={0.1}
            ref={scrollContainerRef}
            onScroll={handleScroll}
            className="flex overflow-x-auto gap-5 pb-4 snap-x snap-mandatory hide-scrollbar"
            style={{ scrollbarWidth: "none", msOverflowStyle: "none" }}
          >
            <style dangerouslySetInnerHTML={{ __html: `
              .hide-scrollbar::-webkit-scrollbar {
                display: none;
              }
            `}} />
            
            {cities.map((city) => (
              <StaggerItem
                key={city.city_id}
                yOffset={20}
                className="snap-start shrink-0 w-[180px] md:w-[200px] bg-white rounded-xl border border-gray-100 shadow-sm hover:shadow-md transition-shadow duration-300 relative group/card cursor-pointer p-3 flex flex-col items-center"
              >
                {/* Image Section */}
                <div className="relative h-[110px] w-full overflow-hidden rounded-lg bg-gray-100 mb-4">
                  {city.image ? (
                    <Image
                      src={city.image}
                      alt={city.city_name}
                      fill
                      className="object-cover group-hover/card:scale-105 transition-transform duration-500"
                      sizes="(max-width: 768px) 160px, 180px"
                    />
                  ) : (
                    <div className="w-full h-full flex items-center justify-center text-gray-400 text-sm">
                      No Image
                    </div>
                  )}
                </div>

                {/* Content Section */}
                <div className="text-center pb-1">
                  <h3 className="text-base font-bold text-gray-900 mb-1">
                    {city.city_name}
                  </h3>
                  <p className="text-teal-600 font-medium text-xs">
                    20K+ Jobs
                  </p>
                </div>
              </StaggerItem>
            ))}
          </StaggerContainer>

          {/* Right Button */}
          <button
            onClick={scrollRight}
            className="absolute -right-4 md:-right-6 top-1/2 -translate-y-1/2 z-10 bg-white border border-teal-100 shadow-[0_4px_12px_rgba(0,0,0,0.05)] rounded-full p-3 text-teal-600 hover:bg-teal-50 transition-all focus:outline-none"
            aria-label="Scroll right"
          >
            <ChevronRight className="w-6 h-6" />
          </button>
        </div>

        {/* View All Button */}
        <FadeUp delay={0.3} yOffset={20} className="flex justify-center mt-6">
          <Link href="/job-search?keyword=Jobs+By+City" className="inline-block border border-teal-600 text-teal-600 px-6 py-2 rounded-full font-semibold hover:bg-teal-50 transition-colors">
            View all cities
          </Link>
        </FadeUp>
      </div>
    </section>
  );
}