"use client";
import { useState, useEffect, useMemo } from 'react';
import Link from 'next/link';

export default function HeroSlider({ facilities }: { facilities: any[] }) {
  const [currentIndex, setCurrentSlide] = useState(0);

  const sliderItems = useMemo(() => {
    if (!Array.isArray(facilities) || facilities.length === 0) return [];

    return facilities.filter(f => {
      const img = f.image_url || "";
      // Filter: Unngå standardbilder og krev fungerende bilde-sti
      const isRealImage = img && !img.toLowerCase().includes('standard');
      
      const statuses = Array.isArray(f.course_statuses) ? f.course_statuses : [];
      const isActive = statuses.some((s: any) => 
        ['aapen', 'aapner_snart', 'stenger_snart', 'aapen_med_vintergreener'].includes(s.status)
      );
      
      return isRealImage && isActive;
    })
    .sort(() => 0.5 - Math.random()) // Tilfeldig utvalg ved last
    .slice(0, 5);
  }, [facilities]);

  useEffect(() => {
    if (sliderItems.length <= 1) return;
    const t = setInterval(() => setCurrentSlide(p => (p + 1) % sliderItems.length), 6000);
    return () => clearInterval(t);
  }, [sliderItems]);

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

  return (
    <div className="relative h-[60vh] md:h-[75vh] w-full overflow-hidden bg-[#11280f]">
      {sliderItems.map((f, i) => (
        <div key={f.id} className={`absolute inset-0 transition-opacity duration-1000 ${i === currentIndex ? 'opacity-100 z-10' : 'opacity-0 z-0'}`}>
          <Link href={`/golfbaner/${f.slug}`} className="block h-full relative group">
            <div className="absolute inset-0 bg-gradient-to-r from-black/70 via-transparent to-black/20 z-10" />
            <img src={f.image_url} alt="" className="w-full h-full object-cover transition-transform duration-[10s] group-hover:scale-110" />
            <div className="absolute inset-0 z-20 flex items-center">
                <div className="max-w-[1400px] mx-auto px-6 w-full">
                    <div className="min-h-[120px] md:min-h-[200px] flex flex-col justify-end">
                        <h2 className="text-5xl md:text-8xl font-black text-white tracking-tighter drop-shadow-2xl leading-[0.9] max-w-4xl line-clamp-2">
                            {f.name}
                        </h2>
                        <p className="text-white/90 text-lg md:text-2xl mt-4 font-bold uppercase tracking-[0.3em] drop-shadow-md">
                            {f.county} • {f.city}
                        </p>
                    </div>
                </div>
            </div>
          </Link>
        </div>
      ))}
    </div>
  );
}