import AutoFixHighOutlinedIcon from '@mui/icons-material/AutoFixHighOutlined'
import CheckCircleOutlineOutlinedIcon from '@mui/icons-material/CheckCircleOutlineOutlined'
import DeleteOutlineOutlinedIcon from '@mui/icons-material/DeleteOutlineOutlined'
import Box from '@mui/material/Box'
import Chip from '@mui/material/Chip'
import IconButton from '@mui/material/IconButton'
import Tooltip from '@mui/material/Tooltip'
import { OptimizedImage } from '@/shared/ui/OptimizedImage'
import type { GalleryImageItem } from '../model/types'

type Props = {
  items: GalleryImageItem[]
  deleting?: boolean
  resizing?: string | null
  onDelete: (id: string) => void
  onResize: (id: string) => void
}

export function GalleryGrid({ items, deleting, resizing, onDelete, onResize }: Props) {
  return (
    <Box
      sx={{
        display: 'grid',
        gridTemplateColumns: 'repeat(auto-fill, minmax(140px, 1fr))',
        gap: 2,
      }}
    >
      {items.map((item) => (
        <Box
          key={item.id}
          sx={{
            position: 'relative',
            borderRadius: 1,
            overflow: 'hidden',
            border: 1,
            borderColor: 'divider',
            aspectRatio: '1',
          }}
        >
          <OptimizedImage
            src={item.url}
            alt=""
            sizes="140px"
            sx={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
          />
          <Box sx={{ position: 'absolute', top: 4, left: 4 }}>
            {item.isResized ? (
              <Chip
                label="Готово"
                size="small"
                color="success"
                icon={<CheckCircleOutlineOutlinedIcon fontSize="small" />}
                sx={{ height: 24, '& .MuiChip-label': { px: 0.75 }, '& .MuiChip-icon': { fontSize: 14, ml: 0.5 } }}
              />
            ) : (
              <Chip
                label="Не обработано"
                size="small"
                color="warning"
                sx={{ height: 24, '& .MuiChip-label': { px: 0.75 } }}
              />
            )}
          </Box>
          <Box sx={{ position: 'absolute', top: 4, right: 4, display: 'flex', gap: 0.5 }}>
            {!item.isResized && (
              <Tooltip title="Обработать (resize)">
                <IconButton
                  size="small"
                  color="primary"
                  sx={{
                    bgcolor: 'background.paper',
                    '&:hover': { bgcolor: 'primary.light', color: 'primary.contrastText' },
                  }}
                  disabled={resizing === item.id}
                  onClick={() => onResize(item.id)}
                >
                  <AutoFixHighOutlinedIcon fontSize="small" />
                </IconButton>
              </Tooltip>
            )}
            <Tooltip title="Удалить из галереи">
              <IconButton
                size="small"
                color="error"
                sx={{
                  bgcolor: 'background.paper',
                  '&:hover': { bgcolor: 'error.light', color: 'error.contrastText' },
                }}
                disabled={deleting}
                onClick={() => onDelete(item.id)}
              >
                <DeleteOutlineOutlinedIcon fontSize="small" />
              </IconButton>
            </Tooltip>
          </Box>
        </Box>
      ))}
    </Box>
  )
}