'use client'

import { useState, useEffect } from 'react';

interface TimeLeft {
  days: number;
  hours: number;
  minutes: number;
  seconds: number;
}

interface SaleCountdownProps {
  hasActiveSale: boolean;
  maxSalePercentage?: number;
  saleEndDate?: string | null;
}

export function SaleCountdown({ hasActiveSale, maxSalePercentage = 5, saleEndDate }: SaleCountdownProps) {
  const [timeLeft, setTimeLeft] = useState<TimeLeft>({ days: 0, hours: 0, minutes: 0, seconds: 0 });
  const [mounted, setMounted] = useState(false);

  useEffect(() => {
    setMounted(true);
  }, []);

  useEffect(() => {
    if (!mounted) return;

    const calculateTimeLeft = (): TimeLeft => {
      const now = new Date();
      let targetDate: Date;

      if (saleEndDate) {
        // Use the sale end date from admin
        try {
          const saleDate = new Date(saleEndDate);
          // Always set to end of day for proper countdown display
          targetDate = new Date(saleDate.getFullYear(), saleDate.getMonth(), saleDate.getDate(), 23, 59, 59, 999);
        } catch (error) {
          console.error('Error parsing sale end date:', error);
          // Fallback to next Sunday if date parsing fails
          const nextSunday = new Date();
          const daysUntilSunday = (7 - now.getDay()) % 7;
          const targetDay = daysUntilSunday === 0 ? 7 : daysUntilSunday;
          
          nextSunday.setDate(now.getDate() + targetDay);
          nextSunday.setHours(23, 59, 59, 999);
          targetDate = nextSunday;
        }
      } else {
        // Fallback to next Sunday at 23:59:59
        const nextSunday = new Date();
        const daysUntilSunday = (7 - now.getDay()) % 7;
        const targetDay = daysUntilSunday === 0 ? 7 : daysUntilSunday;
        
        nextSunday.setDate(now.getDate() + targetDay);
        nextSunday.setHours(23, 59, 59, 999);
        targetDate = nextSunday;
      }

      const difference = targetDate.getTime() - now.getTime();

      if (difference > 0) {
        return {
          days: Math.floor(difference / (1000 * 60 * 60 * 24)),
          hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
          minutes: Math.floor((difference / 1000 / 60) % 60),
          seconds: Math.floor((difference / 1000) % 60)
        };
      }

      return { days: 0, hours: 0, minutes: 0, seconds: 0 };
    };

    const timer = setInterval(() => {
      setTimeLeft(calculateTimeLeft());
    }, 1000);

    // Initial calculation
    setTimeLeft(calculateTimeLeft());

    return () => clearInterval(timer);
  }, [mounted]);

  if (!mounted) {
    return <div className="h-24" />; // Placeholder to prevent hydration mismatch
  }

  // Only show countdown if there are active sales
  if (!hasActiveSale) return null;

  const isActive = timeLeft.days > 0 || timeLeft.hours > 0 || timeLeft.minutes > 0 || timeLeft.seconds > 0;

  if (!isActive) return null;

  return (
    <div className="relative bg-gradient-to-r from-blue-500 via-purple-500 to-orange-500 text-white py-4 px-6 rounded-lg shadow-lg mb-8 overflow-hidden">
      <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/10 to-transparent animate-shimmer"></div>
      <div className="relative text-center z-10">
        <h3 className="text-xl sm:text-2xl font-bold mb-2">AKCIJA SE ZAVRŠAVA!</h3>
        <p className="text-sm sm:text-base mb-3">
          Popust od <span className="text-2xl sm:text-3xl font-extrabold text-yellow-300 mx-1">{maxSalePercentage}%</span> važi još:
        </p>
        
        <div className="flex justify-center gap-2 sm:gap-4">
          <div className="bg-white/20 backdrop-blur rounded-lg px-2 sm:px-3 py-2 min-w-[60px] sm:min-w-[70px]">
            <div className="text-xl sm:text-2xl font-bold">{timeLeft.days}</div>
            <div className="text-xs sm:text-sm opacity-90">dana</div>
          </div>
          
          <div className="bg-white/20 backdrop-blur rounded-lg px-2 sm:px-3 py-2 min-w-[60px] sm:min-w-[70px]">
            <div className="text-xl sm:text-2xl font-bold">{timeLeft.hours.toString().padStart(2, '0')}</div>
            <div className="text-xs sm:text-sm opacity-90">sati</div>
          </div>
          
          <div className="bg-white/20 backdrop-blur rounded-lg px-2 sm:px-3 py-2 min-w-[60px] sm:min-w-[70px]">
            <div className="text-xl sm:text-2xl font-bold">{timeLeft.minutes.toString().padStart(2, '0')}</div>
            <div className="text-xs sm:text-sm opacity-90">min</div>
          </div>
          
          <div className="bg-white/20 backdrop-blur rounded-lg px-2 sm:px-3 py-2 min-w-[60px] sm:min-w-[70px]">
            <div className="text-xl sm:text-2xl font-bold">{timeLeft.seconds.toString().padStart(2, '0')}</div>
            <div className="text-xs sm:text-sm opacity-90">sek</div>
          </div>
        </div>
      </div>
    </div>
  );
}