import {
  Hand,
  LogOut,
  Maximize,
  MessageSquare,
  Mic,
  MicOff,
  Minimize,
  PictureInPicture2,
  ScreenShare,
  ScreenShareOff,
  Settings,
  Video,
  VideoOff,
} from 'lucide-react'
import { Track, type ScreenShareCaptureOptions } from 'livekit-client'
import { DisconnectButton, useLocalParticipant, useTrackToggle } from '@livekit/components-react'
import { useToast } from '@/components/ui/ToastProvider'
import { useIsCompactViewport } from '@/hooks/useIsCompactViewport'
import type { HandQueueEntry } from '@/hooks/useChat'
import { StageViewMenu, type StageViewProps } from '@/components/room/StageViewOptions'
import { HandQueueMenu } from '@/components/room/HandQueueMenu'

/**
 * Опции захвата демонстрации экрана: `audio: true` — звук
 * вкладки/экрана там, где браузер его отдаёт (Chrome/Edge — вкладка почти
 * всегда, целый экран — только Windows); `selfBrowserSurface: 'exclude'`
 * — не предлагать в списке
 * источников собственную вкладку (зеркальный туннель самой конференции);
 * `surfaceSwitching: 'include'` — разрешить переключать источник прямо во
 * время демонстрации, не останавливая её; `systemAudio: 'include'` — не
 * запрещать захват системного звука при выборе «весь экран». Вынесено в
 * модульную константу — `useTrackToggle` держит `JSON.stringify(captureOptions)`
 * в зависимостях внутреннего `useMemo`, инлайновый литерал был бы безвреден,
 * но константа явнее фиксирует неизменность опций.
 */
const SCREEN_SHARE_CAPTURE_OPTIONS: ScreenShareCaptureOptions = {
  audio: true,
  selfBrowserSurface: 'exclude',
  surfaceSwitching: 'include',
  systemAudio: 'include',
}

interface RoomToolbarProps extends StageViewProps {
  /** Показывать ли кнопку чата — `JoinOut.chat_enabled` И чат не помечен недоступным (close-код 4404). */
  chatVisible: boolean
  chatOpen: boolean
  /** Число непрочитанных сообщений, накопленных со времени последнего открытия панели. */
  chatUnreadCount: number
  onToggleChat: () => void
  /** Открыть диалог настроек устройств. */
  onToggleSettings: () => void
  /** `document.fullscreenEnabled` — false скрывает кнопку. */
  fullscreenSupported: boolean
  fullscreenActive: boolean
  onToggleFullscreen: () => void
  /** Доступен ли мини-плеер хоть в каком-то виде (Document PiP либо video-фолбэк) — false в Firefox скрывает кнопку. */
  pipSupported: boolean
  pipActive: boolean
  onTogglePiP: () => void
  /**
   * Очередь поднятых рук целиком (задача B1, `useChat().handQueue`) — сама
   * решает, поднята ли СВОЯ рука (сравнивая с `localParticipant.identity`
   * через `useLocalParticipant`), и показывает бейдж общего счётчика.
   */
  handQueue: HandQueueEntry[]
  onRaiseHand: () => void
  onLowerHand: () => void
  /** Опустить ЧУЖУЮ руку по identity — только организатору (панель очереди, `HandQueueMenu`). */
  onLowerHandById: (identity: string) => void
}

/**
 * Нижний тулбар комнаты: микрофон/камера/демонстрация экрана/рука/очередь
 * рук/вид сцены/настройки устройств/полноэкранный режим/мини-плеер/чат/выход —
 * собственные кнопки на хуках LiveKit (useTrackToggle/DisconnectButton) и
 * панели чата, стилизованные по design/mockups/room.html.
 *
 * Кнопка «Вид» (режимы показа и скрытие остальных) рендерится ТОЛЬКО на
 * широком экране — условным рендерингом, а не скрытием через CSS: тулбар на
 * мобильном и так ужат до пяти «безусловных» кнопок (демонстрация/
 * полноэкранный режим/мини-плеер скрыты на узком экране через CSS, см.
 * `styles/room.css`), а те же настройки там доступны секцией «Вид» в шторке
 * настроек (`DeviceSettingsDialog`). «Рука» — сознательное исключение из этой
 * экономии: поднять руку посреди разговора — действие со временем жизни в
 * секунды, прятать его в шторку настроек означало бы делать его практически
 * недоступным с телефона. «Очередь» показывается только организатору —
 * встречается редко, но по той же причине оставлена в тулбаре, а не в
 * шторке: организатору с телефона тоже нужно видеть очередь сразу.
 */
export function RoomToolbar({
  chatVisible,
  chatOpen,
  chatUnreadCount,
  onToggleChat,
  onToggleSettings,
  fullscreenSupported,
  fullscreenActive,
  onToggleFullscreen,
  pipSupported,
  pipActive,
  onTogglePiP,
  handQueue,
  onRaiseHand,
  onLowerHand,
  onLowerHandById,
  layoutMode,
  onLayoutModeChange,
  hideOthers,
  onHideOthersChange,
}: RoomToolbarProps) {
  const toast = useToast()
  const isCompact = useIsCompactViewport()
  const { localParticipant } = useLocalParticipant()
  const handRaised = handQueue.some((entry) => entry.identity === localParticipant.identity)
  const mic = useTrackToggle({ source: Track.Source.Microphone })
  const camera = useTrackToggle({ source: Track.Source.Camera })
  const screenShare = useTrackToggle({
    source: Track.Source.ScreenShare,
    captureOptions: SCREEN_SHARE_CAPTURE_OPTIONS,
    // Отмена браузерного диалога выбора экрана/окна (пользователь нажал
    // «Отмена») приходит сюда как NotAllowedError — молча игнорируем, это не
    // ошибка приложения. Прочие сбои (например, `NotReadableError` при
    // занятом источнике) показываем тостом.
    onDeviceError: (error) => {
      if (error.name === 'NotAllowedError') return
      toast.show('Не удалось начать демонстрацию экрана', 'error')
    },
  })

  return (
    <footer className="room-toolbar">
      <button
        type="button"
        {...mic.buttonProps}
        className={`tb-btn${mic.enabled ? '' : ' is-off'}`}
        aria-label={mic.enabled ? 'Выключить микрофон' : 'Включить микрофон'}
      >
        <span className="icon-shell">
          {mic.enabled ? (
            <Mic className="lucide" aria-hidden="true" />
          ) : (
            <MicOff className="lucide" aria-hidden="true" />
          )}
        </span>
        <span className="label">Микрофон</span>
      </button>

      <button
        type="button"
        {...camera.buttonProps}
        className={`tb-btn${camera.enabled ? '' : ' is-off'}`}
        aria-label={camera.enabled ? 'Выключить камеру' : 'Включить камеру'}
      >
        <span className="icon-shell">
          {camera.enabled ? (
            <Video className="lucide" aria-hidden="true" />
          ) : (
            <VideoOff className="lucide" aria-hidden="true" />
          )}
        </span>
        <span className="label">Камера</span>
      </button>

      <button
        type="button"
        {...screenShare.buttonProps}
        className={`tb-btn tb-btn--screenshare${screenShare.enabled ? ' is-sharing' : ''}`}
        aria-label={screenShare.enabled ? 'Остановить демонстрацию экрана' : 'Демонстрировать экран'}
      >
        <span className="icon-shell">
          {screenShare.enabled ? (
            <ScreenShareOff className="lucide" aria-hidden="true" />
          ) : (
            <ScreenShare className="lucide" aria-hidden="true" />
          )}
        </span>
        <span className="label">Демонстрация</span>
      </button>

      <button
        type="button"
        className={`tb-btn${handRaised ? ' is-hand-raised' : ''}`}
        aria-pressed={handRaised}
        aria-label={handRaised ? 'Опустить руку' : 'Поднять руку'}
        onClick={() => (handRaised ? onLowerHand() : onRaiseHand())}
      >
        <span className="icon-shell">
          <Hand className="lucide" aria-hidden="true" />
          {handQueue.length > 0 && (
            <span className="badge-count">{handQueue.length > 9 ? '9+' : handQueue.length}</span>
          )}
        </span>
        <span className="label">Рука</span>
      </button>

      <HandQueueMenu queue={handQueue} onLower={onLowerHandById} />

      {!isCompact && (
        <StageViewMenu
          layoutMode={layoutMode}
          onLayoutModeChange={onLayoutModeChange}
          hideOthers={hideOthers}
          onHideOthersChange={onHideOthersChange}
        />
      )}

      <button
        type="button"
        className="tb-btn"
        aria-label="Настройки устройств"
        onClick={onToggleSettings}
      >
        <span className="icon-shell">
          <Settings className="lucide" aria-hidden="true" />
        </span>
        <span className="label">Устройства</span>
      </button>

      {fullscreenSupported && (
        <button
          type="button"
          className={`tb-btn tb-btn--fullscreen${fullscreenActive ? ' is-panel-open' : ''}`}
          aria-label={fullscreenActive ? 'Выйти из полноэкранного режима' : 'Развернуть на весь экран'}
          aria-pressed={fullscreenActive}
          onClick={onToggleFullscreen}
        >
          <span className="icon-shell">
            {fullscreenActive ? (
              <Minimize className="lucide" aria-hidden="true" />
            ) : (
              <Maximize className="lucide" aria-hidden="true" />
            )}
          </span>
          <span className="label">Экран</span>
        </button>
      )}

      {pipSupported && (
        <button
          type="button"
          className={`tb-btn tb-btn--pip${pipActive ? ' is-panel-open' : ''}`}
          aria-label={pipActive ? 'Свернуть мини-окно' : 'Открыть мини-окно'}
          aria-pressed={pipActive}
          onClick={onTogglePiP}
        >
          <span className="icon-shell">
            <PictureInPicture2 className="lucide" aria-hidden="true" />
          </span>
          {/* На узком экране («Мини-окно» иначе переносится на 2 строки и
              кнопка становится выше соседних, см. .label-full/.label-short
              в room.css) — только «Мини». Текст, не структура: aria-label
              выше уже несёт полный смысл независимо от видимой подписи. */}
          <span className="label">
            <span className="label-full">Мини-окно</span>
            <span className="label-short">Мини</span>
          </span>
        </button>
      )}

      {chatVisible && (
        <button
          type="button"
          className={`tb-btn${chatOpen ? ' is-panel-open' : ''}`}
          aria-label={chatOpen ? 'Свернуть чат' : 'Открыть чат'}
          aria-pressed={chatOpen}
          onClick={onToggleChat}
        >
          <span className="icon-shell">
            <MessageSquare className="lucide" aria-hidden="true" />
            {chatUnreadCount > 0 && (
              <span className="badge-count">{chatUnreadCount > 9 ? '9+' : chatUnreadCount}</span>
            )}
          </span>
          <span className="label">Чат</span>
        </button>
      )}

      <DisconnectButton className="tb-btn danger" aria-label="Выйти из конференции">
        <span className="icon-shell">
          <LogOut className="lucide" aria-hidden="true" />
        </span>
        <span className="label">Выйти</span>
      </DisconnectButton>
    </footer>
  )
}
