import { X } from 'lucide-react'
import type { MyBackground } from '@/api/users'
import { useModalDismiss } from '@/hooks/useModalDismiss'
import { BackgroundPicker } from '@/components/background/BackgroundPicker'
import type { BackgroundKey } from '@/lib/virtualBackground'
import type { VirtualBackgroundStatus } from '@/hooks/useVirtualBackground'

interface BackgroundDialogProps {
  onClose: () => void
  value: BackgroundKey
  onChange: (key: BackgroundKey) => void
  customBackgrounds: MyBackground[]
  status: VirtualBackgroundStatus
  /** Гость своих картинок иметь не может — ему показывается другая подсказка. */
  canManageOwn: boolean
}

/**
 * Модалка «Фон» в комнате — та же оболочка, что у `DeviceSettingsDialog`
 * (`.room-modal-*`), внутри общая сетка выбора (`BackgroundPicker`).
 *
 * Мобильного варианта-шторки здесь НЕТ намеренно: фича десктопная (см.
 * `lib/isDesktopDevice.ts`), и на телефоне ни кнопки, ни этой модалки не
 * существует вовсе.
 *
 * Свои картинки отсюда не загружаются — они живут в профиле («личный кабинет»
 * из задачи). В комнате их можно только выбрать: загрузка требует ухода со
 * страницы, а бросать конференцию ради этого не нужно.
 */
export function BackgroundDialog({
  onClose,
  value,
  onChange,
  customBackgrounds,
  status,
  canManageOwn,
}: BackgroundDialogProps) {
  useModalDismiss(onClose)

  return (
    <div
      className="room-modal-overlay"
      role="dialog"
      aria-modal="true"
      aria-labelledby="background-dialog-title"
      onClick={onClose}
    >
      <div className="room-modal-panel" onClick={(e) => e.stopPropagation()}>
        <div className="room-modal-head">
          <h2 id="background-dialog-title">Фон</h2>
          <button type="button" className="room-modal-close" aria-label="Закрыть" onClick={onClose}>
            <X className="lucide" style={{ width: 16, height: 16 }} aria-hidden="true" />
          </button>
        </div>

        <BackgroundPicker
          value={value}
          onChange={onChange}
          customBackgrounds={customBackgrounds}
          busy={status === 'loading'}
        />

        {status === 'error' ? (
          <p className="bg-hint">
            Не удалось применить фон — попробуйте выбрать другой или отключить фон.
          </p>
        ) : (
          <p className="bg-hint">
            {canManageOwn
              ? 'Свои картинки добавляются в профиле — их видно здесь сразу после загрузки.'
              : 'Свои картинки доступны зарегистрированным пользователям.'}
          </p>
        )}
      </div>
    </div>
  )
}
