"use client";

import { useEffect, useState } from "react";

type RemainingTime = {
  hours: number;
  minutes: number;
  seconds: number;
};

function getRemainingTime(): RemainingTime {
  const now = new Date();
  const endOfDay = new Date(now);
  endOfDay.setHours(23, 59, 59, 999);
  const totalSeconds = Math.max(0, Math.floor((endOfDay.getTime() - now.getTime()) / 1000));

  return {
    hours: Math.floor(totalSeconds / 3600),
    minutes: Math.floor((totalSeconds % 3600) / 60),
    seconds: totalSeconds % 60,
  };
}

function TimeBox({ value, label }: { value: number; label: string }) {
  return (
    <div className="flex min-w-0 flex-1 flex-col items-center rounded-xl bg-white/15 px-1 py-2.5 md:py-3">
      <strong className="text-lg leading-none tabular-nums md:text-2xl" suppressHydrationWarning>
        {String(value).padStart(2, "0")}
      </strong>
      <span className="mt-2 text-[10px] text-white/80 md:text-xs">{label}</span>
    </div>
  );
}

export function SpecialSaleCountdown() {
  const [remaining, setRemaining] = useState(getRemainingTime);

  useEffect(() => {
    const timer = window.setInterval(() => setRemaining(getRemainingTime()), 1000);
    return () => window.clearInterval(timer);
  }, []);

  return (
    <div className="grid w-full grid-cols-3 gap-1.5 md:gap-2" dir="ltr">
      <TimeBox value={remaining.hours} label="ساعت" />
      <TimeBox value={remaining.minutes} label="دقیقه" />
      <TimeBox value={remaining.seconds} label="ثانیه" />
    </div>
  );
}