import { createFileRoute } from "@tanstack/react-router";
import { Search } from "lucide-react";
import { useEffect, useState } from "react";
import { BaseballCard } from "@/components/cards/baseball-card";
import { AppShell } from "@/components/layout/app-shell";
import { Input } from "@/components/ui/input";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Skeleton } from "@/components/ui/skeleton";
import { listMarketplace } from "@/lib/server/api";
import type { CardItem } from "@/lib/types";
import { RARITIES, TEAMS } from "@/lib/types";

export const Route = createFileRoute("/marketplace")({
  component: MarketplacePage,
});

function MarketplacePage() {
  const [cards, setCards] = useState<CardItem[] | null>(null);
  const [q, setQ] = useState("");
  const [rarity, setRarity] = useState("all");
  const [team, setTeam] = useState("all");

  useEffect(() => {
    let cancelled = false;
    const t = window.setTimeout(() => {
      void listMarketplace({ data: { q, rarity, team } })
        .then((c) => {
          if (!cancelled) setCards(c);
        })
        .catch(() => {
          if (!cancelled) setCards([]);
        });
    }, 200);
    return () => {
      cancelled = true;
      window.clearTimeout(t);
    };
  }, [q, rarity, team]);

  return (
    <AppShell>
      <div className="space-y-5">
        <div>
          <h1 className="font-display text-4xl tracking-wide">Marketplace</h1>
          <p className="text-sm text-muted">Cards open for trade across Dugout.</p>
        </div>

        <div className="flex flex-col gap-3 sm:flex-row">
          <div className="relative flex-1">
            <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-subtle" />
            <Input
              className="pl-9"
              placeholder="Search player, team, or handle…"
              value={q}
              onChange={(e) => setQ(e.target.value)}
            />
          </div>
          <Select value={rarity} onValueChange={setRarity}>
            <SelectTrigger className="w-full sm:w-[140px]">
              <SelectValue placeholder="Rarity" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">All rarities</SelectItem>
              {RARITIES.map((r) => (
                <SelectItem key={r} value={r} className="capitalize">
                  {r}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
          <Select value={team} onValueChange={setTeam}>
            <SelectTrigger className="w-full sm:w-[160px]">
              <SelectValue placeholder="Team" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">All teams</SelectItem>
              {TEAMS.map((t) => (
                <SelectItem key={t} value={t}>
                  {t}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
        </div>

        {cards === null ? (
          <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 md:grid-cols-4">
            {Array.from({ length: 8 }).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">
            <p className="font-medium">No cards listed</p>
            <p className="text-sm text-muted mt-1">
              When collectors open cards for trade, they show up here.
            </p>
          </div>
        ) : (
          <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 md:grid-cols-4 justify-items-center">
            {cards.map((c) => (
              <BaseballCard key={c.id} card={c} size="sm" className="w-full max-w-none" />
            ))}
          </div>
        )}
      </div>
    </AppShell>
  );
}