"use client";

import { useEffect, useState } from "react";

function partsFromMs(diff: number): { days: number; hours: number; minutes: number; seconds: number } {
  const total = Math.max(0, Math.floor(diff / 1000));
  return {
    days: Math.floor(total / 86400),
    hours: Math.floor((total % 86400) / 3600),
    minutes: Math.floor((total % 3600) / 60),
    seconds: total % 60,
  };
}

function fa(n: number): string {
  return n.toLocaleString("fa-IR");
}

export function CountdownTimer({ endsAt }: { endsAt?: string | null }) {
  const [now, setNow] = useState(() => Date.now());

  useEffect(() => {
    const id = window.setInterval(() => setNow(Date.now()), 1000);
    return () => window.clearInterval(id);
  }, []);

  if (!endsAt) {
    return <span className="text-slate-500">بدون مهلت مشخص</span>;
  }

  const end = new Date(endsAt).getTime();
  if (Number.isNaN(end)) {
    return <span className="text-slate-500">—</span>;
  }

  const diff = end - now;
  if (diff <= 0) {
    return <span className="font-medium text-rose-700">مهلت تمام شده</span>;
  }

  const { days, hours, minutes, seconds } = partsFromMs(diff);
  const chunks: string[] = [];
  if (days > 0) chunks.push(`${fa(days)} روز`);
  chunks.push(`${fa(hours)} ساعت`);
  chunks.push(`${fa(minutes)} دقیقه`);
  chunks.push(`${fa(seconds)} ثانیه`);

  return (
    <span className="tabular-nums font-semibold text-amber-900">
      {chunks.join(" و ")}
    </span>
  );
}