import React, { useEffect, useState } from 'react';

interface Props {
  expiresAt: number;
  onExpired: () => void;
}

/**
 * شمارش معکوس مهلت رزرو موقت.
 *
 * بدون این، اپراتور نمی‌داند چقدر وقت دارد و رزرو در سکوت منقضی می‌شود — بعد کلیک
 * «ثبت» یک ۴۰۹ می‌گیرد که هیچ‌جا توضیحش را ندیده.
 *
 * مبنا `expires_at` سرور است، نه شمارنده‌ای که از لحظهٔ رندر شروع شود: ساعت مرورگر و
 * تأخیر شبکه هر دو می‌توانند چند ثانیه اختلاف بسازند و آن چند ثانیه دقیقاً همان‌جایی
 * است که رزرو از دست می‌رود.
 */
export default function HoldCountdown({ expiresAt, onExpired }: Props) {
  const [remaining, setRemaining] = useState(() => expiresAt - Math.floor(Date.now() / 1000));

  useEffect(() => {
    const tick = () => {
      const left = expiresAt - Math.floor(Date.now() / 1000);
      setRemaining(left);

      if (left <= 0) onExpired();
    };

    tick();
    const timer = setInterval(tick, 1000);

    return () => clearInterval(timer);
  }, [expiresAt, onExpired]);

  if (remaining <= 0) {
    return (
      <span className="badge red">
        <span className="bdot" />
        مهلت تمام شد
      </span>
    );
  }

  const minutes = Math.floor(remaining / 60);
  const seconds = remaining % 60;

  // زیر یک دقیقه هشدار می‌گیرد؛ همان لحظه‌ای که اپراتور باید تصمیمش را بگیرد.
  const urgent = remaining < 60;

  return (
    <span className={urgent ? 'badge red' : 'badge amber'}>
      <span className="bdot" />
      مهلت ثبت: {minutes}:{String(seconds).padStart(2, '0')}
    </span>
  );
}