"use client";

import Link from "next/link";
import { History, ReceiptText, Settings, Trophy, ChevronRight, Sparkles, Zap } from "lucide-react";
import type { PublicUser } from "@spinza/shared";
import { formatMultiplier, formatSC } from "@spinza/shared";
import { useSession } from "@/lib/store";
import { useApi } from "@/lib/use-api";
import { Card, Credits, Progress, Skeleton } from "@/components/ui";
import { AppShell } from "@/components/shell/app-shell";
import { RequireAuth } from "@/components/shell/require-auth";
import { ApiErrorState } from "@/components/shell/api-error";
import { GameArt, type ArtPalette } from "@/components/lobby/game-art";

interface Profile {
  user: PublicUser;
  wallet: { balance: number; lifetimeWagered: number; lifetimeWon: number };
  stats: { totalSpins: number; gamesPlayed: number; biggestWin: number; biggestMultiplier: number; bonuses: number; achievements: number };
  favoriteGame: { slug: string; name: string; spins: number; palette: ArtPalette } | null;
}

function Stat({ label, value, sub }: { label: string; value: React.ReactNode; sub?: string }) {
  return (
    <Card className="p-4">
      <div className="eyebrow">{label}</div>
      <div className="mt-2 text-xl font-semibold tabular tracking-tight sm:text-2xl">{value}</div>
      {sub ? <div className="mt-0.5 text-[12px] text-fg-3">{sub}</div> : null}
    </Card>
  );
}

const LINKS = [
  { href: "/profile/history", label: "Round history", desc: "Every spin, with full results", icon: History },
  { href: "/profile/ledger", label: "Credit ledger", desc: "All credit movements", icon: ReceiptText },
  { href: "/rewards", label: "Achievements", desc: "Milestones and rewards", icon: Trophy },
  { href: "/settings", label: "Settings", desc: "Sound, motion, security", icon: Settings },
];

function ProfileBody() {
  const { data, error, loading, reload } = useApi<Profile>("/api/user/profile");
  const wallet = useSession((s) => s.wallet);

  if (error && !data) return <ApiErrorState error={error} retry={reload} />;
  if (loading && !data) {
    return (
      <div className="space-y-4" aria-busy>
        <Skeleton className="h-40 rounded-xl" />
        <div className="grid grid-cols-2 gap-3 lg:grid-cols-4">
          {Array.from({ length: 8 }).map((_, i) => (
            <Skeleton key={i} className="h-24 rounded-lg" />
          ))}
        </div>
      </div>
    );
  }
  if (!data) return null;
  const { user, stats, favoriteGame } = data;
  const balance = wallet?.balance ?? data.wallet.balance;
  const joined = new Date(user.createdAt).toLocaleDateString("en-US", { month: "long", day: "numeric", year: "numeric" });

  return (
    <div className="space-y-8">
      {/* identity */}
      <Card className="relative overflow-hidden p-6 sm:p-8">
        <div className="pointer-events-none absolute inset-0 bg-[radial-gradient(ellipse_at_top_left,rgba(201,169,97,0.14),transparent_55%)]" />
        <div className="relative flex flex-col gap-6 sm:flex-row sm:items-center">
          <span className="grid h-20 w-20 shrink-0 place-items-center rounded-2xl metal text-3xl font-bold uppercase text-accent-2 shadow-glow">{user.username.slice(0, 1)}</span>
          <div className="min-w-0 flex-1">
            <div className="flex flex-wrap items-center gap-2">
              <h1 className="truncate text-2xl font-semibold tracking-tight sm:text-3xl">{user.username}</h1>
              <span className="inline-flex items-center gap-1 rounded-full bg-accent-soft px-2.5 py-1 text-[12px] font-bold text-accent-2">
                <Zap className="h-3 w-3" /> LVL {user.level}
              </span>
            </div>
            <p className="mt-1 text-[13px] text-fg-3">Member since {joined}</p>
            <div className="mt-4 max-w-md">
              <Progress value={user.xpIntoLevel} max={user.xpForNext || 1} />
              <div className="mt-1.5 flex justify-between text-[12px] tabular text-fg-3">
                <span>{user.xpIntoLevel.toLocaleString("en-US")} XP</span>
                <span>{user.xpForNext ? `${user.xpForNext.toLocaleString("en-US")} XP to level ${user.level + 1}` : "Max level"}</span>
              </div>
            </div>
          </div>
          <div className="sm:text-right">
            <div className="eyebrow">Balance</div>
            <Credits amount={balance} size="lg" />
          </div>
        </div>
      </Card>

      {/* stats */}
      <section aria-labelledby="stats-title">
        <h2 id="stats-title" className="mb-3 text-lg font-semibold tracking-tight">
          Lifetime stats
        </h2>
        <div className="grid grid-cols-2 gap-3 lg:grid-cols-4">
          <Stat label="Total spins" value={stats.totalSpins.toLocaleString("en-US")} sub={`${stats.gamesPlayed} ${stats.gamesPlayed === 1 ? "game" : "games"} played`} />
          <Stat label="Total wagered" value={formatSC(data.wallet.lifetimeWagered)} />
          <Stat label="Total won" value={formatSC(data.wallet.lifetimeWon)} sub={data.wallet.lifetimeWagered ? `${((data.wallet.lifetimeWon / data.wallet.lifetimeWagered) * 100).toFixed(1)}% returned` : undefined} />
          <Stat label="Biggest win" value={<span className="text-credit">{formatSC(stats.biggestWin)}</span>} />
          <Stat label="Biggest multiplier" value={formatMultiplier(stats.biggestMultiplier)} />
          <Stat label="Bonus rounds" value={stats.bonuses.toLocaleString("en-US")} />
          <Stat label="Achievements" value={stats.achievements.toLocaleString("en-US")} sub="unlocked" />
          <Stat label="Level" value={user.level} sub={`${user.xp.toLocaleString("en-US")} XP total`} />
        </div>
      </section>

      <div className="grid gap-4 lg:grid-cols-[1fr_1.2fr]">
        {/* favourite game */}
        <section aria-labelledby="fav-title">
          <h2 id="fav-title" className="mb-3 text-lg font-semibold tracking-tight">
            Most played
          </h2>
          {favoriteGame ? (
            <Link href={`/games/${favoriteGame.slug}`} className="group relative block overflow-hidden rounded-lg border border-line focus-ring">
              <div className="aspect-[3/1] sm:aspect-[3/1]">
                <GameArt slug={favoriteGame.slug} name={favoriteGame.name} palette={favoriteGame.palette} variant="banner" />
              </div>
              <div className="absolute inset-x-0 bottom-0 flex items-center justify-between p-4">
                <span className="rounded-full glass px-3 py-1 text-[12px] font-semibold tabular">{favoriteGame.spins.toLocaleString("en-US")} spins</span>
                <span className="inline-flex items-center gap-1 rounded-full bg-fg px-3 py-1.5 text-[13px] font-semibold text-bg">Play again</span>
              </div>
            </Link>
          ) : (
            <Card className="flex items-center gap-4 p-5">
              <span className="grid h-11 w-11 place-items-center rounded-md bg-surface-2 text-fg-3">
                <Sparkles className="h-5 w-5" />
              </span>
              <div>
                <div className="font-semibold">No favourite yet</div>
                <p className="text-[13px] text-fg-3">
                  Play a few rounds and your most-played game appears here.{" "}
                  <Link href="/games" className="text-accent-2 underline-offset-4 hover:underline">
                    Browse games
                  </Link>
                </p>
              </div>
            </Card>
          )}
        </section>

        {/* shortcuts */}
        <section aria-labelledby="more-title">
          <h2 id="more-title" className="mb-3 text-lg font-semibold tracking-tight">
            Account
          </h2>
          <Card as="ul" className="divide-y divide-line overflow-hidden">
            {LINKS.map((l) => (
              <li key={l.href}>
                <Link href={l.href} className="flex items-center gap-3 px-4 py-3.5 transition-colors hover:bg-surface-2 focus-ring">
                  <span className="grid h-10 w-10 place-items-center rounded-md bg-surface-2 text-fg-2">
                    <l.icon className="h-[18px] w-[18px]" />
                  </span>
                  <span className="min-w-0 flex-1">
                    <span className="block text-[15px] font-medium">{l.label}</span>
                    <span className="block text-[12px] text-fg-3">{l.desc}</span>
                  </span>
                  <ChevronRight className="h-4 w-4 text-fg-4" />
                </Link>
              </li>
            ))}
          </Card>
        </section>
      </div>
    </div>
  );
}

export default function ProfilePage() {
  return (
    <AppShell>
      <RequireAuth>
        <ProfileBody />
      </RequireAuth>
    </AppShell>
  );
}