import { useQuery } from '@tanstack/react-query'
import { getHealth } from '@/api/health'
import '@/styles/footer.css'

/**
 * Общий футер приложения: версия инстанса и копирайт со ссылкой на автора.
 *
 * Ставится на всех страницах, КРОМЕ комнаты конференции (`RoomPage`) — там
 * полноэкранное видео и тулбар, футеру места нет. Раскладок в приложении
 * несколько (`page-shell`, `AuthLayout`, `join-shell`, `lobby-shell`), поэтому
 * компонент рендерит только собственный `<footer>`, а привязку к конкретной
 * раскладке делает CSS (см. `styles/footer.css`).
 *
 * Версия — из публичного `GET /api/health` (авторизации не требует, годится и
 * для экранов входа). Поле `version` опционально: если backend его не отдал,
 * версию просто не показываем (см. `HealthOut.version`). Ключ запроса тот же
 * `['health']`, что и у админки, — react-query отдаст общий закэшированный
 * результат, лишнего запроса не будет.
 *
 * Год — текущий, из `Date` (не захардкожен): страница живёт в браузере
 * пользователя и не должна устаревать 1 января.
 */
export function AppFooter() {
  const { data: health } = useQuery({ queryKey: ['health'], queryFn: getHealth, retry: false })

  return (
    <footer className="app-footer">
      VidConf{health?.version ? ` · v${health.version}` : ''} · © {new Date().getFullYear()} · by{' '}
      <a href="https://github.com/MaxRonzhin" target="_blank" rel="noopener">
        MaxRonzhin
      </a>
    </footer>
  )
}