import React, { useState, useEffect } from 'react';
import { LAUNCH_DATE } from '../config';
import { Clock, Sparkles } from 'lucide-react';

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

export const Countdown: React.FC = () => {
  const calculateTimeLeft = (): TimeLeft => {
    const target = new Date(LAUNCH_DATE).getTime();
    const now = new Date().getTime();
    const difference = target - now;

    if (difference <= 0) {
      return { days: 0, hours: 0, minutes: 0, seconds: 0, isLive: true };
    }

    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),
      isLive: false,
    };
  };

  const [timeLeft, setTimeLeft] = useState<TimeLeft>(calculateTimeLeft());

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

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

  const timeUnits = [
    { label: 'DAYS', value: timeLeft.days, color: 'text-[#FF8C32]', border: 'border-slate-200 dark:border-white/10' },
    { label: 'HOURS', value: timeLeft.hours, color: 'text-[#FF8C32]', border: 'border-slate-200 dark:border-white/10' },
    { label: 'MINUTES', value: timeLeft.minutes, color: 'text-[#FF8C32]', border: 'border-slate-200 dark:border-white/10' },
    { label: 'SECONDS', value: timeLeft.seconds, color: 'text-[#FF8C32]', border: 'border-slate-200 dark:border-white/10' },
  ];

  return (
    <div
      id="launch-countdown-widget"
      className="relative p-5 sm:p-7 rounded-2xl bg-white/90 dark:bg-[#161b2b]/90 border border-slate-200/90 dark:border-white/10 shadow-lg dark:shadow-[0_10px_35px_rgba(0,0,0,0.6)] backdrop-blur-xl max-w-xl mx-auto w-full transition-colors duration-300"
    >
      {/* Ambient background glow behind countdown */}
      <div className="absolute -top-10 left-1/4 w-32 h-32 bg-[#FF8C32]/15 rounded-full blur-2xl pointer-events-none" />
      <div className="absolute -bottom-10 right-1/4 w-32 h-32 bg-[#00D7FF]/15 rounded-full blur-2xl pointer-events-none" />

      {/* Header with Title & live indicator */}
      <div className="flex items-center justify-between mb-4 border-b border-slate-200 dark:border-white/5 pb-3">
        <div className="flex items-center gap-2">
          <Clock className="w-4 h-4 text-[#FF8C32]" />
          <span className="font-display font-black text-[10px] uppercase tracking-[0.2em] text-slate-500 dark:text-gray-400">
            LAUNCH COUNTDOWN
          </span>
        </div>
        <div className="flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-slate-100 dark:bg-white/5 border border-slate-200 dark:border-white/10">
          <span className="w-2 h-2 rounded-full bg-[#FF8C32] animate-ping" />
          <span className="w-1.5 h-1.5 rounded-full bg-[#FF8C32]" />
          <span className="text-[10px] font-bold text-[#00A6DB] dark:text-[#00D7FF] tracking-wider">
            AUG 31, 2026
          </span>
        </div>
      </div>

      {/* Countdown Grid */}
      <div className="grid grid-cols-4 gap-2.5 sm:gap-4 text-center">
        {timeUnits.map((unit) => (
          <div
            key={unit.label}
            className={`flex flex-col items-center justify-center p-3 sm:p-4 rounded-xl bg-slate-50 dark:bg-white/5 border ${unit.border} hover:border-[#FF8C32]/50 transition-all duration-300 shadow-sm dark:shadow-inner group`}
          >
            <span
              className={`font-display text-2xl sm:text-4xl font-black tracking-tight ${unit.color} group-hover:scale-105 transition-transform`}
            >
              {String(unit.value).padStart(2, '0')}
            </span>
            <span className="text-[9px] sm:text-[10px] font-bold tracking-widest text-slate-400 dark:text-gray-500 mt-1 uppercase">
              {unit.label}
            </span>
          </div>
        ))}
      </div>

      {/* Subtitle / Status */}
      <div className="mt-4 flex items-center justify-center gap-2 text-center text-xs text-slate-600 dark:text-gray-400 font-medium">
        <Sparkles className="w-3.5 h-3.5 text-[#00A6DB] dark:text-[#00D7FF]" />
        <span>Targeting Solana Mainnet Deployment & Raydium Liquidity</span>
      </div>
    </div>
  );
};
