'use client';

import { useEffect, useState } from 'react';

/**
 * Reloads the page after a delay. TVs run unattended, so a screen that booted while the database
 * was briefly unavailable recovers on its own instead of waiting for staff.
 */
export function TvAutoReload({ seconds }: { seconds: number }) {
  const [left, setLeft] = useState(seconds);
  useEffect(() => {
    const started = Date.now();
    const id = setInterval(() => {
      const remaining = Math.max(0, seconds - Math.floor((Date.now() - started) / 1000));
      setLeft(remaining);
      if (remaining === 0) {
        clearInterval(id);
        window.location.reload();
      }
    }, 1000);
    return () => clearInterval(id);
  }, [seconds]);
  return (
    <p role="status" className="num text-[28px] font-semibold text-cyan-soft">
      Trying again in {left}s
    </p>
  );
}