import { Ban, Check, Loader2 } from 'lucide-react'
import type { MyBackground } from '@/api/users'
import { DEFAULT_BACKGROUNDS, NO_BACKGROUND, type BackgroundKey } from '@/lib/virtualBackground'
import '@/styles/virtual-background.css'

interface BackgroundPickerProps {
  value: BackgroundKey
  onChange: (key: BackgroundKey) => void
  /** Свои картинки пользователя; у гостя список всегда пуст — профиля у него нет. */
  customBackgrounds: MyBackground[]
  /** Идёт применение фона (первый раз — ещё и загрузка модели) — показать индикатор на выбранной плитке. */
  busy?: boolean
}

/**
 * Сетка выбора фона: «без фона», три дефолтные сцены и свои картинки.
 *
 * Один компонент на все три места, где выбирают фон (превью входа, комната,
 * профиль): плитки везде выглядят одинаково, а цвета берутся из токенов темы —
 * внутри комнаты (`[data-theme="room"]`) те же классы перекрашиваются в тёмную
 * палитру, см. `styles/virtual-background.css`.
 *
 * Кнопки — `aria-pressed`, а не радиогруппа: выбор применяется немедленно и
 * никуда не отправляется формой.
 */
export function BackgroundPicker({
  value,
  onChange,
  customBackgrounds,
  busy = false,
}: BackgroundPickerProps) {
  const renderTile = (key: BackgroundKey, label: string, url: string | null) => {
    const selected = value === key
    return (
      <button
        key={key}
        type="button"
        className={`bg-tile${selected ? ' is-selected' : ''}`}
        aria-pressed={selected}
        aria-label={label}
        title={label}
        onClick={() => onChange(key)}
      >
        {url ? (
          <img src={url} alt="" loading="lazy" />
        ) : (
          <span className="bg-tile-none">
            <Ban className="lucide" aria-hidden="true" />
          </span>
        )}
        {selected && (
          <span className="bg-tile-mark" aria-hidden="true">
            {busy ? (
              <Loader2 className="lucide bg-tile-spinner" />
            ) : (
              <Check className="lucide" />
            )}
          </span>
        )}
      </button>
    )
  }

  return (
    <div className="bg-grid">
      {renderTile(NO_BACKGROUND, 'Без фона', null)}
      {DEFAULT_BACKGROUNDS.map((item) => renderTile(`default:${item.id}`, item.label, item.url))}
      {customBackgrounds.map((item, index) =>
        renderTile(`custom:${item.id}`, `Своя картинка ${index + 1}`, item.url),
      )}
    </div>
  )
}