"use client";

import { useRef } from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import { Autoplay, Navigation } from "swiper/modules";
import Image from "next/image";
import type { Hero } from "@/types/hero";
import "swiper/css";
import "swiper/css/navigation";

const FALLBACK_HEROES: Hero[] = [
  {
    id: 0,
    title: "",
    description: "",
    image: "/hero1.svg",
    is_active: true,
    created_at: "",
    updated_at: "",
  },
  {
    id: 1,
    title: "",
    description: "",
    image: "/hero2.svg",
    is_active: true,
    created_at: "",
    updated_at: "",
  },
];

interface ImageSliderProps {
  heroes: Hero[];
}

export default function ImageSlider({ heroes }: ImageSliderProps) {
  const swiperRef = useRef<any>(null);

  const slides = heroes.length > 0 ? heroes : FALLBACK_HEROES;

  const goNext = () => swiperRef.current?.swiper.slideNext();
  const goPrev = () => swiperRef.current?.swiper.slidePrev();

  return (
    <div className="relative w-full h-screen" id="hero">
      <Swiper
        ref={swiperRef}
        modules={[Autoplay, Navigation]}
        autoplay={{ delay: 5000, disableOnInteraction: false }}
        loop={slides.length > 1}
        className="w-full h-full"
      >
        {slides.map((hero, i) => (
          <SwiperSlide key={hero.id}>
            <div className="relative w-full h-full">
              <Image
                src={hero.image || "/hero1.svg"}
                alt={hero.title ?? ""}
                fill
                className="object-cover"
                priority={i === 0}
                sizes="100vw"
                unoptimized
              />
              <div className="absolute inset-0 bg-black/50 flex flex-col justify-center px-6 text-center md:text-start md:px-36 z-10">
                <h1 className="text-white text-3xl md:text-5xl lg:text-6xl font-bold leading-tight mb-4">
                  {hero.title || "Selamat Datang di Website PTBMMKI"}
                </h1>

                <p className="text-white text-base px-6 md:px-0 md:text-lg lg:text-xl max-w-2xl mx-auto md:mx-0">
                  {hero.description ||
                    "Perhimpunan Tim Bantuan Medis Mahasiswa Kedokteran Indonesia — Bersama membangun kesehatan melalui pelayanan medis mahasiswa."}
                </p>
              </div>
            </div>
          </SwiperSlide>
        ))}
      </Swiper>

      {slides.length > 1 && (
        <>
          <button
            onClick={goPrev}
            aria-label="Previous slide"
            className="cursor-pointer absolute z-50 top-1/2 left-4 -translate-y-1/2 bg-black/30 text-white w-10 h-10 md:w-12 md:h-12 rounded-full flex items-center justify-center hover:bg-[#6d4627] transition-all duration-300"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeWidth="2"
              strokeLinecap="round"
              strokeLinejoin="round"
            >
              <path d="M15 18l-6-6 6-6" />
            </svg>
          </button>

          <button
            onClick={goNext}
            aria-label="Next slide"
            className="cursor-pointer absolute z-50 top-1/2 right-4 -translate-y-1/2 bg-black/30 text-white w-10 h-10 md:w-12 md:h-12 rounded-full flex items-center justify-center hover:bg-[#6d4627] transition-all duration-300"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeWidth="2"
              strokeLinecap="round"
              strokeLinejoin="round"
            >
              <path d="M9 18l6-6-6-6" />
            </svg>
          </button>
        </>
      )}
    </div>
  );
}