import { useState, useEffect, useMemo } from "react";

export default function Timer1(Props: Timer.Timer) {
    const { eventDate, className, timeZone = "UTC" } = Props;

    const getEventTime = (date: string | undefined) => {
        if (!date) return 0;
        try {
            const eventDate = new Date(date);
            const utcDate = new Date(
                eventDate.toLocaleString("en-US", { timeZone })
            );
            const offset = eventDate.getTime() - utcDate.getTime();
            return eventDate.getTime() + offset;
        } catch {
            return 0;
        }
    };

    const eventTime = getEventTime(eventDate);

    const currentTime = new Date().getTime();
    const initialTimeLeft = Math.max(
        0,
        Math.floor((eventTime - currentTime) / 1000)
    );

    const [timeLeft, setTimeLeft] = useState<number>(initialTimeLeft);

    useEffect(() => {
        if (timeLeft <= 0) return;

        const interval = setInterval(() => {
            setTimeLeft((prev) => {
                if (prev <= 0) {
                    clearInterval(interval);
                    return 0;
                }
                return prev - 1;
            });
        }, 1000);

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

    const formatTime = (t: number) => (t < 10 ? `0${t}` : t);

    const timeUnits = useMemo(() => {
        const days = Math.floor(timeLeft / 86400);
        const hours = Math.floor((timeLeft % 86400) / 3600);
        const min = Math.floor((timeLeft % 3600) / 60);
        const sec = timeLeft % 60;

        return [
            { label: "Días", value: days },
            { label: "Horas", value: hours },
            { label: "Minutos", value: min },
            { label: "Segundos", value: sec },
        ];
    }, [timeLeft]);

    return (
        <div className="text-white text-center flex justify-center items-center py-5 gap-x-3 md:gap-x-6 select-none">
            {timeUnits.map(({ label, value }) => (
                <div
                    key={label}
                    className={`p-3 rounded shadow w-20 md:w-32 flex flex-col items-center darkButton ${className}`}
                >
                    <span className="text-3xl md:text-6xl text">
                        {formatTime(value)}
                    </span>
                    <span className="text-xs md:text-lg text">{label}</span>
                </div>
            ))}
        </div>
    );
}