import { useRef } from 'react'
import Box from '@mui/material/Box'
import Button from '@mui/material/Button'
import Divider from '@mui/material/Divider'
import Stack from '@mui/material/Stack'
import Typography from '@mui/material/Typography'
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
import { fetchAdminCatalogSlider } from '@/entities/catalog-slider'
import { deleteGalleryImage, fetchAdminGallery, GalleryGrid } from '@/entities/gallery'
import { uploadAdminProductImages } from '@/entities/product/api/product-api'
import { formatAdminImageMaxSizeHint } from '@/shared/constants/upload-limits'
import { invalidateQueryKeys } from '@/shared/lib/invalidate-query-keys'
import { GallerySliderSection } from './GallerySliderSection'

export function AdminGalleryPage() {
  const queryClient = useQueryClient()
  const fileInputRef = useRef<HTMLInputElement>(null)

  const sliderQuery = useQuery({
    queryKey: ['admin', 'catalog-slider'],
    queryFn: fetchAdminCatalogSlider,
  })

  const galleryQuery = useQuery({
    queryKey: ['admin', 'gallery'],
    queryFn: fetchAdminGallery,
  })

  const uploadMut = useMutation({
    mutationFn: (files: File[]) => uploadAdminProductImages(files),
    onSuccess: () => {
      void invalidateQueryKeys(queryClient, [['admin', 'gallery']])
      if (fileInputRef.current) {
        fileInputRef.current.value = ''
      }
    },
  })

  const deleteMut = useMutation({
    mutationFn: (id: string) => deleteGalleryImage(id),
    onSuccess: () => {
      void invalidateQueryKeys(queryClient, [['admin', 'gallery'], ['admin', 'catalog-slider'], ['catalog-slider']])
    },
  })

  const items = galleryQuery.data?.items ?? []

  return (
    <Box>
      <Typography variant="h4" gutterBottom>
        Галерея
      </Typography>
      <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
        Изображения без привязки к товару можно загружать здесь; их же можно добавить в карточку товара через «Из
        галереи». Удаление из списка стирает файл с диска, если оно не используется в товаре.
      </Typography>

      {sliderQuery.isError && (
        <Typography color="error" sx={{ mb: 2 }}>
          Не удалось загрузить настройки слайдера.
        </Typography>
      )}
      {sliderQuery.isLoading && (
        <Typography color="text.secondary" sx={{ mb: 2 }}>
          Загрузка настроек слайдера…
        </Typography>
      )}
      {sliderQuery.isSuccess && (
        <GallerySliderSection
          key={sliderQuery.dataUpdatedAt}
          initialSlides={sliderQuery.data.slides.map((s) => ({
            galleryImageId: s.galleryImageId,
            caption: s.caption,
          }))}
          galleryItems={items}
        />
      )}

      <Divider sx={{ mb: 3 }} />

      <Typography variant="body2" color="text.secondary" sx={{ mb: 1 }}>
        Форматы: PNG, JPEG, WebP. На один файл — до {formatAdminImageMaxSizeHint()}.
      </Typography>

      <Stack direction="row" spacing={2} sx={{ mb: 3, alignItems: 'center', flexWrap: 'wrap' }}>
        <Button variant="contained" component="label" disabled={uploadMut.isPending}>
          Загрузить файлы
          <input
            ref={fileInputRef}
            hidden
            type="file"
            accept="image/png,image/jpeg,image/webp"
            multiple
            onChange={(e) => {
              const files = e.target.files
              if (!files?.length) return
              uploadMut.mutate(Array.from(files))
            }}
          />
        </Button>
        {uploadMut.isPending && <Typography color="text.secondary">Загрузка…</Typography>}
        {uploadMut.isError && (
          <Typography color="error">
            {uploadMut.error instanceof Error ? uploadMut.error.message : 'Ошибка загрузки'}
          </Typography>
        )}
        {deleteMut.isError && (
          <Typography color="error">
            {deleteMut.error instanceof Error ? deleteMut.error.message : 'Ошибка удаления'}
          </Typography>
        )}
      </Stack>

      {galleryQuery.isError && (
        <Typography color="error" sx={{ mb: 2 }}>
          Не удалось загрузить список.
        </Typography>
      )}

      <GalleryGrid items={items} deleting={deleteMut.isPending} onDelete={(id) => deleteMut.mutate(id)} />

      {!galleryQuery.isLoading && items.length === 0 && (
        <Typography color="text.secondary">Пока нет загруженных изображений.</Typography>
      )}
    </Box>
  )
}
