import Link from "next/link";
import type { Route } from "next";
import { Film, LayoutGrid } from "lucide-react";

import { InstallAppButton } from "@/components/shared/install-app-button";
import { Button } from "@/components/ui/button";

interface AppShellProps {
  children: React.ReactNode;
}

const navItems: Array<{ href: string; label: string; icon: typeof LayoutGrid }> = [
  {
    href: "/",
    label: "Dashboard",
    icon: LayoutGrid
  }
];

export function AppShell({ children }: AppShellProps) {
  return (
    <div className="relative min-h-screen overflow-x-hidden">
      <a
        href="#main-content"
        className="sr-only z-[80] rounded-md bg-sky-400 px-3 py-2 text-sm font-medium text-slate-950 focus:not-sr-only focus:fixed focus:left-4 focus:top-3"
      >
        Skip to main content
      </a>
      <div className="pointer-events-none absolute inset-x-0 top-0 h-72 bg-gradient-to-b from-sky-500/10 via-indigo-500/5 to-transparent" />
      <header className="sticky top-0 z-50 border-b border-white/10 bg-slate-950/75 backdrop-blur-md">
        <div className="mx-auto flex w-full max-w-7xl items-center justify-between px-4 py-3 sm:px-6 lg:px-8">
          <Link
            href="/"
            className="inline-flex items-center gap-2 rounded-lg border border-white/10 bg-slate-900/70 px-3 py-2 transition hover:border-sky-300/35 hover:bg-slate-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-300/60"
          >
            <span className="inline-flex size-7 items-center justify-center rounded-md bg-gradient-to-br from-sky-400/90 to-indigo-500/90 text-slate-950">
              <Film className="size-4" />
            </span>
            <span className="font-[var(--font-space-grotesk)] text-sm font-medium text-white">
              video.haus
            </span>
          </Link>
          <div className="flex items-center gap-2">
            <nav className="hidden items-center gap-2 md:flex">
              {navItems.map((item) => (
                <Button
                  key={item.href}
                  variant="ghost"
                  size="sm"
                  className="text-slate-300 hover:text-white focus-visible:ring-sky-300/60"
                  render={
                    <Link href={item.href as Route}>
                      <item.icon data-icon="inline-start" />
                      {item.label}
                    </Link>
                  }
                />
              ))}
            </nav>
            <div className="hidden md:block">
              <InstallAppButton />
            </div>
          </div>
        </div>
        <nav className="mx-auto flex w-full max-w-7xl items-center gap-2 overflow-x-auto px-4 pb-3 md:hidden sm:px-6 lg:px-8">
          {navItems.map((item) => (
            <Button
              key={`mobile-${item.href}`}
              variant="outline"
              size="sm"
              className="shrink-0 border-white/20 bg-slate-900/50 text-slate-200 hover:bg-slate-800"
              render={
                <Link href={item.href as Route}>
                  <item.icon data-icon="inline-start" />
                  {item.label}
                </Link>
              }
            />
          ))}
          <InstallAppButton compact />
        </nav>
      </header>
      <main id="main-content" className="mx-auto flex w-full max-w-7xl flex-col px-4 py-8 sm:px-6 lg:px-8">
        {children}
      </main>
    </div>
  );
}
