import { useEffect, useState } from 'react';

/**
 * مدت سپری‌شده از یک لحظه، به‌صورت زنده.
 *
 * `startedAt` تایم‌استمپ **سرور** است و مبنا همان می‌ماند؛ اینجا فقط هر ثانیه دوباره
 * رندر می‌شود. ساعت مرورگر ممکن است چند ثانیه جلو یا عقب باشد، ولی زمانِ ثبت‌شده
 * همان است که سرور نوشته — این عدد فقط برای دیدن است، نه برای ذخیره.
 *
 * `null` یعنی هنوز شروع نشده؛ `finishedAt` که بیاید تایمر می‌ایستد.
 */
export function useElapsed(startedAt: number | null, finishedAt: number | null = null): string | null {
  const [now, setNow] = useState(() => Math.floor(Date.now() / 1000));

  const running = startedAt !== null && finishedAt === null;

  useEffect(() => {
    if (!running) return;

    const id = setInterval(() => setNow(Math.floor(Date.now() / 1000)), 1000);

    return () => clearInterval(id);
  }, [running]);

  if (startedAt === null) return null;

  const seconds = Math.max(0, (finishedAt ?? now) - startedAt);

  return formatDuration(seconds);
}

/** «۰۵:۳۲» یا «۱:۱۲:۰۴» — ساعت فقط وقتی واقعاً از یک ساعت گذشته باشد. */
export function formatDuration(seconds: number): string {
  const h = Math.floor(seconds / 3600);
  const m = Math.floor((seconds % 3600) / 60);
  const s = seconds % 60;
  const pad = (n: number) => String(n).padStart(2, '0');

  return h > 0 ? `${h}:${pad(m)}:${pad(s)}` : `${pad(m)}:${pad(s)}`;
}