import { useQuery } from '@tanstack/react-query'
import { Link, useParams } from 'react-router-dom'
import { getVideo } from '../api/client'
import { formatDuration, formatRelativeTime } from '../utils/format'
import DownloadButton from '../components/DownloadButton'
import Player from '../components/Player'

function VideoPage() {
  const { youtubeVideoId } = useParams<{ youtubeVideoId: string }>()

  const videoQuery = useQuery({
    queryKey: ['video', youtubeVideoId],
    queryFn: () => getVideo(youtubeVideoId!),
    enabled: !!youtubeVideoId,
  })

  if (videoQuery.isLoading) {
    return (
      <div className="video-page">
        <p>Загрузка...</p>
      </div>
    )
  }

  if (videoQuery.isError || !videoQuery.data) {
    return (
      <div className="video-page">
        <Link to="/" className="back-link">
          ← Лента
        </Link>
        <p className="error">Видео не найдено</p>
      </div>
    )
  }

  const video = videoQuery.data
  const duration = formatDuration(video.duration_seconds)

  return (
    <div className="video-page">
      <Link to="/" className="back-link">
        ← Лента
      </Link>

      <Player video={video} />

      <h1 className="video-page-title">{video.title}</h1>

      <div className="video-page-meta">
        <Link to={`/channels/${video.channel.id}/videos`}>{video.channel.title}</Link>
        {' · '}
        {formatRelativeTime(video.published_at)}
        {duration && ` · ${duration}`}
        {' · '}
        <DownloadButton video={video} />
      </div>

      {video.categories.length > 0 && (
        <div className="video-page-categories">
          {video.categories.map((c) => (
            <span key={c.id} className="chip">
              {c.name}
            </span>
          ))}
        </div>
      )}

      {video.description && <p className="video-page-description">{video.description}</p>}
    </div>
  )
}

export default VideoPage