'use client';

import { useCallback, useEffect, useRef, useState } from 'react';

/**
 * Reusable dashboard refresh controls: on-demand Refresh button + a
 * configurable auto-refresh interval (default 60s, persisted per browser) +
 * a "last updated" time. Drop into any dashboard header:
 *
 *   <DashboardRefreshBar onRefresh={loadData} />
 *
 * `onRefresh` may be async; it's called on the interval and on manual click.
 * Its identity does NOT need to be stable (kept in a ref), so parents can pass
 * an inline function without resetting the timer.
 */
export default function DashboardRefreshBar({
  onRefresh,
  storageKey = 'dashRefreshSec',
}: {
  onRefresh: () => void | Promise<unknown>;
  storageKey?: string;
}) {
  const [refreshSec, setRefreshSec] = useState<number>(() => {
    if (typeof window === 'undefined') return 60;
    const v = Number(localStorage.getItem(storageKey));
    return Number.isFinite(v) && v >= 0 ? v : 60;
  });
  const [lastUpdated, setLastUpdated] = useState<Date | null>(null);
  const [refreshing, setRefreshing] = useState(false);

  const cb = useRef(onRefresh);
  cb.current = onRefresh;

  const setInterval_ = (sec: number) => {
    setRefreshSec(sec);
    try { localStorage.setItem(storageKey, String(sec)); } catch { /* ignore */ }
  };

  const runManual = useCallback(async () => {
    setRefreshing(true);
    try { await cb.current(); setLastUpdated(new Date()); }
    finally { setRefreshing(false); }
  }, []);

  useEffect(() => {
    if (!refreshSec) return;
    const t = setInterval(() => {
      Promise.resolve(cb.current()).then(() => setLastUpdated(new Date())).catch(() => {});
    }, refreshSec * 1000);
    return () => clearInterval(t);
  }, [refreshSec]);

  return (
    <div className="flex flex-wrap items-center gap-3">
      {lastUpdated && (
        <span className="text-[11px] text-vz-muted whitespace-nowrap">
          Updated {lastUpdated.toLocaleTimeString('en-IN', { hour: '2-digit', minute: '2-digit', second: '2-digit' })}
        </span>
      )}
      <button
        type="button"
        onClick={runManual}
        disabled={refreshing}
        title="Refresh now"
        className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-none border border-slate-200 dark:border-slate-700 text-xs font-bold text-slate-600 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-800 disabled:opacity-50 transition cursor-pointer"
      >
        <i className={`fa-solid fa-arrows-rotate ${refreshing ? 'fa-spin' : ''}`}></i>
        Refresh
      </button>
      <label className="inline-flex items-center gap-1.5 text-[11px] font-semibold text-vz-muted" title="Auto-refresh interval">
        <i className="fa-solid fa-gear text-slate-400"></i>
        Auto
        <select
          value={refreshSec}
          onChange={(e) => setInterval_(Number(e.target.value))}
          className="border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 rounded-none px-2 py-1 text-xs font-semibold text-slate-700 dark:text-slate-200 focus:outline-none cursor-pointer"
        >
          <option value={0}>Off</option>
          <option value={30}>30s</option>
          <option value={60}>60s</option>
          <option value={120}>2m</option>
          <option value={300}>5m</option>
        </select>
      </label>
    </div>
  );
}