/**
 * @license
 * SPDX-License-Identifier: Apache-2.0
 */

import React, { useState, useEffect } from 'react';
import { 
  Sparkles, 
  ChevronLeft, 
  ChevronRight, 
  Percent, 
  Megaphone, 
  Gift, 
  Zap, 
  Clock, 
  Bell, 
  MapPin, 
  Tag, 
  IndianRupee 
} from 'lucide-react';
import { motion, AnimatePresence } from 'motion/react';

interface OffersSliderProps {
  onSelectProperty?: (propertyId: string) => void;
}

export default function OffersSlider({ onSelectProperty }: OffersSliderProps) {
  const [currentSlide, setCurrentSlide] = useState(0);

  // Offers array representing campaign details given by the App
  const slides = [
    {
      id: 'slide-1',
      badge: '⚡ MONSOON SPECIAL',
      title: 'Flat ₹15/hr Off on DC Fast Charge Stations',
      description: 'Unlock supercharged savings! Apply checking-in promo vouchers at Baner Tech Park Charge & Stay or Koregaon Park locations.',
      code: 'FASTZAP15',
      color: 'from-amber-500 via-orange-600 to-rose-650',
      actionText: 'View Baner Station',
      targetPropertyId: 'prop-3'
    },
    {
      id: 'slide-2',
      badge: '🅿️ INDOOR PARKING PROMO',
      title: 'Viman Nagar Indoor Garages: 20% Off!',
      description: 'Get escape from water clogging! Park safely on underground level 2 under Phoenix Mall with automated barrier entries.',
      code: 'VIMANSTAY',
      color: 'from-indigo-650 via-purple-700 to-teal-700',
      actionText: 'Locate Indoor Hub',
      targetPropertyId: 'prop-2'
    },
    {
      id: 'slide-3',
      badge: '🎁 WELCOME REWARD BONUS',
      title: 'First Visit Guarantee Cashback Deal',
      description: 'Successfully check-in to get ₹100 instantly credited to your app wallet and 5% discount coupon on your next booking!',
      code: 'AUTOEARN',
      color: 'from-emerald-500 via-teal-650 to-indigo-750',
      actionText: 'Update My Profile',
      targetPropertyId: null
    }
  ];

  // Simulated live notifications list showing here
  const notifications = [
    "Next-Gen CCS2 Ultra Fast (150kW) Charger is now fully verified and online at Baner Tech Park!",
    "Traffic Alert: Underpass drainage work near DP Road Kothrud may cause 15 min delays.",
    "EV Station tip: Double check-in cashback rewards are live today between 2:00 PM and 6:00 PM!"
  ];

  const [notifIndex, setNotifIndex] = useState(0);

  // Keep slides auto rotating every 6 seconds
  useEffect(() => {
    const timer = setInterval(() => {
      setCurrentSlide((prev) => (prev + 1) % slides.length);
    }, 6000);
    return () => clearInterval(timer);
  }, [slides.length]);

  // Rotate notifications every 8 seconds
  useEffect(() => {
    const timer = setInterval(() => {
      setNotifIndex((prev) => (prev + 1) % notifications.length);
    }, 7500);
    return () => clearInterval(timer);
  }, [notifications.length]);

  const nextSlide = () => {
    setCurrentSlide((prev) => (prev + 1) % slides.length);
  };

  const prevSlide = () => {
    setCurrentSlide((prev) => (prev - 1 + slides.length) % slides.length);
  };

  return (
    <div className="space-y-3 shrink-0">
      
      {/* ================= PROMOTIONAL SLIDER BODY ================= */}
      <div className="relative overflow-hidden rounded-3xl border border-slate-800 bg-slate-900 select-none shadow-xl h-44 sm:h-36">
        
        {/* Carousel slide transition wrapper */}
        <AnimatePresence mode="wait">
          <motion.div
            key={currentSlide}
            initial={{ opacity: 0, x: 20 }}
            animate={{ opacity: 1, x: 0 }}
            exit={{ opacity: 0, x: -20 }}
            transition={{ duration: 0.3 }}
            className={`absolute inset-0 bg-gradient-to-r ${slides[currentSlide].color} p-4 sm:p-5 flex items-center justify-between text-left`}
          >
            {/* Visual vector mesh background overlay */}
            <div className="absolute inset-0 bg-[radial-gradient(circle_at_30%_20%,rgba(255,255,255,0.08)_0%,transparent_50%)]" />
            
            <div className="flex-1 space-y-1 md:space-y-1.5 max-w-[85%] relative z-10">
              <span className="inline-block px-2 py-0.5 bg-slate-950/40 backdrop-blur-md rounded text-[9px] font-black text-white uppercase tracking-wider">
                {slides[currentSlide].badge}
              </span>
              <h3 className="text-white text-xs sm:text-sm font-black tracking-tight leading-snug">
                {slides[currentSlide].title}
              </h3>
              <p className="text-slate-200 text-[10px] leading-relaxed line-clamp-2 md:line-clamp-1">
                {slides[currentSlide].description}
              </p>
              
              <div className="flex items-center gap-3 pt-1">
                <span className="flex items-center gap-1 text-[9.5px] font-extrabold text-white bg-slate-950/20 px-2 py-0.5 rounded border border-white/10 font-mono">
                  <Tag className="w-3 h-3 text-amber-300" />
                  Promo ID: {slides[currentSlide].code}
                </span>

                {slides[currentSlide].targetPropertyId && onSelectProperty && (
                  <button
                    onClick={() => onSelectProperty && onSelectProperty(slides[currentSlide].targetPropertyId!)}
                    className="text-[9.5px] font-black text-slate-950 bg-white hover:bg-slate-100 px-3 py-1 rounded-lg transition-all"
                  >
                    {slides[currentSlide].actionText}
                  </button>
                )}
              </div>
            </div>

            {/* Glowing Icon indicator */}
            <div className="hidden sm:flex p-3 bg-white/10 backdrop-blur-md rounded-2xl border border-white/10 shrink-0 text-white relative z-10">
              <Gift className="w-6 h-6 animate-pulse" />
            </div>

          </motion.div>
        </AnimatePresence>

        {/* Carousel buttons */}
        <div className="absolute bottom-2 right-2 flex items-center gap-1 z-20">
          <button
            onClick={prevSlide}
            className="p-1 px-1.5 rounded-lg bg-slate-950/40 hover:bg-slate-950/70 border border-white/5 text-white/70 hover:text-white transition-all text-xs"
          >
            <ChevronLeft className="w-3.5 h-3.5" />
          </button>
          
          <button
            onClick={nextSlide}
            className="p-1 px-1.5 rounded-lg bg-slate-950/40 hover:bg-slate-950/70 border border-white/5 text-white/70 hover:text-white transition-all text-xs"
          >
            <ChevronRight className="w-3.5 h-3.5" />
          </button>
        </div>

        {/* Slide Indicator dots */}
        <div className="absolute bottom-3 left-4 flex gap-1 z-20">
          {slides.map((_, idx) => (
            <span
              key={idx}
              className={`w-1.5 h-1.5 rounded-full transition-all duration-300 ${currentSlide === idx ? 'bg-white w-4' : 'bg-white/40'}`}
            />
          ))}
        </div>

      </div>

      {/* ================= LIVE NOTIFICATIONS ROW TICKER ================= */}
      <div className="bg-slate-900/60 border border-slate-800 rounded-xl p-2.5 flex items-center gap-3 select-none text-left">
        <div className="flex items-center gap-1 text-amber-500 bg-amber-500/10 border border-amber-500/20 px-2 py-0.5 rounded-lg font-mono text-[9px] font-bold shrink-0">
          <Bell className="w-3 h-3 animate-bounce" />
          <span>ALERT Ticker</span>
        </div>
        
        <div className="flex-1 overflow-hidden relative h-4">
          <AnimatePresence mode="wait">
            <motion.p
              key={notifIndex}
              initial={{ opacity: 0, y: 10 }}
              animate={{ opacity: 1, y: 0 }}
              exit={{ opacity: 0, y: -10 }}
              transition={{ duration: 0.25 }}
              className="text-[10px] sm:text-[10.5px] font-semibold text-slate-350 truncate font-mono"
            >
              {notifications[notifIndex]}
            </motion.p>
          </AnimatePresence>
        </div>
      </div>

    </div>
  );
}
