import { useEffect, useState } from 'react';
import { Construction } from 'lucide-react';
import { api } from '@/lib/api';

/**
 * Small amber pill shown in the topbar when maintenance mode is active.
 * Polls the API every 30s so toggling from another tab still updates.
 */
export function MaintenanceBadge() {
  const [active, setActive] = useState(false);

  useEffect(() => {
    let cancelled = false;
    const tick = async () => {
      try {
        const s = await api.maintenance.get();
        if (!cancelled) setActive(!!s.active);
      } catch { /* silent */ }
    };
    tick();
    const t = window.setInterval(tick, 30_000);
    return () => { cancelled = true; window.clearInterval(t); };
  }, []);

  if (!active) return null;
  return (
    <span
      title="Visitors are seeing the maintenance page. Admins like you keep full access."
      className="inline-flex items-center gap-1.5 h-7 px-2.5 rounded-md bg-amber-50 text-amber-800 ring-1 ring-amber-200 text-[11px] font-semibold uppercase tracking-wider"
    >
      <Construction className="h-3.5 w-3.5" />
      Maintenance
    </span>
  );
}
