"use client";
import {useEffect,useState} from "react";
import {usePathname} from "next/navigation";
import {apiOperations} from "@/lib/api";
export default function OperationalBanner(){
 const path=usePathname();
 const [notice,setNotice]=useState("");
 useEffect(()=>{
  let active=true;
  const refresh=()=>{if(document.visibilityState!=="visible")return; void apiOperations<{maintenance:{mode:string;title:string;message:string}} >("/api/site-state").then(s=>{if(active)setNotice(s.maintenance.mode==="readonly" ? (s.maintenance.message || "站点暂时只读，可以浏览，暂不能提交或修改内容。") : "");}).catch(()=>{});};
  refresh();const timer=setInterval(refresh,30000);
  document.addEventListener("visibilitychange",refresh);
  return ()=>{active=false;clearInterval(timer);document.removeEventListener("visibilitychange",refresh);};
 },[path]);
 if(path.startsWith("/admin") || !notice)return null;
 return <div role="status" className="panel mx-auto my-3 w-full max-w-5xl p-4 text-sm"><strong>只读模式：</strong>{notice}</div>;
}