import { createFileRoute } from "@tanstack/react-router";
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { PageHeader } from "@/components/common/PageHeader";
import { rankings } from "@/features/_mock/data";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { ArrowUp, ArrowDown, Minus } from "lucide-react";
import { usePagination, Pager } from "@/components/common/DataPager";

export const Route = createFileRoute("/_public/rankings/")({
  head: () => ({ meta: [{ title: "Rankings — Purple Zone" }, { name: "description", content: "Global, seasonal and weekly CS2 leaderboards." }] }),
  component: RankingsPage,
});

function RankingsPage() {
  const { paged, page, setPage, totalPages, total } = usePagination(rankings, 20);
  return (
    <div className="mx-auto max-w-[1400px] px-4 py-6">
      <PageHeader title="Rankings" description="Where the community stacks up." />
      <Tabs defaultValue="global" className="mb-4">
        <TabsList>
          <TabsTrigger value="global">Global</TabsTrigger>
          <TabsTrigger value="season">Season</TabsTrigger>
          <TabsTrigger value="month">Month</TabsTrigger>
          <TabsTrigger value="week">Week</TabsTrigger>
          <TabsTrigger value="weapon">Weapon</TabsTrigger>
        </TabsList>
      </Tabs>
      <div className="overflow-hidden rounded-xl border border-border bg-card">
        <table className="w-full text-sm">
          <thead className="bg-surface text-left text-xs uppercase tracking-wider text-muted-foreground">
            <tr>
              <th className="px-3 py-2.5 font-medium">#</th>
              <th className="px-3 py-2.5 font-medium">Player</th>
              <th className="px-3 py-2.5 font-medium">Rating</th>
              <th className="px-3 py-2.5 font-medium">Points</th>
              <th className="px-3 py-2.5 font-medium">K/D</th>
              <th className="px-3 py-2.5 font-medium">HS%</th>
              <th className="px-3 py-2.5 font-medium">Wins</th>
              <th className="px-3 py-2.5 font-medium">Playtime</th>
            </tr>
          </thead>
          <tbody className="divide-y divide-border/40">
            {paged.map((r) => {
              const trend = r.change > 0 ? ArrowUp : r.change < 0 ? ArrowDown : Minus;
              const Icon = trend;
              const trendColor = r.change > 0 ? "text-success" : r.change < 0 ? "text-destructive" : "text-muted-foreground";
              return (
                <tr key={r.player.id} className="transition-colors hover:bg-accent/40">
                  <td className="px-3 py-2.5"><div className="flex items-center gap-1.5 font-mono"><span>{r.position}</span><Icon className={`h-3 w-3 ${trendColor}`} /></div></td>
                  <td className="px-3 py-2.5"><div className="flex items-center gap-2"><Avatar className="h-6 w-6"><AvatarImage src={r.player.avatar} /><AvatarFallback>{r.player.name[0]}</AvatarFallback></Avatar><span>{r.player.name}</span></div></td>
                  <td className="px-3 py-2.5 font-mono font-semibold text-secondary">{r.rating.toFixed(2)}</td>
                  <td className="px-3 py-2.5 font-mono">{r.points}</td>
                  <td className="px-3 py-2.5 font-mono">{r.player.kd}</td>
                  <td className="px-3 py-2.5">{r.player.headshotPct}%</td>
                  <td className="px-3 py-2.5">{r.player.wins}</td>
                  <td className="px-3 py-2.5 text-muted-foreground">{r.player.playtimeHours}h</td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
      <Pager page={page} totalPages={totalPages} onChange={setPage} total={total} />
    </div>
  );
}