"use client";

import { useEffect, useState, useCallback } from "react";
import { useTranslations } from "next-intl";

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

export function CountdownTimer({ targetDate }: { targetDate: string }) {
    const t = useTranslations();
    
    const calculateTimeLeft = useCallback(() => {
        const difference = +new Date(targetDate) - +new Date();
        let timeLeft: TimeLeft = {
            days: 0,
            hours: 0,
            minutes: 0,
            seconds: 0
        };

        if (difference > 0) {
            timeLeft = {
                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 timeLeft;
    }, [targetDate]);

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

    useEffect(() => {
        setTimeLeft(calculateTimeLeft());
        const timer = setInterval(() => {
            setTimeLeft(calculateTimeLeft());
        }, 1000);
        return () => clearInterval(timer);
    }, [calculateTimeLeft]);

    if (!timeLeft) return null;

    const isFinished = timeLeft.days === 0 && timeLeft.hours === 0 && timeLeft.minutes === 0 && timeLeft.seconds === 0;

    if (isFinished) {
        return (
            <div className="px-4 py-2 bg-red-600 rounded-full text-white font-black text-[10px] uppercase tracking-[0.2em] animate-pulse flex items-center gap-2 shadow-lg shadow-red-200">
                <span className="relative flex h-2 w-2">
                    <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-white opacity-75"></span>
                    <span className="relative inline-flex rounded-full h-2 w-2 bg-white"></span>
                </span>
                {t("custom.offer_ended") || "Campaign Ended"}
            </div>
        );
    }

    const CounterBox = ({ value, label }: { value: number, label: string }) => (
        <div className="flex flex-col items-center gap-1 group/box">
            <div className="relative">
                {/* Subtle Glow */}
                <div className="absolute inset-0 bg-primary-tw-600/10 blur-lg rounded-xl opacity-0 group-hover/box:opacity-100 transition-opacity duration-500" />
                
                {/* Digit Box */}
                <div className="relative size-10 sm:size-11 bg-white shadow-[0_4px_12px_-2px_rgba(0,0,0,0.05)] border border-gray-100 rounded-xl flex items-center justify-center overflow-hidden transition-transform group-hover/box:-translate-y-0.5">
                    <span className="text-lg sm:text-xl font-black text-gray-900 font-mono tracking-tighter tabular-nums">
                        {value.toString().padStart(2, '0')}
                    </span>
                    
                    {/* Glass Shine */}
                    <div className="absolute inset-0 bg-gradient-to-br from-white/40 via-transparent to-transparent pointer-events-none" />
                    
                    {/* Subtle bottom shadow for depth */}
                    <div className="absolute bottom-0 inset-x-0 h-[2px] bg-gray-900/5" />
                </div>
            </div>
            
            <span className="text-[8px] font-bold text-gray-400 uppercase tracking-widest transition-colors group-hover/box:text-primary-tw-600">
                {label}
            </span>
        </div>
    );

    const Separator = () => (
        <div className="flex flex-col gap-1 pb-4">
            <div className="size-1 rounded-full bg-gray-200 animate-pulse" />
            <div className="size-1 rounded-full bg-gray-200 animate-pulse [animation-delay:0.5s]" />
        </div>
    );

    return (
        <div className="flex items-center gap-2 sm:gap-3 justify-center">
            <CounterBox value={timeLeft.days} label={t("custom.days_short") || "Days"} />
            <Separator />
            <CounterBox value={timeLeft.hours} label={t("custom.hrs") || "Hrs"} />
            <Separator />
            <CounterBox value={timeLeft.minutes} label={t("custom.min_short") || "Min"} />
            <Separator />
            <CounterBox value={timeLeft.seconds} label={t("custom.sec") || "Sec"} />
        </div>
    );
}