import { createFileRoute, Link } from "@tanstack/react-router";
import { useEffect, useState } from "react";
import { toast } from "sonner";
import { BaseballCard } from "@/components/cards/baseball-card";
import { AppShell } from "@/components/layout/app-shell";
import { Button } from "@/components/ui/button";
import { Skeleton } from "@/components/ui/skeleton";
import { RedirectToSignIn } from "@/lib/auth/gates";
import { useCurrentUserState } from "@/lib/auth/use-current-user";
import { listMyCards, toggleCardTrade } from "@/lib/server/api";
import type { CardItem } from "@/lib/types";

export const Route = createFileRoute("/collection")({
  component: CollectionPage,
});

function CollectionPage() {
  const { user, isPending } = useCurrentUserState();
  const [cards, setCards] = useState<CardItem[] | null>(null);

  useEffect(() => {
    if (!user) return;
    let cancelled = false;
    void listMyCards()
      .then((c) => {
        if (!cancelled) setCards(c);
      })
      .catch(() => {
        if (!cancelled) setCards([]);
      });
    return () => {
      cancelled = true;
    };
  }, [user?.id]);

  if (isPending) {
    return (
      <AppShell>
        <Skeleton className="h-40 w-full" />
      </AppShell>
    );
  }
  if (!user) return <RedirectToSignIn />;

  async function flipTrade(card: CardItem) {
    try {
      const updated = await toggleCardTrade({
        data: { cardId: card.id, forTrade: !card.forTrade },
      });
      setCards((prev) => prev?.map((c) => (c.id === card.id ? updated : c)) ?? null);
      toast.success(updated.forTrade ? "Listed for trade" : "Removed from marketplace");
    } catch (err) {
      toast.error(err instanceof Error ? err.message : "Update failed");
    }
  }

  return (
    <AppShell>
      <div className="space-y-5">
        <div className="flex flex-wrap items-end justify-between gap-3">
          <div>
            <h1 className="font-display text-4xl tracking-wide">My collection</h1>
            <p className="text-sm text-muted">
              {cards ? `${cards.length} card${cards.length === 1 ? "" : "s"}` : "Loading…"}
            </p>
          </div>
          <Button asChild>
            <Link to="/create">Mint new card</Link>
          </Button>
        </div>

        {cards === null ? (
          <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 md:grid-cols-4">
            {Array.from({ length: 4 }).map((_, i) => (
              <Skeleton key={i} className="aspect-[3/5] w-full" />
            ))}
          </div>
        ) : cards.length === 0 ? (
          <div className="rounded-[var(--radius-xl)] border border-border bg-surface p-10 text-center space-y-3">
            <p className="font-medium">No cards yet</p>
            <p className="text-sm text-muted">Your starter pack unlocks after first sign-in.</p>
            <Button asChild>
              <Link to="/create">Mint a card</Link>
            </Button>
          </div>
        ) : (
          <div className="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4">
            {cards.map((c) => (
              <div key={c.id} className="space-y-2">
                <BaseballCard card={c} size="sm" className="w-full max-w-none" showOwner={false} />
                <Button
                  variant="secondary"
                  size="sm"
                  className="w-full"
                  onClick={() => void flipTrade(c)}
                >
                  {c.forTrade ? "Unlist trade" : "List for trade"}
                </Button>
              </div>
            ))}
          </div>
        )}
      </div>
    </AppShell>
  );
}