'use client';

import React, { useState, useEffect, useCallback } from 'react';
import Link from 'next/link';
import { apiRequest } from '@/lib/api';
import { getMediaUrl } from '@/lib/media';
import AuthModal from '@/components/AuthModal';
import { ChevronLeft, ChevronRight, Sparkles, ArrowRight } from 'lucide-react';

interface BannerData {
  _id: string;
  title: string;
  subtitle?: string;
  imageUrl: string;
  linkUrl: string;
  ctaText?: string;
  isActive: boolean;
  displayOrder?: number;
}

export default function Banner() {
  const [authModalOpen, setAuthModalOpen] = useState(false);
  const [banners, setBanners] = useState<BannerData[]>([]);
  const [currentIndex, setCurrentIndex] = useState(0);
  const [loading, setLoading] = useState(true);

  const fetchBanners = useCallback(async () => {
    setLoading(true);
    const res = await apiRequest('/banners');
    if (res.success && Array.isArray(res.banners) && res.banners.length > 0) {
      const activeList = res.banners.filter((b: BannerData) => b.isActive);
      if (activeList.length > 0) {
        setBanners(activeList);
      }
    }
    setLoading(false);
  }, []);

  useEffect(() => {
    fetchBanners();
  }, [fetchBanners]);

  // Auto-slide interval (5 seconds)
  useEffect(() => {
    if (banners.length <= 1) return;

    const timer = setInterval(() => {
      setCurrentIndex((prev) => (prev + 1) % banners.length);
    }, 5000);

    return () => clearInterval(timer);
  }, [banners.length]);

  const handlePrev = () => {
    setCurrentIndex((prev) => (prev === 0 ? banners.length - 1 : prev - 1));
  };

  const handleNext = () => {
    setCurrentIndex((prev) => (prev + 1) % banners.length);
  };

  const displayBanners: BannerData[] = banners;

  return (
    <>
      <section id="home" className="relative w-full min-h-[580px] sm:min-h-[660px] md:min-h-[720px] bg-black overflow-hidden border-b border-gray-800/80">
        {loading ? (
          <div className="absolute inset-0 w-full h-full flex flex-col items-center justify-center bg-[#111] z-10">
            <div className="animate-spin rounded-full h-12 w-12 border-b-4 border-[#FECE00]"></div>
            <p className="text-gray-400 mt-4 font-medium animate-pulse tracking-wide">Loading Banners...</p>
          </div>
        ) : displayBanners.length === 0 ? (
          <div className="absolute inset-0 w-full h-full flex flex-col items-center justify-center bg-[#111] z-10 px-4 text-center">
            <div className="w-16 h-16 mb-4 opacity-50">
              <Sparkles className="w-full h-full text-[#FECE00]" />
            </div>
            <h2 className="font-courgette text-2xl sm:text-3xl text-gray-300">
              No banners available at the moment.
            </h2>
            <p className="text-gray-500 mt-2 text-sm sm:text-base">
              Check back later for updates and new courses!
            </p>
          </div>
        ) : (
          displayBanners.map((banner, idx) => {
            const isCurrent = idx === currentIndex;
            const bgImg = banner.imageUrl ? getMediaUrl(banner.imageUrl) : '/teacher.webp';

            // Format subtitle lines into bullet points if containing newlines or bullet symbols
            const subtitleLines = banner.subtitle
              ? banner.subtitle.split('\n').map((line) => line.trim()).filter(Boolean)
              : [];

            return (
              <div
                key={banner._id || idx}
                className={`absolute inset-0 w-full h-full transition-opacity duration-1000 ease-in-out ${isCurrent ? 'opacity-100 z-10 pointer-events-auto' : 'opacity-0 z-0 pointer-events-none'
                  }`}
              >
                {/* Full Background Image */}
                <div className="absolute inset-0 w-full h-full overflow-hidden">
                  <img
                    src={bgImg}
                    alt={banner.title}
                    className="w-full h-full object-cover object-center filter contrast-[1.05] "
                    onError={(e) => {
                      (e.target as HTMLImageElement).src = '/teacher.webp';
                    }}
                  />
                </div>

                {/* Dark Gradient Overlay for optimal legibility */}
                <div className="absolute inset-0 bg-gradient-to-r from-black/45 via-black/35 to-black/10" />
                <div className="absolute inset-0 bg-radial from-transparent via-black/30 to-black/60" />

                {/* Hero Content Overlay */}
                <div className="relative z-20 w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-32 sm:pt-40 md:pt-44 pb-16 sm:pb-24 h-full flex flex-col justify-center text-left">
                  <div className="max-w-2xl space-y-5">
                    {/* Title */}
                    <h1 className="font-courgette text-3xl sm:text-4xl md:text-5xl lg:text-6xl text-[#FECE00] leading-tight tracking-tight drop-shadow-xl">
                      {banner.title}
                    </h1>

                    {/* Subtitle Lines Container (Fixed Height to prevent layout shift) */}
                    <div className="space-y-2.5 min-h-[80px] sm:min-h-[110px]">
                      {subtitleLines.length > 0 && subtitleLines.map((line, lineIdx) => {
                        const isBullet = line.startsWith('-') || line.startsWith('•');
                        const cleanText = line.replace(/^[-•]\s*/, '');

                        if (isBullet) {
                          return (
                            <div key={lineIdx} className="flex items-center gap-2.5 font-courgette text-xl sm:text-2xl text-white/95 tracking-wide">
                              <span className="text-[#FECE00] font-bold text-2xl">-</span>
                              <span>{cleanText}</span>
                            </div>
                          );
                        }

                        return (
                          <p key={lineIdx} className="text-gray-200 text-sm sm:text-base font-semibold leading-relaxed">
                            {line}
                          </p>
                        );
                      })}
                    </div>

                    {/* Action CTAs */}
                    <div className="pt-4 flex flex-wrap items-center gap-4">
                      <button
                        type="button"
                        onClick={() => setAuthModalOpen(true)}
                        className="px-8 py-3.5 rounded-xl bg-[#FECE00] hover:bg-black text-black hover:text-[#FECE00] font-extrabold text-sm uppercase tracking-wider shadow-md hover:shadow-lg transition-all active:scale-95 flex items-center justify-center gap-2 group cursor-pointer"
                      >
                        <span>{banner.ctaText || 'START LEARNING NOW'}</span>
                      </button>

                      <a
                        href={banner.linkUrl || '/#courses'}
                        onClick={(e) => {
                          const targetUrl = banner.linkUrl || '/#courses';
                          if (targetUrl.startsWith('/#')) {
                            e.preventDefault();
                            const targetId = targetUrl.replace('/#', '');
                            const elem = document.getElementById(targetId);
                            if (elem) {
                              const yOffset = -110;
                              const y = elem.getBoundingClientRect().top + window.pageYOffset + yOffset;
                              window.scrollTo({ top: y, behavior: 'smooth' });
                            }
                          }
                        }}
                        className="px-8 py-3.5 rounded-xl border-2 border-white/80 hover:border-white hover:bg-white/10 text-white font-extrabold text-sm uppercase tracking-wider transition-all active:scale-95 flex items-center justify-center gap-2 cursor-pointer"
                      >
                        <span>VIEW ALL COURSES</span>
                      </a>
                    </div>
                  </div>
                </div>
              </div>
            );
          })
        )}

        {/* Carousel Prev & Next Controls (shown if multiple banners exist) */}
        {displayBanners.length > 1 && (
          <>
            <button
              onClick={handlePrev}
              className="absolute left-4 sm:left-6 top-1/2 -translate-y-1/2 z-30 p-3 rounded-full bg-black/40 hover:bg-[#FECE00] text-white hover:text-black border border-white/20 transition-all duration-200 cursor-pointer shadow-lg"
              aria-label="Previous Banner"
            >
              <ChevronLeft className="w-6 h-6" />
            </button>

            <button
              onClick={handleNext}
              className="absolute right-4 sm:right-6 top-1/2 -translate-y-1/2 z-30 p-3 rounded-full bg-black/40 hover:bg-[#FECE00] text-white hover:text-black border border-white/20 transition-all duration-200 cursor-pointer shadow-lg"
              aria-label="Next Banner"
            >
              <ChevronRight className="w-6 h-6" />
            </button>

            {/* Carousel Pagination Dots */}
            <div className="absolute bottom-6 left-1/2 -translate-x-1/2 z-30 flex items-center gap-2.5">
              {displayBanners.map((_, dotIdx) => (
                <button
                  key={dotIdx}
                  onClick={() => setCurrentIndex(dotIdx)}
                  className={`h-2.5 rounded-full transition-all duration-300 cursor-pointer ${dotIdx === currentIndex ? 'w-8 bg-[#FECE00]' : 'w-2.5 bg-white/40 hover:bg-white/70'
                    }`}
                  aria-label={`Go to slide ${dotIdx + 1}`}
                />
              ))}
            </div>
          </>
        )}
      </section>

      <AuthModal
        isOpen={authModalOpen}
        onClose={() => setAuthModalOpen(false)}
        initialMode="signup"
      />
    </>
  );
}