import { useEffect, useRef, useState } from 'react'
import { GalleryBrowser } from './ImageGallery'

/** Нижний отступ `main` в общем каркасе (py-8): под панелью должен остаться он же. */
const BOTTOM_GAP = 32

/**
 * Отдельная страница «Галерея»: просмотр/загрузка/удаление всех изображений приложения.
 *
 * Своего заголовка нет: страница целиком об одном, и её название уже написано в активной вкладке
 * админки. Страница занимает экран и сама не прокручивается — пагинации у списка нет, а две полосы
 * прокрутки (внешняя и внутри сетки) мешали бы друг другу.
 *
 * Высота меряется по факту, а не вычитается константой из `100vh`: над панелью шапка сайта,
 * заголовок и строка вкладок, которая на узком экране переносится. Любое подобранное число
 * промахивается — либо возвращается страничная прокрутка, либо снизу зияет пустота.
 */
export function GalleryPanel() {
  const panelRef = useRef<HTMLDivElement>(null)
  const [height, setHeight] = useState<number>()

  useEffect(() => {
    const update = () => {
      const top = panelRef.current?.getBoundingClientRect().top ?? 0
      setHeight(Math.max(320, window.innerHeight - top - BOTTOM_GAP))
    }

    update()
    // Пересчитываем и на смене размера окна, и когда каркас над панелью меняет высоту
    // (перенос вкладок, другой язык): ResizeObserver ловит это без опроса.
    window.addEventListener('resize', update)
    const observer = new ResizeObserver(update)
    if (document.body) observer.observe(document.body)

    return () => {
      window.removeEventListener('resize', update)
      observer.disconnect()
    }
  }, [])

  return (
    <div
      ref={panelRef}
      style={{ height }}
      className="crt-panel flex min-h-80 flex-col overflow-hidden rounded-md p-4"
    >
      <GalleryBrowser fill />
    </div>
  )
}
