import { useActionQuery } from "@agent-native/core/client/hooks";
import { IconHeart } from "@tabler/icons-react";

import { QuoteCard } from "@/components/quotes/QuoteCard";
import { Skeleton } from "@/components/ui/skeleton";
import { useVisitorId } from "@/lib/visitor-id";

export function meta() {
  return [{ title: "Favorites — Verse" }];
}

export function HydrateFallback() {
  return (
    <div className="flex items-center justify-center h-screen">
      <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-foreground" />
    </div>
  );
}

export default function FavoritesRoute() {
  const visitorId = useVisitorId();
  const { data: quotes, isLoading } = useActionQuery(
    "list-favorites",
    { visitorId },
    { enabled: Boolean(visitorId) },
  );

  return (
    <div className="mx-auto flex max-w-4xl flex-col gap-6 p-4 sm:p-6">
      <div className="flex flex-col gap-1">
        <h1 className="text-2xl font-semibold tracking-tight">Favorites</h1>
        <p className="text-sm text-muted-foreground">
          Quotes you've saved on this device.
        </p>
      </div>

      {isLoading ? (
        <div className="grid gap-4 sm:grid-cols-2">
          {Array.from({ length: 2 }).map((_, i) => (
            <Skeleton key={i} className="h-48 w-full" />
          ))}
        </div>
      ) : !quotes || quotes.length === 0 ? (
        <div className="flex flex-col items-center gap-3 py-16 text-center text-muted-foreground">
          <IconHeart className="size-8" />
          <p className="text-sm">
            No favorites yet — tap the heart on any quote to save it here.
          </p>
        </div>
      ) : (
        <div className="grid gap-4 sm:grid-cols-2">
          {quotes.map((quote) => (
            <QuoteCard key={quote.id} quote={quote} />
          ))}
        </div>
      )}
    </div>
  );
}