"use client";

import React, { useCallback, useEffect } from "react";
import useEmblaCarousel from "embla-carousel-react";
import Image from "next/image";

export interface AboutSlideImage { src: string; alt: string }

const DEFAULT_SLIDES: AboutSlideImage[] = [
  { src: "/md-ma.png", alt: "Petro-Base multinational team" },
  { src: "/MD2.jpeg", alt: "Petro-Base Managing Director" },
];

export default function AboutImageSlider({
  images,
  badgeValue,
  badgeLabel,
}: {
  images?: AboutSlideImage[];
  badgeValue?: string;
  badgeLabel?: string;
}) {
  const slides = images && images.length > 0 ? images : DEFAULT_SLIDES;
  const [emblaRef, emblaApi] = useEmblaCarousel({ loop: true });

  const scrollNext = useCallback(() => emblaApi?.scrollNext(), [emblaApi]);

  const [selectedIndex, setSelectedIndex] = React.useState(0);

  const onSelect = useCallback(() => {
    if (!emblaApi) return;
    setSelectedIndex(emblaApi.selectedScrollSnap());
  }, [emblaApi]);

  useEffect(() => {
    if (!emblaApi) return;
    emblaApi.on("select", onSelect);
    onSelect();
  }, [emblaApi, onSelect]);

  // Auto-advance every 4 seconds
  useEffect(() => {
    if (!emblaApi) return;
    const id = setInterval(() => emblaApi.scrollNext(), 4000);
    return () => clearInterval(id);
  }, [emblaApi]);

  return (
    <div className="relative">
      {/* Decorative corner border */}
      <div className="absolute -top-4 -left-4 w-32 h-32 border-t-4 border-l-4 border-accent z-0" />

      {/* Slider */}
      <div className="overflow-hidden relative z-10 shadow-2xl" ref={emblaRef}>
        <div className="flex">
          {slides.map((slide, i) => (
            <div key={i} className="relative flex-[0_0_100%]">
              <Image
                src={slide.src}
                width={600}
                height={400}
                alt={slide.alt}
                className="w-full object-cover aspect-[3/2]"
              />
            </div>
          ))}
        </div>
      </div>

      {/* Dot indicators */}
      <div className="absolute bottom-3 left-1/2 -translate-x-1/2 flex gap-2 z-30">
        {slides.map((_, i) => (
          <button
            key={i}
            onClick={() => emblaApi?.scrollTo(i)}
            aria-label={`Go to slide ${i + 1}`}
            className={`w-2 h-2 rounded-full transition-all duration-300 ${
              i === selectedIndex ? "bg-accent w-5" : "bg-white/60"
            }`}
          />
        ))}
      </div>

      {/* Badge */}
      <div className="absolute -bottom-6 -right-6 bg-primary p-8 text-primary-foreground z-20 hidden md:block">
        <div className="text-3xl font-bold text-accent">{badgeValue ?? "25+"}</div>
        <div className="text-sm uppercase tracking-widest font-medium">{badgeLabel ?? "Years of Excellence"}</div>
      </div>
    </div>
  );
}