"use client";
import { useState, useEffect, useCallback } from "react";
import Image from "next/image";
import { ChevronLeft, ChevronRight, Search, MapPin, Briefcase } from "lucide-react";

type SlideItem = {
  id: string | number;
  label: string;
  title: string;
  subtitle: string;
  image: string;
};

const defaultSlides: SlideItem[] = [
  {
    id: 1,
    label: "2,400+ Live Jobs",
    title: "Find Your Dream Career",
    subtitle: "Top companies in Malaysia are hiring now",
    image: "https://images.unsplash.com/photo-1521737604893-d14cc237f11d?w=1600&q=80",
  },
  {
    id: 2,
    label: "Remote & Hybrid Roles",
    title: "Work From Anywhere",
    subtitle: "Discover flexible opportunities that fit your lifestyle",
    image: "https://images.unsplash.com/photo-1600880292203-757bb62b4baf?w=1600&q=80",
  },
  {
    id: 3,
    label: "Tech & Engineering",
    title: "Build the Future",
    subtitle: "High-paying roles in software, data, and cloud engineering",
    image: "https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=1600&q=80",
  },
  {
    id: 4,
    label: "Fresh Graduates Welcome",
    title: "Start Your Journey",
    subtitle: "Entry-level and internship openings updated daily",
    image: "https://images.unsplash.com/photo-1523240795612-9a054b0db644?w=1600&q=80",
  },
];

export default function JobsSlider({ slides = defaultSlides }: { slides?: SlideItem[] }) {
  const [current, setCurrent] = useState(0);
  const safeSlides = slides.length > 0 ? slides : defaultSlides;

  useEffect(() => {
    if (current >= safeSlides.length) setCurrent(0);
  }, [current, safeSlides.length]);

  const prev = () => setCurrent((c) => (c - 1 + safeSlides.length) % safeSlides.length);

  const nextSafe = useCallback(() => setCurrent((c) => (c + 1) % safeSlides.length), [safeSlides.length]);

  useEffect(() => {
    const t = setInterval(nextSafe, 5000);
    return () => clearInterval(t);
  }, [nextSafe]);

  const slide = safeSlides[current];

  return (
    <div className="relative">
      {/* Slider frame */}
      <div className="relative h-[420px] md:h-[480px] overflow-hidden">
        {safeSlides.map((s, i) => (
          <div
            key={s.id}
            className={`absolute inset-0 transition-opacity duration-1000 ${i === current ? "opacity-100" : "opacity-0"}`}
          >
            <Image src={s.image} alt={s.title} fill className="object-cover" priority={i === 0} sizes="100vw" />
            <div className="absolute inset-0 bg-gradient-to-r from-navy-900/90 via-navy-900/65 to-navy-900/20" />
          </div>
        ))}

        {/* Content */}
        <div className="relative z-10 h-full flex flex-col justify-center pb-16">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 w-full">
            <div className="max-w-2xl">
              <div className="inline-flex items-center gap-2 px-3 py-1 bg-gold-500/20 text-gold-300 text-xs font-semibold rounded-full mb-5 border border-gold-500/30">
                <Briefcase size={11} /> {slide.label}
              </div>
              <h1 className="text-5xl md:text-6xl font-bold text-white leading-tight mb-3">{slide.title}</h1>
              <p className="text-navy-200 text-lg mb-10">{slide.subtitle}</p>
              <div className="flex items-center gap-6 text-sm text-white/70">
                <span className="flex items-center gap-1.5"><span className="w-2 h-2 rounded-full bg-emerald-400 animate-pulse" /> Live positions updated every 6h</span>
                <span>·</span>
                <span>Malaysia&rsquo;s #1 Jobs Platform</span>
              </div>
            </div>
          </div>
        </div>

        {/* Dots */}
        <div className="absolute bottom-20 left-1/2 -translate-x-1/2 z-10 flex gap-2">
          {safeSlides.map((_, i) => (
            <button
              key={i}
              onClick={() => setCurrent(i)}
              className={`transition-all rounded-full ${i === current ? "w-8 h-2 bg-gold-400" : "w-2 h-2 bg-white/40 hover:bg-white/70"}`}
            />
          ))}
        </div>

        {/* Arrows */}
        <button onClick={prev} className="absolute left-4 top-1/2 -translate-y-1/2 z-10 w-10 h-10 bg-white/15 backdrop-blur-sm rounded-full flex items-center justify-center text-white hover:bg-white/30 transition-colors border border-white/20">
          <ChevronLeft size={20} />
        </button>
        <button onClick={nextSafe} className="absolute right-4 top-1/2 -translate-y-1/2 z-10 w-10 h-10 bg-white/15 backdrop-blur-sm rounded-full flex items-center justify-center text-white hover:bg-white/30 transition-colors border border-white/20">
          <ChevronRight size={20} />
        </button>
      </div>

      {/* Floating search bar — outside overflow-hidden */}
      <div className="relative z-20 -mt-8 px-4 sm:px-6">
        <div className="max-w-4xl mx-auto">
          <div className="bg-white rounded-2xl shadow-2xl border border-neutral-200 flex items-stretch overflow-hidden">
            {/* Job title */}
            <div className="flex items-center gap-2 flex-1 px-4 border-r border-neutral-200">
              <Search size={17} className="text-neutral-400 shrink-0" />
              <input
                type="search"
                placeholder="Job title, skill, or company..."
                className="flex-1 py-4 text-sm text-neutral-800 placeholder:text-neutral-400 focus:outline-none bg-transparent"
              />
            </div>
            {/* Location */}
            <div className="flex items-center gap-2 px-4 border-r border-neutral-200 w-48 shrink-0">
              <MapPin size={15} className="text-neutral-400 shrink-0" />
              <input
                type="text"
                placeholder="Location"
                className="flex-1 py-4 text-sm text-neutral-800 placeholder:text-neutral-400 focus:outline-none bg-transparent"
              />
            </div>
            {/* Job type */}
            <div className="flex items-center border-r border-neutral-200">
              <select className="h-full text-sm text-neutral-600 px-4 bg-transparent focus:outline-none cursor-pointer">
                <option>All Types</option>
                <option>Full-time</option>
                <option>Part-time</option>
                <option>Remote</option>
                <option>Contract</option>
                <option>Internship</option>
              </select>
            </div>
            <button className="px-8 py-4 bg-navy-700 text-white text-sm font-semibold hover:bg-navy-800 transition-colors shrink-0 flex items-center gap-2">
              <Search size={15} /> Search Jobs
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}