import { getLibrary } from '@/lib/libraries'
import { notFound, redirect } from 'next/navigation'
import { getServerSession } from '@/lib/auth'
import { getPermittedLibraryIds } from '@/lib/users'
import GamesView from '@/components/games/GamesView'
import MixedView from '@/components/mixed/MixedView'
import MoviesView from '@/components/movies/MoviesView'
import TvView from '@/components/tv/TvView'
import ScanLibraryButton from '@/components/ScanLibraryButton'

interface Props {
  params: Promise<{ id: string }>
  searchParams: Promise<{ path?: string }>
}

export default async function LibraryPage({ params, searchParams }: Props) {
  const { id } = await params
  const { path: subpath } = await searchParams

  const session = await getServerSession()
  if (!session.userId) redirect('/login')

  const library = getLibrary(id)
  if (!library) notFound()

  if (session.role !== 'admin') {
    const permitted = getPermittedLibraryIds(session.userId)
    if (!permitted.includes(id)) notFound()
  }

  return (
    <div>
      <div className="flex items-center gap-2 mb-6">
        <a href="/" className="text-sm transition-colors" style={{ color: 'var(--text-secondary)' }}>
          Libraries
        </a>
        <span style={{ color: 'var(--text-secondary)' }}>/</span>
        <span className="text-sm font-medium" style={{ color: 'var(--text-primary)' }}>
          {library.name}
        </span>
        {session.role === 'admin' && (
          <div className="ml-auto">
            <ScanLibraryButton libraryId={id} />
          </div>
        )}
      </div>

      {library.type === 'games' && <GamesView libraryId={id} />}
      {library.type === 'mixed' && <MixedView libraryId={id} initialPath={subpath ?? ''} />}
      {library.type === 'movies' && <MoviesView libraryId={id} />}
      {library.type === 'tv' && <TvView libraryId={id} />}
    </div>
  )
}