---
import BaseLayout from "./BaseLayout.astro";

const { title } = Astro.props;

const user = Astro.locals.user;

const navigation = [
  { name: "Public profile", href: "/settings/profile" },
  { name: "Account", href: "/settings/account" },
  { name: "Password and authentication", href: "/settings/security" },
  { name: "SSH and GPG keys", href: "/settings/ssh-keys" },
  { name: "Personal access tokens", href: "/settings/tokens" },
  { name: "OAuth apps", href: "/settings/oauth-apps" },
];

const repoNavigation = [
  { name: "Repositories", href: "/repositories" },
  { name: "Organizations", href: "/orgs" },
  { name: "Notifications", href: "/notifications" },
];

const currentPath = Astro.url.pathname;
---

<BaseLayout title={title}>
  <div class="border-b border-border bg-background">
    <div class="max-w-[1280px] mx-auto px-4 sm:px-6 lg:px-8">
      <div class="flex items-center gap-3 py-3 sm:py-4">
        {user?.avatarUrl ? (
          <img src={user.avatarUrl} alt="" class="w-7 h-7 sm:w-8 sm:h-8 rounded-full" />
        ) : (
          <div class="w-7 h-7 sm:w-8 sm:h-8 rounded-full bg-secondary flex items-center justify-center text-xs sm:text-sm font-medium text-muted-foreground">
            {user?.username?.[0]?.toUpperCase()}
          </div>
        )}
        <div>
          <h1 class="text-base sm:text-xl font-semibold text-foreground">{user?.username}</h1>
        </div>
      </div>
    </div>
  </div>

  <div class="max-w-[1280px] mx-auto px-4 sm:px-6 lg:px-8 py-4 sm:py-6">
    <div class="flex flex-col lg:flex-row gap-6 lg:gap-8">
      <!-- Sidebar - horizontal on mobile, vertical on desktop -->
      <aside class="w-full lg:w-[260px] shrink-0">
        <!-- Mobile: horizontal scroll -->
        <nav class="flex lg:flex-col gap-1 overflow-x-auto no-scrollbar pb-2 lg:pb-0">
          <div class="hidden lg:block text-xs font-semibold text-foreground uppercase tracking-wider mb-2 px-3">Personal settings</div>
          {navigation.map((item) => {
            const isActive = currentPath === item.href;
            return (
              <a
                href={item.href}
                class:list={[
                  "whitespace-nowrap px-3 py-1.5 text-sm rounded-md transition-colors",
                  isActive
                    ? "font-semibold text-foreground bg-accent"
                    : "text-[#58a6ff] hover:text-[#79c0ff] hover:bg-accent/50"
                ]}
              >
                {item.name}
              </a>
            );
          })}
          <div class="hidden lg:block h-px bg-border my-3"></div>
          <div class="hidden lg:block text-xs font-semibold text-foreground uppercase tracking-wider mb-2 px-3">Repository settings</div>
          {repoNavigation.map((item) => {
            const isActive = currentPath === item.href;
            return (
              <a
                href={item.href}
                class:list={[
                  "whitespace-nowrap px-3 py-1.5 text-sm rounded-md transition-colors",
                  isActive
                    ? "font-semibold text-foreground bg-accent"
                    : "text-[#58a6ff] hover:text-[#79c0ff] hover:bg-accent/50"
                ]}
              >
                {item.name}
              </a>
            );
          })}
        </nav>
      </aside>

      <!-- Content -->
      <div class="flex-1 min-w-0">
        <slot />
      </div>
    </div>
  </div>
</BaseLayout>