import { useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';

/** 빌드 버전 — 디자인 §2-2 예시(v2.1.2). 릴리스 시 갱신. */
const APP_VERSION = 'v2.1.2';

/**
 * 웹 인증 셸 하단 상태바/푸터 (design.md §2-2, v2.1.2 신설, 약 36px).
 * 사이드바 우측 전폭·DocumentHost 아래 고정. 좌측 저작권, 우측 시스템 상태점·버전·고객지원.
 * 시스템 상태는 정적 "정상"이 기본이며, 마운트 시 /health 1회만 확인해 명시적 5xx 일 때만 강등한다
 * (폴링 없음 — 과도한 헬스체크 회피). 색 외 텍스트 병기(WCAG AA), role="contentinfo".
 */
export function ShellFooter() {
  const { t } = useTranslation();
  const [healthy, setHealthy] = useState(true);

  useEffect(() => {
    const ctrl = new AbortController();
    fetch('/health', { signal: ctrl.signal })
      .then((res) => {
        // 명시적 서버 오류(5xx)만 강등 — 404/네트워크 등은 정적 정상 유지(오탐 방지).
        if (res.status >= 500) setHealthy(false);
      })
      .catch(() => {
        /* 네트워크/중단 — 정적 정상 유지 */
      });
    return () => ctrl.abort();
  }, []);

  return (
    <footer className="kx-shell__footer" role="contentinfo">
      <span className="kx-shell__footer-copy">{t('shell.footerbar.copyright')}</span>
      <div className="kx-shell__footer-right">
        <span className={`kx-shell__footer-status ${healthy ? 'is-ok' : 'is-down'}`}>
          <span className="kx-shell__footer-dot" aria-hidden="true" />
          {healthy ? t('shell.footerbar.systemOk') : t('shell.footerbar.systemDown')}
        </span>
        <span className="kx-shell__footer-sep" aria-hidden="true">
          ·
        </span>
        <span className="kx-shell__footer-version tnum">{APP_VERSION}</span>
        <span className="kx-shell__footer-sep" aria-hidden="true">
          ·
        </span>
        <a className="kx-shell__footer-link" href="/public/exhibit-inquiry">
          {t('shell.footerbar.support')}
        </a>
      </div>
    </footer>
  );
}
