import { Hand, X } from 'lucide-react'
import { useIsOrganizer } from '@/hooks/useIsOrganizer'
import type { HandQueueEntry } from '@/hooks/useChat'

interface HandQueuePanelProps {
  queue: HandQueueEntry[]
  onLower: (identity: string) => void
  onClose: () => void
}

/**
 * Панель очереди поднятых рук — видна только организатору (задача B1).
 * Визуально — тот же боковой контейнер, что и `ChatPanel` (`.chat-panel`,
 * включая мобильное поведение «во весь экран» на ≤900px), содержимое своё:
 * упорядоченный список с позицией и кнопкой «Опустить» на каждой строке —
 * организатору разрешено опускать чужую руку (решение оператора, задача B1).
 *
 * `RoomPage` гейтит рендер по `handQueueOpen` (как и `ChatPanel` по
 * `chatOpen`) — свой `useIsOrganizer()` здесь ДОПОЛНИТЕЛЬНАЯ, а не
 * единственная защита: `RoomToolbar` уже не показывает кнопку открытия
 * не-организатору, это подстраховка на случай прямого рендера.
 */
export function HandQueuePanel({ queue, onLower, onClose }: HandQueuePanelProps) {
  const isOrganizer = useIsOrganizer()
  if (!isOrganizer) return null

  return (
    <aside className="chat-panel hand-queue-panel">
      <div className="chat-head">
        <h2>Поднятые руки</h2>
        <button type="button" aria-label="Закрыть очередь" onClick={onClose}>
          <X className="lucide" aria-hidden="true" />
        </button>
      </div>

      {queue.length === 0 ? (
        <p className="chat-empty">Пока никто не поднял руку</p>
      ) : (
        <ol className="hand-queue-list">
          {queue.map((entry, index) => (
            <li className="hand-queue-item" key={entry.identity}>
              <span className="hand-queue-position">{index + 1}</span>
              <span className="hand-queue-name">
                <Hand className="lucide" aria-hidden="true" />
                {entry.name}
              </span>
              <button
                type="button"
                className="hand-queue-lower"
                onClick={() => onLower(entry.identity)}
              >
                Опустить
              </button>
            </li>
          ))}
        </ol>
      )}
    </aside>
  )
}