<script lang="ts">
  import { optima } from "$lib";
  import { page } from "$app/stores";
  import { navigating } from "$app/stores";
  import { theme } from "$lib/theme";
  import LoadingSpinner from "../components/LoadingSpinner.svelte";
  import SessionGuard from "../components/SessionGuard.svelte";
  import Breadcrumb from "../components/Breadcrumb.svelte";

  const navItems = [
    {
      href: "/",
      label: "Home",
      icon: '<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline>',
      exact: true,
    },
    {
      href: "/companies",
      label: "Companies",
      icon: '<path d="M3 21h18"></path><path d="M5 21V7l8-4v18"></path><path d="M19 21V11l-6-4"></path><path d="M9 9h1"></path><path d="M9 13h1"></path><path d="M9 17h1"></path>',
    },
    {
      href: "/procurement",
      label: "Procurement",
      icon: '<path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line>',
    },
    {
      href: "/sales",
      label: "Sales",
      icon: '<line x1="12" y1="1" x2="12" y2="23"></line><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path>',
    },
  ];

  const personalNavItems = [
    {
      href: "/calendar",
      label: "Calendar",
      icon: '<rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line>',
    },
  ];

  const adminNavItem = {
    href: "/admin",
    label: "Admin",
    icon: '<path d="M12 15v2m-6 4h12a2 2 0 0 0 2-2v-6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2zm10-10V7a4 4 0 0 0-8 0v4h8z"></path>',
  };

  $: canViewAdmin = $page.data?.canViewAdmin === true;

  function isActive(pathname: string, item: (typeof navItems)[0]) {
    return item.exact ? pathname === item.href : pathname.startsWith(item.href);
  }
</script>

{#if $page.route.id?.startsWith("/(auth)")}
  <slot />
{:else}
  <SessionGuard />
  <LoadingSpinner loading={!!$navigating} />
  <div class="layout-container">
    <header class="header">
      <div class="header-content">
        <img src={$theme === 'dark' ? '/tts-logo-dark.png' : '/tts-logo.png'} alt="Total Tech Solutions" class="header-logo" />
        <button
          class="theme-toggle"
          on:click={() => theme.toggle()}
          aria-label="Toggle {$theme === 'dark' ? 'light' : 'dark'} mode"
          title="Switch to {$theme === 'dark' ? 'light' : 'dark'} mode"
        >
          <svg
            class="theme-icon sun-icon"
            class:visible={$theme === "dark"}
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
          >
            <circle cx="12" cy="12" r="5" />
            <line x1="12" y1="1" x2="12" y2="3" />
            <line x1="12" y1="21" x2="12" y2="23" />
            <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
            <line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
            <line x1="1" y1="12" x2="3" y2="12" />
            <line x1="21" y1="12" x2="23" y2="12" />
            <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
            <line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
          </svg>
          <svg
            class="theme-icon moon-icon"
            class:visible={$theme === "light"}
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
          >
            <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
          </svg>
        </button>
      </div>
    </header>

    <div class="layout-wrapper">
      <aside class="sidebar">
        <nav class="sidebar-nav">
          {#each navItems as item}
            <a
              href={item.href}
              class="nav-item {isActive($page.url.pathname, item)
                ? 'active'
                : ''}"
              title={item.label}
            >
              <svg
                class="nav-icon"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
              >
                {@html item.icon}
              </svg>
              <span class="nav-label">{item.label}</span>
            </a>
          {/each}

          <hr class="nav-divider" />
          {#each personalNavItems as item}
            <a
              href={item.href}
              class="nav-item {isActive($page.url.pathname, item)
                ? 'active'
                : ''}"
              title={item.label}
            >
              <svg
                class="nav-icon"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
              >
                {@html item.icon}
              </svg>
              <span class="nav-label">{item.label}</span>
            </a>
          {/each}

          {#if canViewAdmin}
            <hr class="nav-divider" />
            <a
              href={adminNavItem.href}
              class="nav-item {$page.url.pathname.startsWith('/admin')
                ? 'active'
                : ''}"
              title={adminNavItem.label}
            >
              <svg
                class="nav-icon"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
              >
                {@html adminNavItem.icon}
              </svg>
              <span class="nav-label">{adminNavItem.label}</span>
            </a>
          {/if}
        </nav>
      </aside>

      <div class="content-area">
        <div class="accent-bar"></div>
        <main class="main-content">
          <Breadcrumb />
          <slot />
        </main>
      </div>
    </div>

    <footer class="footer">
      <small>&copy; {new Date().getFullYear()} Total Tech Solutions, LLC</small>
    </footer>
  </div>
{/if}
