<script lang="ts">
  import { LogOut, Settings } from 'lucide-svelte';

  import AppNavSection from '$lib/components/navigation/AppNavSection.svelte';
  import { matchesRoute, type FooterLink, type NavItem } from '$lib/navigation/client-navigation';

  let {
    currentPath,
    primaryItems,
    workingDocumentItems,
    footerItems,
    appVersion,
    releaseStage,
    currentYear,
    onOpenSettings,
    onSignOut
  }: {
    currentPath: string;
    primaryItems: NavItem[];
    workingDocumentItems: NavItem[];
    footerItems: FooterLink[];
    appVersion: string;
    releaseStage: string;
    currentYear: number;
    onOpenSettings: () => void;
    onSignOut: () => void;
  } = $props();
</script>

<aside class="sidebar">
  <div class="brand-row">
    <a class="brand" href="/">
      <img class="sidebar-logo" src="/logo-hsf.png" alt="Hunter Premium Produce" />
    </a>
  </div>

  <div class="sidebar-body">
    <AppNavSection
      label="Modules"
      ariaLabel="Client navigation"
      items={primaryItems.map((item) => ({
        label: item.label,
        href: item.href,
        icon: item.icon,
        active: matchesRoute(item.href, currentPath)
      }))}
    />

    {#if workingDocumentItems.length}
      <AppNavSection
        label="Working Docs"
        ariaLabel="Working document pages"
        items={workingDocumentItems.map((item) => ({
          label: item.label,
          href: item.href,
          icon: item.icon,
          active: matchesRoute(item.href, currentPath)
        }))}
      />
    {/if}

    {#if footerItems.length}
      <AppNavSection
        label="More"
        ariaLabel="Workspace shortcuts"
        items={footerItems.map((item) => ({
          label: item.label,
          href: item.href,
          icon: item.icon
        }))}
      />
    {/if}

    <div class="sidebar-meta">
      <AppNavSection
        ariaLabel="Account actions"
        items={[
          {
            label: 'Settings',
            icon: Settings,
            active: currentPath.startsWith('/settings'),
            onSelect: onOpenSettings,
            type: 'button'
          },
          {
            label: 'Sign out',
            icon: LogOut,
            onSelect: onSignOut,
            type: 'button'
          }
        ]}
      />

      <div class="sidebar-meta-foot">
        <div class="sidebar-meta-top">
          <span class="version-pill">
            <span class="meta-label">Build</span>
            <span>{appVersion}</span>
          </span>
          <span class="release-pill">{releaseStage}</span>
        </div>
        <div class="sidebar-meta-bottom">
          <small>&copy; {currentYear} Hunter Premium Produce</small>
          <div class="powered-by">
            <span>Powered by</span>
            <img src="/lean101-isotipo.png" alt="Lean 101" class="lean101-logo" />
            <strong>Lean 101</strong>
          </div>
        </div>
      </div>
    </div>
  </div>
</aside>

<style>
  .sidebar {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: 1.1rem 0.85rem 0.85rem;
    background: var(--panel);
    border-right: 1px solid var(--line);
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    scrollbar-width: thin;
  }

  .sidebar-body {
    min-height: 0;
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.7rem;
  }

  .brand-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.68rem;
    padding: 0.2rem 0.35rem 0.95rem;
    border-bottom: 1px solid var(--line);
  }

  .brand {
    display: block;
    width: 100%;
  }

  .sidebar-logo {
    width: min(100%, 15.5rem);
    max-width: none;
    height: auto;
    display: block;
    object-fit: contain;
  }

  .sidebar-meta {
    margin-top: auto;
    display: grid;
    gap: 0.7rem;
    padding-top: 1rem;
    flex-shrink: 0;
  }

  .sidebar-meta-foot {
    display: grid;
    gap: 0.55rem;
    padding: 0.8rem 0.55rem 0;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 0.76rem;
  }

  .sidebar-meta-top,
  .sidebar-meta-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
  }

  .sidebar-meta-foot small {
    font-size: 0.72rem;
    line-height: 1.35;
  }

  .powered-by {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--muted);
    white-space: nowrap;
  }

  .powered-by span {
    font-size: 0.72rem;
    font-weight: 500;
  }

  .powered-by strong {
    font-size: 0.76rem;
    font-weight: 600;
    color: #5e6c64;
  }

  .lean101-logo {
    width: 1.45rem;
    height: 1.45rem;
    object-fit: contain;
    opacity: 0.8;
    flex-shrink: 0;
  }

  .version-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.24rem 0.56rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--panel-soft);
    color: #5e6c64;
    font-size: 0.72rem;
    font-weight: 600;
  }

  .meta-label {
    color: var(--muted);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .release-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.2rem 0.52rem;
    border: 1px solid color-mix(in srgb, var(--color-brand) 14%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-brand) 8%, white);
    color: var(--color-brand);
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
  }
</style>
