'use client';

import React, { useState, useEffect, useRef, useCallback } from 'react';
import Link from 'next/link';
import { SeasonSettings } from '@/lib/settings';

interface PromoBannerSectionProps {
  settings?: SeasonSettings;
}

export default function PromoBannerSection({ settings }: PromoBannerSectionProps) {
  if (settings && settings.enabled === false) {
    return null;
  }

  const rawSlides = settings?.slides && Array.isArray(settings.slides) ? settings.slides : [];
  let slides = rawSlides.filter(
    (s) => s && s.enabled !== false && (s as any).enabled !== '0' && (s as any).enabled !== 0
  );

  if (slides.length === 0 && settings?.title) {
    slides = [
      {
        image: '/images/tournament-banner.png',
        title: settings.title,
        subtitle: settings.subtitle || '',
        description: settings.subtitle || '',
        button_text: 'How it works',
        button_link: '/shop',
        enabled: true,
      },
    ];
  }

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

  const [activeIdx, setActiveIdx] = useState(0);
  const [isPaused, setIsPaused] = useState(false);
  const touchStartX = useRef<number | null>(null);
  const touchEndX = useRef<number | null>(null);

  const nextSlide = useCallback(() => {
    setActiveIdx((prev) => (prev + 1) % slides.length);
  }, [slides.length]);

  const prevSlide = useCallback(() => {
    setActiveIdx((prev) => (prev - 1 + slides.length) % slides.length);
  }, [slides.length]);

  useEffect(() => {
    if (slides.length <= 1 || isPaused) return;
    const timer = setInterval(() => {
      nextSlide();
    }, 6000);
    return () => clearInterval(timer);
  }, [slides.length, isPaused, nextSlide]);

  const handleTouchStart = (e: React.TouchEvent) => {
    touchStartX.current = e.touches[0].clientX;
    touchEndX.current = null;
  };

  const handleTouchMove = (e: React.TouchEvent) => {
    touchEndX.current = e.touches[0].clientX;
  };

  const handleTouchEnd = () => {
    if (touchStartX.current !== null && touchEndX.current !== null) {
      const diff = touchStartX.current - touchEndX.current;
      if (Math.abs(diff) > 40) {
        if (diff > 0) {
          nextSlide();
        } else {
          prevSlide();
        }
      }
    }
    touchStartX.current = null;
    touchEndX.current = null;
  };

  return (
    <section className="wrap section promo-banner-section">
      <div
        className="promo-banner-slider"
        onMouseEnter={() => setIsPaused(true)}
        onMouseLeave={() => setIsPaused(false)}
        onTouchStart={handleTouchStart}
        onTouchMove={handleTouchMove}
        onTouchEnd={handleTouchEnd}
      >
        <div
          className="promo-banner-track"
          style={{ transform: `translateX(-${activeIdx * 100}%)` }}
        >
          {slides.map((slide, idx) => {
            const btnText = slide.button_text || slide.btn_text || 'How it works';
            const btnLink = slide.button_link || slide.btn_link || '/shop';
            const title = slide.title || settings?.title || 'Special Campaign';
            const description =
              slide.description || slide.subtitle || settings?.subtitle || '';
            const image = slide.image || '/images/hero1.webp';

            return (
              <div key={idx} className="promo-banner-slide">
                <div className="promo-banner-card">
                  <Link href={btnLink} className="promo-banner-media">
                    <img
                      src={image}
                      alt={title}
                      loading={idx === 0 ? 'eager' : 'lazy'}
                      decoding="async"
                      onError={(e) => {
                        (e.currentTarget as HTMLImageElement).src = '/images/hero2.webp';
                      }}
                    />
                  </Link>
                  <div className="promo-banner-footer">
                    <div className="promo-banner-info">
                      {title && <h3 className="promo-banner-title">{title}</h3>}
                      {description && (
                        <p className="promo-banner-desc">{description}</p>
                      )}
                    </div>
                    {btnText && (
                      <div className="promo-banner-action">
                        <Link href={btnLink} className="promo-banner-btn">
                          {btnText}
                        </Link>
                      </div>
                    )}
                  </div>
                </div>
              </div>
            );
          })}
        </div>

        {slides.length > 1 && (
          <div className="promo-banner-dots" aria-label="Promo banner pagination">
            {slides.map((_, idx) => (
              <button
                key={idx}
                type="button"
                className={`promo-banner-dot ${idx === activeIdx ? 'active' : ''}`}
                aria-current={idx === activeIdx ? 'true' : 'false'}
                aria-label={`Go to slide ${idx + 1}`}
                onClick={() => setActiveIdx(idx)}
              />
            ))}
          </div>
        )}
      </div>
    </section>
  );
}