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

  import type { FooterLink, NavGroup, NavItem } from '$lib/navigation/client-navigation';
  import { matchesRoute } from '$lib/navigation/client-navigation';

  let {
    showBottomNav,
    navOpen = $bindable(false),
    primaryBottomNavigation,
    visibleDashboardItem,
    visibleMixCalculatorItem,
    visibleProductCostingItem,
    visibleThroughputItem,
    visibleEditorItem,
    visibleReportingItem,
    visibleWorkingDocumentItems,
    visibleFooterLinks,
    orderingManageGroup,
    orderingManageChildren,
    orderingItem,
    canManageOrdering,
    canOpenCustomerOrdering,
    canCreateMixWorksheet,
    canCreateMixSession,
    canOpenSettings,
    pagePath,
    onOpenSettings,
    onSignOut
  }: {
    showBottomNav: boolean;
    navOpen?: boolean;
    primaryBottomNavigation: NavItem[];
    visibleDashboardItem: NavItem | null;
    visibleMixCalculatorItem: NavItem | null;
    visibleProductCostingItem: NavItem | null;
    visibleThroughputItem: NavItem | null;
    visibleEditorItem: NavItem | null;
    visibleReportingItem: NavItem | null;
    visibleWorkingDocumentItems: NavItem[];
    visibleFooterLinks: FooterLink[];
    orderingManageGroup: NavGroup;
    orderingManageChildren: NavItem[];
    orderingItem: NavItem;
    canManageOrdering: boolean;
    canOpenCustomerOrdering: boolean;
    canCreateMixWorksheet: boolean;
    canCreateMixSession: boolean;
    canOpenSettings: boolean;
    pagePath: string;
    onOpenSettings: () => void | Promise<void>;
    onSignOut: () => void | Promise<void>;
  } = $props();

  function closeDrawer() {
    navOpen = false;
  }
</script>

{#if showBottomNav}
  {#if navOpen}
    <button aria-label="Close navigation" class="nav-backdrop" type="button" onclick={closeDrawer}></button>
  {/if}

  <nav class="bottom-nav" aria-label="Tablet navigation">
    {#each primaryBottomNavigation as item}
      {@const Icon = item.icon}
      <a class:active={matchesRoute(item.href, pagePath)} href={item.href}>
        <span class="bottom-nav-icon"><Icon size={18} strokeWidth={1.85} /></span>
        <span>{item.label}</span>
      </a>
    {/each}

    <button aria-expanded={navOpen} class:active={navOpen} type="button" onclick={() => (navOpen = !navOpen)}>
      <span class="bottom-nav-icon"><Menu size={18} strokeWidth={1.85} /></span>
      <span>More</span>
    </button>
  </nav>

  {#if navOpen}
    <div aria-label="Tablet navigation drawer" class="bottom-drawer" role="dialog" aria-modal="true">
      <div class="drawer-handle"></div>

      <div class="drawer-header">
        <div>
          <p class="workspace-label">Workspace Drawer</p>
          <strong>Hunter Premium Produce</strong>
        </div>
        <button aria-label="Close drawer" class="nav-toggle" type="button" onclick={closeDrawer}>
          <span></span>
        </button>
      </div>

      <div class="drawer-grid">
        <nav class="drawer-section" aria-label="All workspace pages">
          {#if visibleDashboardItem}
            {@const Icon = visibleDashboardItem.icon}
            <a class:active={matchesRoute(visibleDashboardItem.href, pagePath)} href={visibleDashboardItem.href} onclick={closeDrawer}>
              <span class="nav-icon"><Icon size={18} strokeWidth={1.75} /></span>
              <span>{visibleDashboardItem.label}</span>
            </a>
          {/if}

          {#if visibleMixCalculatorItem}
            {@const Icon = visibleMixCalculatorItem.icon}
            <a class:active={matchesRoute(visibleMixCalculatorItem.href, pagePath)} href={visibleMixCalculatorItem.href} onclick={closeDrawer}>
              <span class="nav-icon"><Icon size={18} strokeWidth={1.75} /></span>
              <span>{visibleMixCalculatorItem.label}</span>
            </a>
          {/if}

          {#if visibleProductCostingItem}
            {@const Icon = visibleProductCostingItem.icon}
            <a class:active={matchesRoute(visibleProductCostingItem.href, pagePath)} href={visibleProductCostingItem.href} onclick={closeDrawer}>
              <span class="nav-icon"><Icon size={18} strokeWidth={1.75} /></span>
              <span>{visibleProductCostingItem.label}</span>
              {#if visibleProductCostingItem.badge}<span class="drawer-badge">{visibleProductCostingItem.badge}</span>{/if}
            </a>
          {/if}

          {#if visibleThroughputItem}
            {@const Icon = visibleThroughputItem.icon}
            <a class:active={matchesRoute(visibleThroughputItem.href, pagePath)} href={visibleThroughputItem.href} onclick={closeDrawer}>
              <span class="nav-icon"><Icon size={18} strokeWidth={1.75} /></span>
              <span>{visibleThroughputItem.label}</span>
              {#if visibleThroughputItem.badge}<span class="drawer-badge">{visibleThroughputItem.badge}</span>{/if}
            </a>
          {/if}

          {#if visibleEditorItem}
            {@const Icon = visibleEditorItem.icon}
            <a class:active={matchesRoute(visibleEditorItem.href, pagePath)} href={visibleEditorItem.href} onclick={closeDrawer}>
              <span class="nav-icon"><Icon size={18} strokeWidth={1.75} /></span>
              <span>{visibleEditorItem.label}</span>
              {#if visibleEditorItem.badge}<span class="drawer-badge">{visibleEditorItem.badge}</span>{/if}
            </a>
          {/if}

          {#if visibleReportingItem}
            {@const Icon = visibleReportingItem.icon}
            <a class:active={matchesRoute(visibleReportingItem.href, pagePath)} href={visibleReportingItem.href} onclick={closeDrawer}>
              <span class="nav-icon"><Icon size={18} strokeWidth={1.75} /></span>
              <span>{visibleReportingItem.label}</span>
            </a>
          {/if}

          {#if canManageOrdering}
            {@const GroupIcon = orderingManageGroup.icon}
            <a class:active={pagePath === '/ordering/manage'} href="/ordering/manage" onclick={closeDrawer}>
              <span class="nav-icon"><GroupIcon size={18} strokeWidth={1.75} /></span>
              <span>{orderingManageGroup.label}</span>
            </a>
            <div class="drawer-sublist">
              {#each orderingManageChildren as child}
                {@const ChildIcon = child.icon}
                <a class:active={matchesRoute(child.href, pagePath, child.exact)} href={child.href} onclick={closeDrawer}>
                  <span class="nav-icon"><ChildIcon size={18} strokeWidth={1.75} /></span>
                  <span>{child.label}</span>
                </a>
              {/each}
            </div>
          {:else if canOpenCustomerOrdering}
            {@const Icon = orderingItem.icon}
            <a class:active={matchesRoute(orderingItem.href, pagePath)} href={orderingItem.href} onclick={closeDrawer}>
              <span class="nav-icon"><Icon size={18} strokeWidth={1.75} /></span>
              <span>{orderingItem.label}</span>
            </a>
          {/if}

          {#if visibleWorkingDocumentItems.length}
            <div class="drawer-sublist" id="drawer-working-documents-nav">
              {#each visibleWorkingDocumentItems as item}
                {@const Icon = item.icon}
                <a class:active={matchesRoute(item.href, pagePath)} href={item.href} onclick={closeDrawer}>
                  <span class="nav-icon"><Icon size={18} strokeWidth={1.75} /></span>
                  <span>{item.label}</span>
                </a>
              {/each}
            </div>
          {/if}
        </nav>

        <div class="drawer-section drawer-actions">
          {#if canCreateMixWorksheet}
            <a href="/mixes/new" onclick={closeDrawer}>
              <span class="nav-icon"><Plus size={18} strokeWidth={1.75} /></span>
              <span>Create mix worksheet</span>
            </a>
          {/if}
          {#if canCreateMixSession}
            <a href="/mix-calculator" onclick={closeDrawer}>
              <span class="nav-icon"><Calculator size={18} strokeWidth={1.75} /></span>
              <span>Create mix session</span>
            </a>
          {/if}
          {#if canOpenSettings}
            <button type="button" onclick={onOpenSettings}>
              <span class="nav-icon"><Settings size={18} strokeWidth={1.75} /></span>
              <span>Change settings</span>
            </button>
          {/if}
          <button type="button" onclick={onSignOut}>
            <span class="nav-icon"><LogOut size={18} strokeWidth={1.75} /></span>
            <span>Logout</span>
          </button>
        </div>
      </div>

      <div class="drawer-footer">
        {#each visibleFooterLinks as item}
          <a href={item.href} onclick={closeDrawer}>
            <span>{item.label}</span>
            <small>{item.shortLabel}</small>
          </a>
        {/each}
      </div>
    </div>
  {/if}
{/if}

<style>
  .nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 48;
    display: block;
    border: none;
    background: rgba(11, 18, 14, 0.28);
    backdrop-filter: blur(4px);
  }

  .workspace-label {
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .nav-toggle {
    width: 2.05rem;
    height: 2.05rem;
    border: 1px solid var(--line);
    border-radius: 0.68rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--panel);
    color: var(--muted);
    cursor: pointer;
  }

  .nav-toggle span,
  .nav-toggle span::before,
  .nav-toggle span::after {
    width: 0.88rem;
    height: 2px;
    background: currentColor;
    border-radius: 999px;
    content: '';
  }

  .nav-toggle span {
    position: relative;
    display: inline-block;
  }

  .nav-toggle span::before,
  .nav-toggle span::after {
    position: absolute;
    left: 0;
  }

  .nav-toggle span::before {
    top: -0.28rem;
  }

  .nav-toggle span::after {
    top: 0.28rem;
  }

  .nav-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--color-text-muted);
    background: transparent;
    border-radius: 0.55rem;
    width: 1.6rem;
    height: 1.6rem;
  }

  .bottom-nav,
  .bottom-drawer {
    display: none;
  }

  .drawer-sublist a {
    position: relative;
  }

  @media (max-width: 1180px) {
    .bottom-nav {
      position: fixed;
      left: max(0.8rem, env(safe-area-inset-left));
      right: max(0.8rem, env(safe-area-inset-right));
      bottom: max(0.8rem, env(safe-area-inset-bottom));
      z-index: 45;
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 0.5rem;
      padding: 0.6rem;
      border: 1px solid var(--color-border);
      border-radius: 1.35rem;
      background: var(--color-bg-surface);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    }

    .bottom-nav a,
    .bottom-nav button {
      min-width: 0;
      display: grid;
      justify-items: center;
      gap: 0.34rem;
      padding: 0.62rem 0.38rem;
      border: none;
      border-radius: 1rem;
      background: transparent;
      color: var(--color-text-secondary);
      text-align: center;
      font-size: 0.74rem;
      font-weight: 700;
      cursor: pointer;
    }

    .bottom-nav a.active,
    .bottom-nav button.active {
      color: var(--color-brand);
      background: var(--color-brand-tint);
    }

    .bottom-nav-icon {
      width: 2.1rem;
      height: 2.1rem;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 0.78rem;
      color: var(--color-on-brand);
      background: var(--color-brand);
      font-size: 0.66rem;
      letter-spacing: 0.04em;
    }

    .bottom-drawer {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 50;
      display: grid;
      gap: 1rem;
      padding: 0.85rem 1rem calc(6.6rem + env(safe-area-inset-bottom));
      border-top: 1px solid var(--line);
      border-radius: 1.6rem 1.6rem 0 0;
      background: var(--color-bg-surface);
      box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
    }

    .drawer-handle {
      width: 3.5rem;
      height: 0.34rem;
      margin: 0 auto;
      border-radius: 999px;
      background: var(--color-border);
    }

    .drawer-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.8rem;
    }

    .drawer-header strong {
      font-size: 1rem;
    }

    .drawer-grid {
      display: grid;
      gap: 0.9rem;
      grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    }

    .drawer-section {
      display: grid;
      gap: 0.4rem;
    }

    .drawer-section a,
    .drawer-section button {
      display: flex;
      align-items: center;
      gap: 0.72rem;
      padding: 0.82rem 0.86rem;
      border: 1px solid var(--line);
      border-radius: 0.96rem;
      background: var(--color-bg-surface);
      color: var(--color-text-primary);
      text-align: left;
      cursor: pointer;
    }

    .drawer-section a.active {
      color: var(--color-brand-hover);
      background: color-mix(in srgb, var(--color-brand) 11%, var(--color-bg-surface));
    }

    .drawer-badge {
      margin-left: auto;
      padding: 0.08rem 0.4rem;
      border-radius: 999px;
      background: var(--color-warning-tint);
      color: var(--color-warning-text);
      font-size: 0.62rem;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    .drawer-sublist {
      display: grid;
      gap: 0.4rem;
    }

    .drawer-footer {
      display: grid;
      gap: 0.5rem;
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .drawer-footer a {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.75rem;
      padding: 0.82rem 0.9rem;
      border: 1px solid var(--line);
      border-radius: 0.96rem;
      background: var(--color-bg-surface);
      color: var(--color-text-primary);
      font-weight: 600;
    }

    .drawer-footer small {
      color: var(--muted);
      font-size: 0.72rem;
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }
  }

  @media (max-width: 900px) {
    .drawer-grid {
      grid-template-columns: 1fr;
    }
  }

  @media (max-width: 720px) {
    .bottom-nav {
      left: max(0.55rem, env(safe-area-inset-left));
      right: max(0.55rem, env(safe-area-inset-right));
      bottom: max(0.55rem, env(safe-area-inset-bottom));
      gap: 0.32rem;
      padding: 0.45rem;
    }

    .bottom-nav a,
    .bottom-nav button {
      padding: 0.55rem 0.2rem;
      font-size: 0.68rem;
    }

    .bottom-nav-icon {
      width: 1.9rem;
      height: 1.9rem;
      font-size: 0.6rem;
    }

    .bottom-drawer {
      padding: 0.75rem 0.8rem calc(6.3rem + env(safe-area-inset-bottom));
    }

    .drawer-footer {
      grid-template-columns: 1fr;
    }
  }
</style>
