import { useInfiniteQuery, useQuery } from '@tanstack/react-query'
import { Link, useParams } from 'react-router-dom'
import { getChannel, getFeed } from '../api/client'
import VideoCard from '../components/VideoCard'

function ChannelVideos() {
  const { channelId } = useParams<{ channelId: string }>()
  const id = Number(channelId)

  const channelQuery = useQuery({ queryKey: ['channel', id], queryFn: () => getChannel(id) })

  const feedQuery = useInfiniteQuery({
    queryKey: ['feed', 'channel', id],
    queryFn: ({ pageParam }) => getFeed({ channelId: id, cursor: pageParam }),
    initialPageParam: undefined as string | undefined,
    getNextPageParam: (lastPage) => lastPage.next_cursor ?? undefined,
  })

  const items = feedQuery.data?.pages.flatMap((page) => page.items) ?? []

  return (
    <div className="feed-screen">
      <header>
        <div>
          <Link to="/channels" className="back-link">
            ← Каналы
          </Link>
          <h1>{channelQuery.data?.title ?? 'Канал'}</h1>
        </div>
      </header>

      {feedQuery.isLoading && <p>Загрузка...</p>}
      {feedQuery.isError && <p className="error">Не удалось загрузить видео</p>}

      <ul className="video-grid">
        {items.map((video) => (
          <VideoCard key={video.youtube_video_id} video={video} />
        ))}
      </ul>

      {!feedQuery.isLoading && items.length === 0 && <p>У этого канала пока нет синхронизированных видео.</p>}

      {feedQuery.hasNextPage && (
        <button
          className="load-more"
          onClick={() => feedQuery.fetchNextPage()}
          disabled={feedQuery.isFetchingNextPage}
        >
          {feedQuery.isFetchingNextPage ? 'Загрузка...' : 'Показать ещё'}
        </button>
      )}
    </div>
  )
}

export default ChannelVideos