"use client";

import { Home, ShoppingBag, Star, Trophy, User, Users } from "lucide-react";
import { useUIStore, type Screen } from "@/lib/ui-store";
import { useSessionStore } from "@/lib/session-store";
import { useI18n } from "@/lib/i18n";
import { cn } from "@/lib/cn";

type Item = { key: Screen; icon: typeof Home; label: string; authed?: boolean };

/**
 * UNO-style primary navigation. A vertical rail pinned to the side in landscape
 * (the app's main orientation) and a bottom tab bar in portrait. Active section
 * is highlighted gold and pulled forward.
 */
export function NavRail() {
  const screen = useUIStore((s) => s.screen);
  const go = useUIStore((s) => s.go);
  const isAuthed = useSessionStore((s) => s.isAuthed);
  const { t } = useI18n();

  const items: Item[] = [
    { key: "home", icon: Home, label: t("nav.home") },
    { key: "profile", icon: User, label: t("menu.profile") },
    { key: "shop", icon: ShoppingBag, label: t("menu.shop") },
    { key: "friends", icon: Users, label: t("menu.friends"), authed: true },
    { key: "leaderboard", icon: Trophy, label: t("menu.leaderboard") },
    { key: "achievements", icon: Star, label: t("achv.title") },
  ];

  return (
    <nav
      className={cn(
        "z-20 shrink-0 glass flex justify-around gap-1 p-1.5",
        // portrait: bottom bar; landscape: side rail
        "border-t border-gold/10 pb-[max(0.375rem,env(safe-area-inset-bottom))]",
        "landscape:order-first landscape:h-full landscape:w-[78px] landscape:flex-col landscape:justify-start",
        "landscape:gap-1.5 landscape:py-3 landscape:pb-3 landscape:border-t-0",
        "ltr:landscape:border-r rtl:landscape:border-l"
      )}
    >
      {items.map((it) => {
        const active = screen === it.key;
        return (
          <button
            key={it.key}
            onClick={() => go(it.authed && !isAuthed ? "auth" : it.key)}
            className={cn(
              "flex min-w-[54px] flex-col items-center justify-center gap-1 rounded-2xl px-1.5 py-2 transition landscape:w-full landscape:py-2.5",
              active ? "btn-gold shadow-lg" : "text-cream/55 hover:bg-navy-800/60 hover:text-cream"
            )}
          >
            <it.icon className={cn("size-5", active && "text-[#2a1f04]")} />
            <span className={cn("text-[10px] font-bold leading-none", active && "text-[#2a1f04]")}>
              {it.label}
            </span>
          </button>
        );
      })}
    </nav>
  );
}