"use client";

import { motion } from "framer-motion";

import { Eye } from "lucide-react";

import { WatchlistForm } from "@/components/watchlist/WatchlistForm";

import { WatchlistItem } from "@/components/watchlist/WatchlistItem";

import { EmptyState } from "@/components/shared/EmptyState";

import { Skeleton } from "@/components/ui/skeleton";

import { useWatchlist } from "@/hooks/useWatchlist";

import { staggerContainer } from "@/lib/motion";

export default function WatchlistPage() {

  const { data, isLoading } = useWatchlist();

  return (

    <div className="mx-auto max-w-3xl space-y-5">

      <div>

        <h2 className="text-lg font-semibold tracking-[var(--tracking-tight)]">Watchlist</h2>

        <p className="mt-0.5 text-sm text-[var(--color-fg-tertiary)]">

          Add the artists, teams, and events you care about. We alert the instant any of them drops.

        </p>

      </div>

      <WatchlistForm />

      {isLoading ? (

        <div className="space-y-2.5">

          {Array.from({ length: 3 }).map((_, i) => (

            <Skeleton key={i} className="h-[64px] rounded-[var(--radius)]" />

          ))}

        </div>

      ) : !data || data.length === 0 ? (

        <EmptyState

          icon={Eye}

          title="Nothing tracked yet"

          description="Add your first watch above - try “Taylor Swift” - and DropHawk starts listening across every connected source."

        />

      ) : (

        <motion.ul variants={staggerContainer} initial="initial" animate="animate" className="space-y-2.5">

          {data.map((rule) => (

            <WatchlistItem key={rule.id} rule={rule} />

          ))}

        </motion.ul>

      )}

    </div>

  );

}