import { useState } from 'react'
import Alert from '@mui/material/Alert'
import Box from '@mui/material/Box'
import Button from '@mui/material/Button'
import Checkbox from '@mui/material/Checkbox'
import Dialog from '@mui/material/Dialog'
import DialogActions from '@mui/material/DialogActions'
import DialogContent from '@mui/material/DialogContent'
import DialogTitle from '@mui/material/DialogTitle'
import FormControlLabel from '@mui/material/FormControlLabel'
import Typography from '@mui/material/Typography'
import { useQuery } from '@tanstack/react-query'
import { fetchAdminGallery } from '@/entities/gallery'
import { OptimizedImage } from '@/shared/ui/OptimizedImage'

export function GalleryImagePicker({
  open,
  onClose,
  onSelect,
  currentUrls,
}: {
  open: boolean
  onClose: () => void
  onSelect: (urls: string[]) => void
  currentUrls: string[]
}) {
  const [selectedUrls, setSelectedUrls] = useState<Set<string>>(() => new Set())
  const [hideUsed, setHideUsed] = useState(false)

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

  const toggleUrl = (url: string) => {
    setSelectedUrls((prev) => {
      const next = new Set(prev)
      if (next.has(url)) {
        next.delete(url)
      } else {
        next.add(url)
      }
      return next
    })
  }

  const handleApply = () => {
    onSelect([...selectedUrls])
    setSelectedUrls(new Set())
    onClose()
  }

  const handleClose = () => {
    setSelectedUrls(new Set())
    onClose()
  }

  return (
    <Dialog open={open} onClose={handleClose} fullWidth maxWidth="sm">
      <DialogTitle>Изображения из галереи</DialogTitle>
      <DialogContent dividers>
        {galleryQuery.isLoading && <Typography color="text.secondary">Загрузка списка…</Typography>}
        {galleryQuery.isError && <Alert severity="error">Не удалось загрузить галерею. Попробуйте ещё раз.</Alert>}
        {galleryQuery.data?.items.length === 0 && !galleryQuery.isLoading && (
          <Typography color="text.secondary">В галерее пока нет файлов. Загрузите их в разделе «Галерея».</Typography>
        )}
        {galleryQuery.data &&
          galleryQuery.data.items.length > 0 &&
          galleryQuery.data.items.filter((i) => i.isResized).length === 0 &&
          !galleryQuery.isLoading && (
            <Typography color="text.secondary">
              В галерее пока нет обработанных изображений. Сначала обработайте их в разделе «Галерея».
            </Typography>
          )}

        <FormControlLabel
          control={<Checkbox checked={hideUsed} onChange={(_, v) => setHideUsed(v)} />}
          label="Скрыть уже прикреплённые"
          sx={{ mb: 1 }}
        />
        {galleryQuery.data &&
          galleryQuery.data.items.length > 0 &&
          galleryQuery.data.items.filter((i) => i.isResized).length === 0 &&
          !galleryQuery.isLoading && (
            <Typography color="text.secondary">
              В галерее нет обработанных изображений. Сначала обработайте их в разделе «Галерея».
            </Typography>
          )}
        <Box
          sx={{
            display: 'grid',
            gridTemplateColumns: 'repeat(auto-fill, minmax(120px, 1fr))',
            gap: 1.5,
            pt: 1,
          }}
        >
          {(galleryQuery.data?.items ?? [])
            .filter((item) => item.isResized)
            .filter((item) => !hideUsed || !item.inUse)
            .map((item) => {
              const alreadyInCard = currentUrls.includes(item.url)
              return (
                <FormControlLabel
                  key={item.id}
                  sx={{ m: 0, alignItems: 'flex-start' }}
                  control={
                    <Checkbox
                      checked={alreadyInCard || selectedUrls.has(item.url)}
                      disabled={alreadyInCard}
                      onChange={() => toggleUrl(item.url)}
                    />
                  }
                  label={
                    <Box sx={{ width: '100%', maxHeight: 100, borderRadius: 1, overflow: 'hidden' }}>
                      <OptimizedImage
                        src={item.url}
                        alt=""
                        widths={[320, 640]}
                        sizes="120px"
                        sx={{ width: '100%', height: '100%', objectFit: 'cover' }}
                      />
                    </Box>
                  }
                />
              )
            })}
        </Box>
      </DialogContent>
      <DialogActions>
        <Button onClick={handleClose}>Отмена</Button>
        <Button
          variant="contained"
          onClick={handleApply}
          disabled={![...selectedUrls].some((u) => !currentUrls.includes(u))}
        >
          Добавить
        </Button>
      </DialogActions>
    </Dialog>
  )
}
