import type { MouseEvent as ReactMouseEvent } from 'react'
import { Breadcrumbs } from './Breadcrumbs'
import { LibraryList } from './LibraryList'
import { QueueList, type QueueItem } from './QueueList'

export type Crumb = { label: string; action?: () => void }

export type LibraryListItem = {
  key: string
  className: string
  icon: string
  name: string
  detail?: string
  nameClassName?: string
  onClick: () => void
  button?: { title: string; onClick: (ev: ReactMouseEvent<HTMLButtonElement>) => void }
}

type MainPanelProps = {
  breadcrumbs: Crumb[]
  libraryLoading: boolean
  libraryError: string | null
  libraryItems: LibraryListItem[]
  queueItemsView: QueueItem[]
  queueOrderView: number[]
  queuePlayingOrigIdxView: number
  queueScrollSignal: number
  onQueuePlay: (origIdx: number) => void
  onQueueRemove: (origIdx: number) => void
  onQueueMove: (fromPos: number, toPos: number) => void
}

export function MainPanel({
  breadcrumbs,
  libraryLoading,
  libraryError,
  libraryItems,
  queueItemsView,
  queueOrderView,
  queuePlayingOrigIdxView,
  queueScrollSignal,
  onQueuePlay,
  onQueueRemove,
  onQueueMove,
}: MainPanelProps) {
  return (
    <div className="main">
      <div className="sidebar-overlay" id="sidebarOverlay" />
      <aside className="sidebar" id="sidebar">
        <div className="sidebar-header">Library</div>
        <Breadcrumbs items={breadcrumbs} />
        <div className="file-list" id="fileList">
          <LibraryList loading={libraryLoading} error={libraryError} items={libraryItems} />
        </div>
      </aside>

      <section className="queue-panel">
        <div className="queue-header">
          <span>Queue</span>
          <div className="queue-actions">
            <button className="queue-btn active" id="btnShuffle">
              Shuffle
            </button>
            <button className="queue-btn active" id="btnRepeat">
              Repeat
            </button>
            <button className="queue-btn" id="btnClearQueue">
              Clear
            </button>
          </div>
        </div>
        <div className="queue-list" id="queueList">
          <QueueList
            queue={queueItemsView}
            order={queueOrderView}
            playingOrigIdx={queuePlayingOrigIdxView}
            scrollSignal={queueScrollSignal}
            onPlay={onQueuePlay}
            onRemove={onQueueRemove}
            onMove={onQueueMove}
          />
        </div>
      </section>
    </div>
  )
}