"use client";

import { useState } from "react";
import Link from "next/link";
import { Crown, Trophy, EyeOff, Info } from "lucide-react";
import type { LeaderboardView, LeaderboardEntry } from "@spinza/shared";
import { formatMultiplier, formatSC } from "@spinza/shared";
import { useSession } from "@/lib/store";
import { useApi } from "@/lib/use-api";
import { cn, timeAgo } from "@/lib/utils";
import { Card, Empty, Skeleton, Tabs } from "@/components/ui";
import { AppShell } from "@/components/shell/app-shell";
import { ApiErrorState } from "@/components/shell/api-error";

const CATEGORIES = [
  { value: "biggest_win_today", label: "Biggest Win Today", short: "Today" },
  { value: "biggest_win_week", label: "Biggest Win This Week", short: "This Week" },
  { value: "biggest_multiplier", label: "Biggest Multiplier", short: "Multiplier" },
  { value: "most_spins", label: "Most Spins", short: "Spins" },
  { value: "highest_level", label: "Highest Level", short: "Level" },
] as const;
type Category = (typeof CATEGORIES)[number]["value"];

function formatValue(cat: Category, v: number): string {
  switch (cat) {
    case "biggest_multiplier":
      return formatMultiplier(v);
    case "most_spins":
      return `${Math.round(v).toLocaleString("en-US")} spins`;
    case "highest_level":
      return `Level ${Math.round(v)}`;
    default:
      return formatSC(v);
  }
}

function Avatar({ name, rank, size = "md" }: { name: string; rank: number; size?: "md" | "lg" }) {
  const ring = rank === 1 ? "ring-2 ring-accent shadow-glow" : rank === 2 ? "ring-2 ring-[#c7ccd8]" : rank === 3 ? "ring-2 ring-[#b87b4b]" : "ring-1 ring-line-2";
  return (
    <span className={cn("grid shrink-0 place-items-center rounded-full metal font-bold uppercase", ring, size === "lg" ? "h-16 w-16 text-xl" : "h-10 w-10 text-sm")} aria-hidden>
      {name.slice(0, 1)}
    </span>
  );
}

function Podium({ entries, cat }: { entries: LeaderboardEntry[]; cat: Category }) {
  const order = [entries[1], entries[0], entries[2]].filter(Boolean) as LeaderboardEntry[];
  if (!entries.length) return null;
  return (
    <div className="grid grid-cols-3 items-end gap-2 sm:gap-4">
      {order.map((e) => {
        const first = e.rank === 1;
        return (
          <div key={e.rank} className={cn("relative flex flex-col items-center rounded-lg border p-3 pt-6 text-center sm:p-4 sm:pt-8", first ? "surface-2 border-accent/40 bg-[radial-gradient(ellipse_at_top,rgba(201,169,97,0.18),transparent_60%)] min-h-[200px] sm:min-h-[230px]" : "surface min-h-[170px] sm:min-h-[190px]", e.isYou && "outline outline-2 outline-accent/60")}>
            {first ? <Crown className="absolute -top-3 h-6 w-6 text-accent drop-shadow-[0_0_8px_rgba(201,169,97,0.7)]" /> : null}
            <span className={cn("absolute left-2 top-2 grid h-6 w-6 place-items-center rounded-full text-[11px] font-bold", first ? "bg-accent text-bg" : "bg-surface-3 text-fg-2")}>{e.rank}</span>
            <Avatar name={e.username} rank={e.rank} size={first ? "lg" : "md"} />
            <div className="mt-3 w-full truncate text-[14px] font-semibold tracking-tight sm:text-[15px]">{e.isYou ? "You" : e.username}</div>
            <div className="text-[11px] text-fg-3">Level {e.level}</div>
            <div className={cn("mt-2 font-semibold tabular", first ? "text-credit text-base sm:text-lg" : "text-fg text-sm")}>{formatValue(cat, e.value)}</div>
            {e.game ? <div className="mt-0.5 truncate text-[11px] text-fg-4">{e.game}</div> : null}
          </div>
        );
      })}
    </div>
  );
}

export default function LeaderboardPage() {
  const [cat, setCat] = useState<Category>("biggest_win_today");
  const { data, error, loading, reload } = useApi<LeaderboardView>(`/api/leaderboards?category=${cat}`);
  const status = useSession((s) => s.status);
  const optIn = useSession((s) => s.settings?.leaderboardOptIn ?? true);
  const entries = data?.entries ?? [];
  const rest = entries.slice(3);

  return (
    <AppShell>
      <div className="mb-6 flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
        <div>
          <div className="eyebrow mb-1">Leaderboard</div>
          <h1 className="text-3xl font-semibold tracking-tight sm:text-4xl">{data?.label || CATEGORIES.find((c) => c.value === cat)?.label}</h1>
          <p className="mt-2 max-w-xl text-sm text-fg-3">Bragging rights only. All values are in fictional Spinza Credits or gameplay stats — nothing is ever paid out.</p>
        </div>
        <div className="-mx-4 overflow-x-auto px-4 scrollbar-none sm:mx-0 sm:px-0">
          <Tabs<Category> value={cat} onChange={setCat} items={CATEGORIES.map((c) => ({ value: c.value, label: c.short }))} />
        </div>
      </div>

      {status === "authenticated" && !optIn ? (
        <div className="mb-4 flex items-start gap-3 rounded-md border border-line-2 bg-surface-2 px-4 py-3 text-sm text-fg-2" role="status">
          <EyeOff className="mt-0.5 h-4 w-4 shrink-0 text-fg-3" />
          <p>
            You have opted out of leaderboards, so your results are hidden from other players.{" "}
            <Link href="/settings#leaderboard" className="font-medium text-accent-2 underline-offset-4 hover:underline">
              Change in settings
            </Link>
          </p>
        </div>
      ) : null}

      {error && !data ? (
        <ApiErrorState error={error} retry={reload} />
      ) : loading && !data ? (
        <div aria-busy>
          <div className="grid grid-cols-3 items-end gap-2 sm:gap-4">
            <Skeleton className="h-[170px] rounded-lg" />
            <Skeleton className="h-[200px] rounded-lg" />
            <Skeleton className="h-[170px] rounded-lg" />
          </div>
          <div className="mt-4 space-y-2">
            {Array.from({ length: 6 }).map((_, i) => (
              <Skeleton key={i} className="h-14 rounded-md" />
            ))}
          </div>
        </div>
      ) : !entries.length ? (
        <Empty title="No entries yet" description={cat.startsWith("biggest_win") ? "Nobody has landed a win in this period yet. Yours could be the first." : "This board fills up as players spin."} icon={<Trophy className="h-5 w-5" />} />
      ) : (
        <div className={cn("transition-opacity", loading && "opacity-60")}>
          <Podium entries={entries.slice(0, 3)} cat={cat} />
          {rest.length ? (
            <Card as="ol" className="mt-4 divide-y divide-line overflow-hidden">
              {rest.map((e) => (
                <li key={`${e.rank}-${e.username}`} className={cn("flex items-center gap-3 px-3 py-2.5 sm:px-4", e.isYou && "bg-accent-soft")}>
                  <span className="w-8 shrink-0 text-center text-sm font-semibold tabular text-fg-3">{e.rank}</span>
                  <Avatar name={e.username} rank={e.rank} />
                  <div className="min-w-0 flex-1">
                    <div className="truncate text-[15px] font-medium">{e.isYou ? `${e.username} (you)` : e.username}</div>
                    <div className="text-[12px] text-fg-3">
                      Level {e.level}
                      {e.game ? ` · ${e.game}` : ""}
                    </div>
                  </div>
                  <div className="shrink-0 text-right text-sm font-semibold tabular">{formatValue(cat, e.value)}</div>
                </li>
              ))}
            </Card>
          ) : null}

          {status === "authenticated" ? (
            data?.you && !entries.some((e) => e.isYou) ? (
              <Card className="mt-4 flex items-center gap-3 border-accent/40 px-3 py-3 sm:px-4">
                <span className="w-8 shrink-0 text-center text-sm font-semibold tabular text-accent-2">{data.you.rank}</span>
                <Avatar name={data.you.username} rank={data.you.rank} />
                <div className="min-w-0 flex-1">
                  <div className="truncate text-[15px] font-medium">{data.you.username} (you)</div>
                  <div className="text-[12px] text-fg-3">Level {data.you.level}</div>
                </div>
                <div className="shrink-0 text-right text-sm font-semibold tabular">{formatValue(cat, data.you.value)}</div>
              </Card>
            ) : !data?.you ? (
              <p className="mt-4 text-center text-[13px] text-fg-3">{optIn ? "You are not on this board yet. Play a few rounds to enter." : "Opt back in to appear on leaderboards."}</p>
            ) : null
          ) : (
            <p className="mt-4 text-center text-[13px] text-fg-3">
              <Link href="/login?next=%2Fleaderboard" className="font-medium text-accent-2 underline-offset-4 hover:underline">
                Sign in
              </Link>{" "}
              to see where you rank.
            </p>
          )}
          {data?.updatedAt ? <p className="mt-3 text-center text-[11px] text-fg-4">Updated {timeAgo(data.updatedAt)}</p> : null}
        </div>
      )}

      <div className="mt-10 flex items-start gap-3 rounded-md border border-line p-4 text-[13px] leading-relaxed text-fg-3">
        <Info className="mt-0.5 h-4 w-4 shrink-0" />
        <p>
          Privacy: leaderboards show your username, level and result only. You can leave all leaderboards at any time from{" "}
          <Link href="/settings#leaderboard" className="font-medium text-fg-2 underline-offset-4 hover:underline">
            Settings → Leaderboard participation
          </Link>
          . Spinza never shares data with third parties.
        </p>
      </div>
    </AppShell>
  );
}