import { useQuery } from "@tanstack/react-query";
import { continueWatching } from "../api";
import VideoCard from "../components/VideoCard";

export default function ContinueWatchingPage() {
  const { data: videos = [], isLoading } = useQuery({
    queryKey: ["continue-watching"],
    queryFn: () => continueWatching().then((r) => r.data),
    staleTime: 30_000,
  });

  return (
    <div className="flex flex-col gap-6">
      <h1 className="font-display font-bold text-2xl text-zinc-100">Continue Watching</h1>

      {isLoading ? (
        <div className="flex items-center justify-center py-24">
          <div className="w-8 h-8 border-2 border-accent border-t-transparent rounded-full animate-spin" />
        </div>
      ) : videos.length === 0 ? (
        <div className="flex flex-col items-center gap-4 py-24 text-center">
          <div className="w-16 h-16 rounded-full bg-zinc-800 flex items-center justify-center">
            <svg className="w-7 h-7 text-zinc-600" fill="currentColor" viewBox="0 0 24 24">
              <path d="M8 5v14l11-7z" />
            </svg>
          </div>
          <div>
            <p className="text-zinc-300 font-medium">Nothing in progress</p>
            <p className="text-zinc-500 text-sm mt-1">
              Videos you've started but not finished will appear here.
            </p>
          </div>
        </div>
      ) : (
        <>
          <p className="text-sm text-zinc-500 -mt-2">{videos.length} video{videos.length !== 1 ? "s" : ""} in progress</p>
          <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4">
            {videos.map((v) => (
              <VideoCard
                key={v.youtube_video_id}
                video={{
                  ...v,
                  is_watched: false,
                }}
              />
            ))}
          </div>
        </>
      )}
    </div>
  );
}