"use client";

import { useEffect } from "react";

import Link from "next/link";

import { usePathname } from "next/navigation";

import { Sidebar } from "./Sidebar";

import { Topbar } from "./Topbar";

import { CommandPalette } from "./CommandPalette";

import { NAV } from "./nav";

import { useDropsStream } from "@/hooks/useDropsStream";

import { useUiStore } from "@/stores/ui";

import { cn } from "@/lib/utils";

const TITLES: Record<string, string> = {

  "/": "Dashboard",

  "/drops": "Live Drops",

  "/explore": "Explore",

  "/watchlist": "Watchlist",

  "/sources": "Sources",

  "/settings": "Settings",

};

export function AppShell({ children }: { children: React.ReactNode }) {

  const pathname = usePathname();

  const setCommandOpen = useUiStore((s) => s.setCommandOpen);

  useDropsStream();

  useEffect(() => {

    const onKey = (e: KeyboardEvent) => {

      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k") {

        e.preventDefault();

        setCommandOpen(true);

      }

    };

    window.addEventListener("keydown", onKey);

    return () => window.removeEventListener("keydown", onKey);

  }, [setCommandOpen]);

  const title = TITLES[pathname] ?? "DropHawk";

  const mobileNav = NAV.filter((n) => n.ready).slice(0, 5);

  return (

    <div className="flex min-h-dvh">

      <Sidebar />

      <div className="flex min-w-0 flex-1 flex-col pb-16 md:pb-0">

        <Topbar title={title} />

        <main className="flex-1 px-4 py-5 md:px-6 md:py-6">{children}</main>

      </div>

      {}

      <nav

        className="glass fixed inset-x-0 bottom-0 z-[var(--z-sticky)] flex h-16 items-stretch border-t border-[var(--color-border-subtle)] md:hidden"

        aria-label="Primary"

      >

        {mobileNav.map((item) => {

          const active = item.href === "/" ? pathname === "/" : pathname.startsWith(item.href);

          return (

            <Link

              key={item.href}

              href={item.href}

              aria-current={active ? "page" : undefined}

              className={cn(

                "flex flex-1 flex-col items-center justify-center gap-1 text-[10px] font-medium",

                active ? "text-[var(--color-accent-teal)]" : "text-[var(--color-fg-tertiary)]",

              )}

            >

              <item.icon className="h-5 w-5" aria-hidden />

              {item.label}

            </Link>

          );

        })}

      </nav>

      <CommandPalette />

    </div>

  );

}