import { CookieBanner } from '@/components/cookie-banner';
import { Logo } from '@/components/logo';
import { MobileActionBar } from '@/components/mobile-action-bar';
import { UserMenu } from '@/components/user-menu';
import { FileClock, LayoutGrid, Package, Server, Settings } from 'lucide-react';
import Link from 'next/link';

export default function DashboardLayout({ children }: { children: React.ReactNode }) {
  return (
    <div className="flex min-h-screen flex-col">
      <header className="sticky top-0 z-50 border-b border-[--color-border] bg-[--color-bg]/85 backdrop-blur-md">
        <div className="mx-auto flex h-12 max-w-7xl items-center justify-between gap-2 px-4 sm:px-6">
          <div className="flex min-w-0 items-center gap-2 sm:gap-6">
            <Logo />
            <nav className="flex items-center gap-0.5 sm:gap-1">
              <NavLink href="/dashboard" icon={<LayoutGrid size={13} />}>
                Overview
              </NavLink>
              <NavLink href="/servers" icon={<Server size={13} />}>
                Servers
              </NavLink>
              <NavLink href="/templates" icon={<Package size={13} />}>
                Marketplace
              </NavLink>
              <NavLink href="/audit" icon={<FileClock size={13} />}>
                Audit
              </NavLink>
              <NavLink href="/settings" icon={<Settings size={13} />}>
                Settings
              </NavLink>
            </nav>
          </div>
          <div className="flex items-center gap-1 sm:gap-2">
            <Link
              href="/servers/new"
              className="hidden h-7 items-center gap-1.5 rounded-md bg-[--color-accent] px-2.5 text-[12px] font-medium text-white transition-colors duration-200 hover:bg-[#5557e8] sm:inline-flex"
            >
              + New server
            </Link>
            <UserMenu />
          </div>
        </div>
      </header>
      <main className="flex-1 bg-[--color-bg] pb-20 sm:pb-0">{children}</main>
      <MobileActionBar />
      <CookieBanner />
    </div>
  );
}

function NavLink({
  href,
  children,
  icon,
}: {
  href: string;
  children: React.ReactNode;
  icon: React.ReactNode;
}) {
  return (
    <Link
      href={href}
      className="inline-flex h-7 items-center gap-1.5 rounded-md px-2 text-[12.5px] text-[--color-fg-muted] transition-colors hover:bg-[--color-bg-subtle] hover:text-[--color-fg]"
    >
      {icon}
      <span className="hidden sm:inline">{children}</span>
    </Link>
  );
}