const { useState: useStatusState, useEffect: useStatusEffect } = React;

function SystemStatusBanner({ connected, onOpenDialog }) {
  const [report, setReport] = useStatusState(null);
  const [unavailable, setUnavailable] = useStatusState(false);
  const [requestError, setRequestError] = useStatusState(window._helpdeskRequestError || null);
  const [expanded, setExpanded] = useStatusState(false);
  const [checking, setChecking] = useStatusState(false);

  useStatusEffect(() => {
    let stopped = false;
    let busy = false;
    async function check() {
      if (busy) return;
      busy = true;
      setChecking(true);
      try {
        const fresh = await window.apiFetch("GET", "/api/system/status", undefined, false, 10000);
        if (!stopped) { setReport(fresh); setUnavailable(false); }
      } catch {
        if (!stopped) setUnavailable(true);
      } finally {
        busy = false;
        if (!stopped) setChecking(false);
      }
    }
    const onError = event => { setRequestError(event.detail); setExpanded(true); };
    const onRecovered = () => setRequestError(null);
    check();
    const timer = setInterval(check, 30000);
    window.addEventListener("helpdesk:api-error", onError);
    window.addEventListener("helpdesk:api-recovered", onRecovered);
    window.addEventListener("helpdesk:status-refresh", check);
    return () => {
      stopped = true;
      clearInterval(timer);
      window.removeEventListener("helpdesk:api-error", onError);
      window.removeEventListener("helpdesk:api-recovered", onRecovered);
      window.removeEventListener("helpdesk:status-refresh", check);
    };
  }, []);

  const issues = [...(report?.issues || [])];
  const notices = report?.notices || [];
  if (unavailable) issues.unshift({ id: "status-api", severity: "error", message: "Связь с сервером потеряна. Данные о проблемах могут быть устаревшими." });
  if (!connected) issues.unshift({ id: "connection", severity: "warn", message: "Нет связи для новых сообщений. Переподключаемся; диалоги могут быть устаревшими." });
  if (requestError) issues.unshift({ id: "request", severity: "error", message: requestError });
  const hasErrors = issues.some(issue => issue.severity === "error");
  const color = hasErrors ? "text-[rgb(var(--hd-danger-text))] bg-[#ef4444]/10 border-[#ef4444]/30" : "text-[rgb(var(--hd-amber-label))] bg-[#f59e0b]/10 border-[#f59e0b]/30";
  const checkedAt = report?.checkedAt ? new Date(report.checkedAt).toLocaleTimeString("ru-RU") : null;

  if (!issues.length) return <div className="shrink-0 px-5 py-1 border-b border-[rgb(var(--hd-banner))] text-xs text-[rgb(var(--hd-secondary))]" role="status">
    {report ? "Проверка сервисов: ошибок не обнаружено" : "Проверяем сервисы…"}{checkedAt && ` · ${checkedAt}`}
    {notices.map(notice => <span key={notice.id} className="ml-3">{notice.message} ({notice.count}).</span>)}
  </div>;

  return <section role="alert" aria-label="Проблемы хелпдеска" className={`shrink-0 border-b px-5 py-2 text-sm ${color}`}>
    <div className="flex flex-wrap items-center gap-x-3 gap-y-1">
      <span className="font-medium">⚠ Проблемы хелпдеска ({issues.length})</span>
      <span className="text-xs">{checkedAt ? `Проверка: ${checkedAt}` : "Нет свежей проверки сервисов"}</span>
      <button type="button" className="underline text-xs" aria-expanded={expanded} onClick={() => setExpanded(value => !value)}>{expanded ? "Свернуть" : "Подробнее"}</button>
      <button type="button" className="underline text-xs disabled:opacity-50" disabled={checking} onClick={() => window.dispatchEvent(new Event("helpdesk:status-refresh"))}>{checking ? "Проверяем…" : "Проверить сейчас"}</button>
    </div>
    {!expanded && <p className="mt-1 text-xs">{issues[0].message}</p>}
    {expanded && <ul className="mt-2 space-y-1 max-h-40 overflow-y-auto scrollbar-thin">
      {issues.map(issue => <li key={issue.id} className="text-xs flex flex-wrap items-center gap-x-2 gap-y-1">
        <span>{issue.message}{issue.count > 1 && ` (${issue.count})`}</span>
        {issue.dialogId && <button type="button" className="underline" onClick={() => onOpenDialog(issue.dialogId)}>Открыть диалог</button>}
        {issue.id === "request" && <button type="button" className="underline" onClick={() => { window._helpdeskRequestError = null; setRequestError(null); }}>Понятно</button>}
      </li>)}
      {notices.map(notice => <li key={notice.id} className="text-xs opacity-80">{notice.message} ({notice.count}).</li>)}
      <li className="text-xs opacity-80">Ошибки диалогов показаны за последние {report?.recentErrorsWindowMinutes || 15} минут. При сбоях сервисов сообщите технической команде.</li>
    </ul>}
  </section>;
}

window.SystemStatusBanner = SystemStatusBanner;