"use client";

import Link from "next/link";
import { usePathname, useRouter } from "next/navigation";
import { Home, LayoutGrid, Gift, Trophy, User, LogOut, Settings, History, Shield } from "lucide-react";
import { SpinzaWordmark, SpinzaMark } from "@/components/brand/logo";
import { useSession } from "@/lib/store";
import { Button, Credits } from "@/components/ui";
import { cn } from "@/lib/utils";

const NAV = [
  { href: "/", label: "Home", icon: Home },
  { href: "/games", label: "Games", icon: LayoutGrid },
  { href: "/rewards", label: "Rewards", icon: Gift },
  { href: "/leaderboard", label: "Leaderboard", icon: Trophy },
  { href: "/profile", label: "Profile", icon: User },
];

const SIDE_EXTRA = [
  { href: "/profile/history", label: "History", icon: History },
  { href: "/settings", label: "Settings", icon: Settings },
  { href: "/responsible-play", label: "Responsible play", icon: Shield },
];

function isActive(path: string, href: string) {
  return href === "/" ? path === "/" : path.startsWith(href);
}

/** Desktop: sidebar + top bar. Mobile: top logo + balance, bottom navigation. */
export function AppShell({ children, wide }: { children: React.ReactNode; wide?: boolean }) {
  const path = usePathname();
  const router = useRouter();
  const { status, user, wallet, signOut } = useSession();
  const authed = status === "authenticated";

  return (
    <div className="min-h-dvh lg:grid lg:grid-cols-[248px_1fr]">
      {/* Sidebar (desktop) */}
      <aside className="sticky top-0 hidden h-dvh flex-col border-r border-line bg-bg-1/60 px-4 py-6 lg:flex">
        <Link href="/" className="px-2">
          <SpinzaWordmark />
        </Link>
        <nav className="mt-8 flex flex-col gap-1">
          {NAV.map((n) => (
            <Link key={n.href} href={n.href} className={cn("flex items-center gap-3 rounded-md px-3 py-2.5 text-[15px] font-medium transition-colors", isActive(path, n.href) ? "bg-surface-2 text-fg" : "text-fg-3 hover:bg-surface hover:text-fg-2")}>
              <n.icon className="h-[18px] w-[18px]" />
              {n.label}
            </Link>
          ))}
          <div className="my-3 h-px bg-line" />
          {SIDE_EXTRA.map((n) => (
            <Link key={n.href} href={n.href} className={cn("flex items-center gap-3 rounded-md px-3 py-2 text-sm transition-colors", isActive(path, n.href) ? "bg-surface-2 text-fg" : "text-fg-3 hover:bg-surface hover:text-fg-2")}>
              <n.icon className="h-4 w-4" />
              {n.label}
            </Link>
          ))}
        </nav>
        <div className="mt-auto">
          {authed && user ? (
            <div className="surface rounded-lg p-3">
              <div className="flex items-center justify-between">
                <div className="truncate text-sm font-semibold">{user.username}</div>
                <span className="rounded-full bg-accent-soft px-2 py-0.5 text-[11px] font-bold text-accent-2">LVL {user.level}</span>
              </div>
              <div className="mt-1">
                <Credits amount={wallet?.balance ?? 0} size="md" />
              </div>
              <button
                onClick={() =>
                  void signOut().then(() => {
                    router.push("/");
                    router.refresh();
                  })
                }
                className="mt-3 flex items-center gap-2 text-[13px] text-fg-3 hover:text-fg"
              >
                <LogOut className="h-3.5 w-3.5" /> Sign out
              </button>
            </div>
          ) : (
            <div className="flex flex-col gap-2">
              <Button variant="accent" href="/register">
                Play free
              </Button>
              <Button variant="ghost" href="/login">
                Sign in
              </Button>
            </div>
          )}
          <p className="mt-4 px-1 text-[11px] leading-relaxed text-fg-4">Virtual credits only. No deposits. No withdrawals. No cash value. 18+.</p>
        </div>
      </aside>

      <div className="flex min-h-dvh flex-col">
        {/* Top bar */}
        <header className="sticky top-0 glass border-x-0 border-t-0" style={{ zIndex: "var(--z-nav)", paddingTop: "var(--safe-top)" }}>
          <div className={cn("flex h-14 items-center justify-between gap-3 px-4 lg:px-8", wide ? "" : "mx-auto max-w-[1320px]")}>
            <Link href="/" className="lg:hidden">
              <SpinzaMark className="h-8 w-8" />
            </Link>
            <div className="hidden text-sm text-fg-3 lg:block">{pageTitle(path)}</div>
            <div className="flex items-center gap-2">
              {authed ? (
                <>
                  <Link href="/rewards" className="surface flex h-10 items-center gap-2 rounded-full px-3.5">
                    <Credits amount={wallet?.balance ?? 0} size="sm" />
                  </Link>
                  <Link href="/profile" className="metal hidden h-10 items-center gap-2 rounded-full px-3 text-sm font-semibold sm:flex">
                    <span className="grid h-6 w-6 place-items-center rounded-full bg-accent text-[11px] font-bold text-bg">{user?.username.slice(0, 1).toUpperCase()}</span>
                    <span className="max-w-[120px] truncate">{user?.username}</span>
                  </Link>
                </>
              ) : status === "guest" ? (
                <>
                  <Button variant="ghost" size="sm" href="/login">
                    Sign in
                  </Button>
                  <Button variant="accent" size="sm" href="/register">
                    Play free
                  </Button>
                </>
              ) : null}
            </div>
          </div>
        </header>

        <main className={cn("flex-1 pb-[calc(76px+var(--safe-bottom))] lg:pb-10", wide ? "" : "page py-6 lg:py-8")}>{children}</main>

        {/* Bottom nav (mobile) */}
        <nav className="fixed inset-x-0 bottom-0 glass border-x-0 border-b-0 lg:hidden" style={{ zIndex: "var(--z-nav)", paddingBottom: "var(--safe-bottom)" }}>
          <div className="grid h-[64px] grid-cols-5">
            {NAV.map((n) => {
              const active = isActive(path, n.href);
              return (
                <Link key={n.href} href={n.href} className={cn("flex flex-col items-center justify-center gap-1 text-[11px] font-medium transition-colors", active ? "text-accent-2" : "text-fg-3")}>
                  <n.icon className={cn("h-[22px] w-[22px]", active && "drop-shadow-[0_0_8px_rgba(201,169,97,0.6)]")} />
                  {n.label}
                </Link>
              );
            })}
          </div>
        </nav>
      </div>
    </div>
  );
}

function pageTitle(path: string): string {
  if (path === "/") return "Lobby";
  const seg = path.split("/")[1];
  return seg ? seg.charAt(0).toUpperCase() + seg.slice(1) : "";
}