"use client"

import {OpsPanel} from "@/components/ops-panel"
import {Button} from "@/components/ui/button"
import type {useAlertsTargets} from "@/hooks/use-alerts-targets"

export function AlertsTargetsStatus({catalogs}:{catalogs:ReturnType<typeof useAlertsTargets>}){
 const rows=[{key:"bgp" as const,label:"BGP",note:"API не сообщает о полноте опроса устройств."},{key:"servers" as const,label:"Серверы",note:"Подписи устройств для целей GRE."},{key:"gre" as const,label:"GRE",note:"Без статуса API состояние туннеля неизвестно."}]
 return <OpsPanel title="Каталоги целей" description="Обновляются независимо от правил и журнала." contentClassName="divide-y">
  {rows.map(({key,label,note})=>{const state=catalogs[key];const count=key==="gre"?catalogs.gre.data?.tunnels.length:key==="bgp"?catalogs.bgp.data?.length:catalogs.servers.data?.length
   return <section key={key} aria-label={"Каталог "+label} className="flex flex-wrap items-start justify-between gap-3 px-5 py-3">
    <div className="min-w-0 flex-1 basis-48 space-y-1 break-words">
     <p className="text-sm font-medium">{label}</p>
     <p role="status" className="text-xs text-muted-foreground">{state.loading?"Обновление…":state.data===undefined?"Данные ещё не получены.":"Получено объектов: "+count}{state.receivedAt?" Последний успешный ответ: "+new Date(state.receivedAt).toLocaleString("ru-RU"):""}</p>
     {state.error?<p role="alert" className="text-xs text-destructive">{state.error}{state.data!==undefined?". Показан последний успешный каталог.":""}</p>:null}
     <p className="text-xs text-muted-foreground">{note}</p>
    </div>
    <Button type="button" size="sm" variant="outline" disabled={state.loading} onClick={()=>void state.refresh()} aria-label={"Обновить каталог "+label}>Обновить</Button>
   </section>
  })}
 </OpsPanel>
}