import { useMutation, useInfiniteQuery, useQuery, useQueryClient } from '@tanstack/react-query'
import { Link } from 'react-router-dom'
import { getFeed, getSyncStatus, listCategories, logout, syncVideos } from '../api/client'
import CategoryNav, { type CategoryFilter } from '../components/CategoryNav'
import VideoCard from '../components/VideoCard'
import { useState } from 'react'

function Feed() {
  const [filter, setFilter] = useState<CategoryFilter>('all')
  const queryClient = useQueryClient()

  const categoriesQuery = useQuery({ queryKey: ['categories'], queryFn: listCategories })
  const categories = categoriesQuery.data ?? []

  const feedQuery = useInfiniteQuery({
    queryKey: ['feed', filter],
    queryFn: ({ pageParam }) =>
      getFeed({
        categoryId: typeof filter === 'number' ? filter : undefined,
        uncategorized: filter === 'uncategorized',
        cursor: pageParam,
      }),
    initialPageParam: undefined as string | undefined,
    getNextPageParam: (lastPage) => lastPage.next_cursor ?? undefined,
  })

  const syncStatusQuery = useQuery({
    queryKey: ['sync-status'],
    queryFn: getSyncStatus,
    refetchInterval: (query) => (query.state.data?.videos.running ? 1500 : false),
  })

  const syncMutation = useMutation({
    mutationFn: syncVideos,
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['feed'] })
      queryClient.invalidateQueries({ queryKey: ['sync-status'] })
    },
  })

  const logoutMutation = useMutation({
    mutationFn: logout,
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['auth-status'] })
    },
  })

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

  return (
    <div className="feed-screen">
      <header>
        <h1>Лента</h1>
        <div className="actions">
          <Link to="/saved">Сохранённые</Link>
          <Link to="/channels">Каналы</Link>
          <Link to="/categories">Категории</Link>
          <button onClick={() => syncMutation.mutate()} disabled={running}>
            {running ? 'Синхронизация...' : 'Обновить сейчас'}
          </button>
          <button onClick={() => logoutMutation.mutate()}>Выйти</button>
        </div>
      </header>

      {syncMutation.isError && <p className="error">{(syncMutation.error as Error).message}</p>}
      {syncStatusQuery.data?.videos.status === 'failed' && (
        <p className="error">Последняя синхронизация видео завершилась ошибкой: {syncStatusQuery.data.videos.error}</p>
      )}

      <div className="layout">
        <CategoryNav categories={categories} value={filter} onChange={setFilter} />

        <div className="content">
          {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>
      </div>
    </div>
  )
}

export default Feed