'use client';

import React, { useState, useEffect } from 'react';
import { Flame, Clock, Zap } from 'lucide-react';
import { motion } from 'framer-motion';

interface PromoCountdownProps {
  promoCode?: string;
  promoTitle?: string;
}

function getTimeLeft(): { hours: number; minutes: number; seconds: number } {
  const now = new Date();
  const wibOffset = 7 * 60;
  const utcTime = now.getTime() + now.getTimezoneOffset() * 60000;
  const wibTime = new Date(utcTime + wibOffset * 60000);
  const endOfDay = new Date(wibTime);
  endOfDay.setHours(23, 59, 59, 999);
  const diff = endOfDay.getTime() - wibTime.getTime();
  return {
    hours: Math.floor(diff / (1000 * 60 * 60)),
    minutes: Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60)),
    seconds: Math.floor((diff % (1000 * 60)) / 1000),
  };
}

// Deterministic initial value for hydration safety (same on server & client)
const INITIAL_TIME = { hours: 0, minutes: 0, seconds: 0 };

export default function PromoCountdown({ promoCode = 'WELCOME20', promoTitle = 'Promo Hari Ini' }: PromoCountdownProps) {
  const [time, setTime] = useState(INITIAL_TIME);

  // Subscribe to clock — first tick fires within 1s, avoiding sync setState in effect
  useEffect(() => {
    const timer = setInterval(() => {
      setTime(getTimeLeft());
    }, 1000);
    return () => clearInterval(timer);
  }, []);

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

  return (
    <motion.div initial={{ opacity: 0, y: -10 }} animate={{ opacity: 1, y: 0 }}
      className="mx-auto max-w-7xl px-4 pt-2 pb-1 sm:px-6 lg:px-8">
      <div className="flex items-center justify-center gap-3 overflow-hidden rounded-xl bg-gradient-to-r from-[var(--accent-600)] via-[var(--accent-500)] to-[var(--accent-400)] px-4 py-2.5 shadow-lg shadow-[var(--accent-500)]/20 sm:gap-4 sm:px-6 sm:py-3">
        {/* Title */}
        <div className="flex items-center gap-1.5">
          <Flame className="h-4 w-4 text-white sm:h-5 sm:w-5" />
          <span className="hidden text-xs font-semibold text-white/90 sm:inline">{promoTitle}</span>
        </div>

        {/* Countdown */}
        <div className="flex items-center gap-1">
          <Clock className="h-3 w-3 text-white/60 sm:h-3.5 sm:w-3.5" />
          <div className="flex items-center gap-0.5">
            {[
              { value: pad(time.hours), label: 'j' },
              { value: pad(time.minutes), label: 'm' },
              { value: pad(time.seconds), label: 'd' },
            ].map((unit, i) => (
              <React.Fragment key={unit.label}>
                {i > 0 && <span className="mx-0.5 text-xs font-bold text-white/40 animate-pulse">:</span>}
                <div className="flex flex-col items-center">
                  <span className="min-w-[28px] rounded-md bg-black/25 px-1.5 py-0.5 text-center text-sm font-bold text-white tabular-nums sm:min-w-[32px] sm:text-base">
                    {unit.value}
                  </span>
                  <span className="text-[8px] text-white/50 sm:text-[9px]">{unit.label}</span>
                </div>
              </React.Fragment>
            ))}
          </div>
        </div>

        {/* Promo Code */}
        <div className="flex items-center gap-1.5 rounded-lg bg-white/20 px-2.5 py-1 backdrop-blur-sm sm:px-3 sm:py-1.5">
          <Zap className="h-3 w-3 text-yellow-300" />
          <span className="text-xs font-bold tracking-wider text-white">{promoCode}</span>
        </div>
      </div>
    </motion.div>
  );
}