import Box from '@mui/material/Box'
import Button from '@mui/material/Button'
import FormControl from '@mui/material/FormControl'
import FormControlLabel from '@mui/material/FormControlLabel'
import FormHelperText from '@mui/material/FormHelperText'
import InputLabel from '@mui/material/InputLabel'
import MenuItem from '@mui/material/MenuItem'
import Select from '@mui/material/Select'
import Stack from '@mui/material/Stack'
import Switch from '@mui/material/Switch'
import TextField from '@mui/material/TextField'
import Typography from '@mui/material/Typography'
import { Controller, type UseFormReturn } from 'react-hook-form'
import type { Category } from '@/entities/product/model/types'
import { OptimizedImage } from '@/shared/ui/OptimizedImage'
import type { FormState } from '../model/types'

export function ProductFormFields({
  form,
  categories,
  onRemoveImage,
  onPickFromGallery,
}: {
  form: UseFormReturn<FormState>
  categories: Category[]
  onRemoveImage: (url: string) => void
  onPickFromGallery: () => void
}) {
  return (
    <Stack spacing={2} sx={{ mt: 1 }}>
      <Controller
        control={form.control}
        name="title"
        render={({ field }) => <TextField label="Название" fullWidth required {...field} />}
      />
      <Controller
        control={form.control}
        name="slug"
        render={({ field }) => (
          <TextField
            label="Slug (URL)"
            fullWidth
            {...field}
            helperText="Можно оставить пустым при создании — сгенерируется из названия"
          />
        )}
      />
      <Controller
        control={form.control}
        name="shortDescription"
        render={({ field }) => (
          <TextField label="Краткое описание (для каталога)" fullWidth multiline minRows={2} {...field} />
        )}
      />
      <Controller
        control={form.control}
        name="description"
        render={({ field }) => <TextField label="Описание" fullWidth multiline minRows={2} {...field} />}
      />
      <Controller
        control={form.control}
        name="materials"
        render={({ field }) => (
          <TextField
            label="Материалы"
            fullWidth
            {...field}
            helperText="Список через запятую (например: хлопок, дерево, акрил)"
          />
        )}
      />
      <Controller
        control={form.control}
        name="quantity"
        rules={{
          validate: (v) => {
            const n = Number(v)
            if (!Number.isInteger(n) || n < 0 || n > 10) return 'Целое число от 0 до 10'
            return true
          },
        }}
        render={({ field, fieldState }) => (
          <TextField
            label="Количество"
            fullWidth
            {...field}
            inputMode="numeric"
            onChange={(e) => {
              const v = e.target.value.replace(/[^0-9]/g, '')
              field.onChange(v)
            }}
            helperText={fieldState.error?.message ?? '0 = нет в наличии'}
            error={!!fieldState.error}
          />
        )}
      />
      <Controller
        control={form.control}
        name="priceRub"
        rules={{
          required: 'Укажите цену',
          validate: (v) => {
            const n = Number(v.replace(',', '.'))
            if (!Number.isFinite(n) || n <= 0) return 'Цена должна быть больше 0'
            if (n > 10_000) return 'Цена не может превышать 10 000 ₽'
            if (!Number.isInteger(Math.round(n * 100))) return 'Не более 2 знаков после запятой'
            return true
          },
        }}
        render={({ field, fieldState }) => (
          <TextField
            label="Цена, ₽"
            fullWidth
            {...field}
            inputMode="decimal"
            onChange={(e) => {
              const v = e.target.value.replace(/[^0-9.,]/g, '')
              field.onChange(v)
            }}
            helperText={fieldState.error?.message}
            error={!!fieldState.error}
          />
        )}
      />
      <Box>
        <Typography variant="subtitle2" sx={{ mb: 0.5 }}>
          Фото (из галереи)
        </Typography>
        <FormHelperText sx={{ mt: 0, mb: 1 }}>
          Выберите обработанные изображения из галереи. Крестик на превью убирает фото только из карточки; файл остаётся
          на сервере и в галерее.
        </FormHelperText>
        <Box
          sx={{
            display: 'flex',
            gap: 2,
            alignItems: { sm: 'center' },
            flexDirection: { xs: 'column', sm: 'row' },
            flexWrap: 'wrap',
          }}
        >
          <Button variant="outlined" onClick={onPickFromGallery}>
            Из галереи
          </Button>
        </Box>

        {form.watch('imageUrls').length > 0 && (
          <Box sx={{ mt: 2, display: 'flex', gap: 1, flexWrap: 'wrap' }}>
            {form.watch('imageUrls').map((url) => (
              <Box
                key={url}
                sx={{
                  width: 92,
                  height: 92,
                  borderRadius: 1,
                  border: 1,
                  borderColor: 'divider',
                  overflow: 'hidden',
                  position: 'relative',
                }}
                title={url}
              >
                <OptimizedImage
                  src={url}
                  alt="Фото товара"
                  widths={[320, 640]}
                  sizes="80px"
                  sx={{ width: '100%', height: '100%', objectFit: 'cover' }}
                />
                <Button
                  size="small"
                  color="error"
                  variant="contained"
                  onClick={() => onRemoveImage(url)}
                  aria-label="Убрать из карточки"
                  title="Убрать из карточки"
                  sx={{
                    position: 'absolute',
                    top: 4,
                    right: 4,
                    minWidth: 0,
                    px: 0.75,
                    py: 0,
                    lineHeight: 1.2,
                  }}
                >
                  ×
                </Button>
              </Box>
            ))}
          </Box>
        )}
      </Box>
      <Controller
        control={form.control}
        name="categoryId"
        render={({ field }) => (
          <FormControl fullWidth error={!field.value}>
            <InputLabel id="cat-label">Категория</InputLabel>
            <Select labelId="cat-label" label="Категория" {...field}>
              {categories.map((c: Category) => (
                <MenuItem key={c.id} value={c.id}>
                  {c.name}
                </MenuItem>
              ))}
            </Select>
            {!field.value && <FormHelperText>Выберите категорию</FormHelperText>}
          </FormControl>
        )}
      />
      <Controller
        control={form.control}
        name="published"
        render={({ field }) => (
          <FormControlLabel
            control={<Switch checked={field.value} onChange={(_, v) => field.onChange(v)} />}
            label="Показывать в каталоге"
          />
        )}
      />
    </Stack>
  )
}
