'use client';

import { useState, useEffect } from 'react';

interface CountdownBarProps {
  targetDate?: string;
}

export function CountdownBar({ targetDate }: CountdownBarProps) {
  const [timeLeft, setTimeLeft] = useState({ days: 2, hours: 14, minutes: 33, seconds: 17 });

  useEffect(() => {
    const endDate = targetDate ? new Date(targetDate) : new Date(Date.now() + 3 * 24 * 60 * 60 * 1000);
    
    function updateCountdown() {
      const now = new Date();
      const diff = endDate.getTime() - now.getTime();
      
      if (diff <= 0) {
        setTimeLeft({ days: 0, hours: 0, minutes: 0, seconds: 0 });
        return;
      }
      
      setTimeLeft({
        days: Math.floor(diff / (1000 * 60 * 60 * 24)),
        hours: Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)),
        minutes: Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60)),
        seconds: Math.floor((diff % (1000 * 60)) / 1000),
      });
    }
    
    updateCountdown();
    const interval = setInterval(updateCountdown, 1000);
    return () => clearInterval(interval);
  }, [targetDate]);

  const pad = (n: number) => String(n).padStart(2, '0');

  return (
    <div className="countdown-bar">
      <span className="countdown-bar__text">🔥 Registration closes in:</span>
      <div className="countdown-timer">
        <div className="countdown-timer__unit">
          <span id="days">{pad(timeLeft.days)}</span>
          <span className="countdown-timer__label">Days</span>
        </div>
        <div className="countdown-timer__unit">
          <span id="hours">{pad(timeLeft.hours)}</span>
          <span className="countdown-timer__label">Hrs</span>
        </div>
        <div className="countdown-timer__unit">
          <span id="minutes">{pad(timeLeft.minutes)}</span>
          <span className="countdown-timer__label">Min</span>
        </div>
        <div className="countdown-timer__unit">
          <span id="seconds">{pad(timeLeft.seconds)}</span>
          <span className="countdown-timer__label">Sec</span>
        </div>
      </div>
    </div>
  );
}

interface UrgencyCountdownProps {
  targetDate?: string;
}

export function UrgencyCountdown({ targetDate }: UrgencyCountdownProps) {
  const [timeLeft, setTimeLeft] = useState({ days: 2, hours: 14, minutes: 33, seconds: 17 });

  useEffect(() => {
    const endDate = targetDate ? new Date(targetDate) : new Date(Date.now() + 3 * 24 * 60 * 60 * 1000);
    
    function updateCountdown() {
      const now = new Date();
      const diff = endDate.getTime() - now.getTime();
      
      if (diff <= 0) {
        setTimeLeft({ days: 0, hours: 0, minutes: 0, seconds: 0 });
        return;
      }
      
      setTimeLeft({
        days: Math.floor(diff / (1000 * 60 * 60 * 24)),
        hours: Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)),
        minutes: Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60)),
        seconds: Math.floor((diff % (1000 * 60)) / 1000),
      });
    }
    
    updateCountdown();
    const interval = setInterval(updateCountdown, 1000);
    return () => clearInterval(interval);
  }, [targetDate]);

  const pad = (n: number) => String(n).padStart(2, '0');

  return (
    <div className="urgency-countdown">
      <div className="urgency-unit">
        <div className="urgency-number">{pad(timeLeft.days)}</div>
        <div className="urgency-label">Days</div>
      </div>
      <div className="urgency-unit">
        <div className="urgency-number">{pad(timeLeft.hours)}</div>
        <div className="urgency-label">Hours</div>
      </div>
      <div className="urgency-unit">
        <div className="urgency-number">{pad(timeLeft.minutes)}</div>
        <div className="urgency-label">Minutes</div>
      </div>
      <div className="urgency-unit">
        <div className="urgency-number">{pad(timeLeft.seconds)}</div>
        <div className="urgency-label">Seconds</div>
      </div>
    </div>
  );
}