<template>
  <div class="flex h-screen min-h-0 bg-canvas text-ink">
    <!-- Sidebar -->
    <aside
      :class="[
        'flex flex-col shrink-0 bg-navy text-white transition-[width] duration-200 ease-out',
        collapsed ? 'w-16' : 'w-60',
      ]"
      aria-label="Main navigation"
    >
      <div
        :class="[
          'flex items-center h-16 border-b border-white/10 shrink-0',
          collapsed ? 'justify-center px-2' : 'gap-2.5 px-4',
        ]"
      >
        <svg viewBox="0 0 32 32" class="w-7 h-7 shrink-0" aria-hidden="true">
          <path fill="#155EEF" d="M16 2 4 6.5v8.2c0 8 5.1 14.6 12 15.3 6.9-.7 12-7.3 12-15.3V6.5z"/>
          <path fill="white" d="M16 8.5c-3.6 0-6.6 2.8-6.6 6.3 0 3.4 2.7 6.4 6.6 9.6 3.9-3.2 6.6-6.2 6.6-9.6 0-3.5-3-6.3-6.6-6.3m0 3.4c1.7 0 3.1 1.3 3.1 2.9s-1.4 2.9-3.1 2.9-3.1-1.3-3.1-2.9 1.4-2.9 3.1-2.9"/>
        </svg>
        <div v-if="!collapsed" class="min-w-0 leading-tight">
          <p class="font-bold tracking-tight text-sm truncate">VigilCare</p>
          <p class="text-[11px] text-white/60 truncate">Records</p>
        </div>
      </div>

      <nav class="flex-1 overflow-y-auto py-3 px-2 space-y-4">
        <div v-if="workspaceItems.length">
          <p
            v-if="!collapsed"
            class="px-2 mb-1.5 text-[10px] font-semibold uppercase tracking-wider text-white/40"
          >
            Workspace
          </p>
          <ul class="space-y-0.5">
            <li v-for="item in workspaceItems" :key="item.to">
              <router-link
                :to="item.to"
                :title="collapsed ? item.label : undefined"
                :class="navItemClass(item.to)"
              >
                <span class="shrink-0 w-5 h-5 flex items-center justify-center" aria-hidden="true">
                  <component :is="item.icon" />
                </span>
                <span v-if="!collapsed" class="truncate">{{ item.label }}</span>
              </router-link>
            </li>
          </ul>
        </div>

        <div v-if="adminItems.length">
          <p
            v-if="!collapsed"
            class="px-2 mb-1.5 text-[10px] font-semibold uppercase tracking-wider text-white/40"
          >
            Administration
          </p>
          <ul class="space-y-0.5">
            <li v-for="item in adminItems" :key="item.to">
              <router-link
                :to="item.to"
                :title="collapsed ? item.label : undefined"
                :class="navItemClass(item.to)"
              >
                <span class="shrink-0 w-5 h-5 flex items-center justify-center" aria-hidden="true">
                  <component :is="item.icon" />
                </span>
                <span v-if="!collapsed" class="truncate">{{ item.label }}</span>
              </router-link>
            </li>
          </ul>
        </div>
      </nav>

      <div class="shrink-0 border-t border-white/10 p-2">
        <button
          type="button"
          class="flex w-full items-center gap-2.5 rounded-input px-2.5 py-2 text-sm text-white/70 hover:bg-white/10 hover:text-white transition-colors"
          :class="collapsed ? 'justify-center' : ''"
          :aria-expanded="!collapsed"
          :aria-label="collapsed ? 'Expand sidebar' : 'Collapse sidebar'"
          @click="toggleCollapsed"
        >
          <svg
            class="w-5 h-5 shrink-0 transition-transform"
            :class="collapsed ? 'rotate-180' : ''"
            viewBox="0 0 20 20"
            fill="currentColor"
            aria-hidden="true"
          >
            <path fill-rule="evenodd" d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z" clip-rule="evenodd" />
          </svg>
          <span v-if="!collapsed">Collapse</span>
        </button>
      </div>
    </aside>

    <!-- Main column -->
    <div class="flex flex-col flex-1 min-w-0 min-h-0">
      <header class="flex items-center justify-end gap-4 h-16 shrink-0 px-4 sm:px-6 bg-surface border-b border-line">
        <span class="text-sm text-ink-secondary truncate">{{ auth.userFullName }}</span>
        <button
          type="button"
          class="text-sm text-ink-secondary hover:text-ink-strong transition-colors"
          @click="auth.logout()"
        >
          Sign Out
        </button>
      </header>

      <main class="flex-1 min-h-0 overflow-auto">
        <slot />
      </main>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, h, ref, watch } from 'vue'
import { useRoute } from 'vue-router'
import { useAuthStore } from '../stores/auth'

const COLLAPSE_KEY = 'vigilcare_sidebar_collapsed'

const auth = useAuthStore()
const route = useRoute()

const collapsed = ref(localStorage.getItem(COLLAPSE_KEY) === '1')

watch(collapsed, (value) => {
  localStorage.setItem(COLLAPSE_KEY, value ? '1' : '0')
})

function toggleCollapsed() {
  collapsed.value = !collapsed.value
}

function iconPath(d: string) {
  return () =>
    h(
      'svg',
      { viewBox: '0 0 20 20', fill: 'currentColor', class: 'w-5 h-5' },
      [h('path', { 'fill-rule': 'evenodd', 'clip-rule': 'evenodd', d })],
    )
}

const icons = {
  intake: iconPath(
    'M3 4.5A1.5 1.5 0 014.5 3h11A1.5 1.5 0 0117 4.5v11a1.5 1.5 0 01-1.5 1.5h-11A1.5 1.5 0 013 15.5v-11zM5.5 6a.5.5 0 000 1h9a.5.5 0 000-1h-9zm0 3a.5.5 0 000 1h9a.5.5 0 000-1h-9zm0 3a.5.5 0 000 1h6a.5.5 0 000-1h-6z',
  ),
  cover: iconPath(
    'M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4zm1 3.5A.5.5 0 015.5 6h9a.5.5 0 010 1h-9A.5.5 0 015 6.5zM5.5 9a.5.5 0 000 1h5a.5.5 0 000-1h-5z',
  ),
  entry: iconPath(
    'M3.5 3A1.5 1.5 0 002 4.5v11A1.5 1.5 0 003.5 17h13a1.5 1.5 0 001.5-1.5v-11A1.5 1.5 0 0016.5 3h-13zM5 7.5A.5.5 0 015.5 7h9a.5.5 0 010 1h-9A.5.5 0 015 7.5zm0 3A.5.5 0 015.5 10h9a.5.5 0 010 1h-9A.5.5 0 015 10.5zm0 3A.5.5 0 015.5 13h5a.5.5 0 010 1h-5A.5.5 0 015 13.5z',
  ),
  verify: iconPath(
    'M10 2a8 8 0 100 16 8 8 0 000-16zm3.53 6.47a.75.75 0 00-1.06-1.06L9 10.88 7.53 9.41a.75.75 0 10-1.06 1.06l2 2a.75.75 0 001.06 0l4-4z',
  ),
  approve: iconPath(
    'M10 1.5l7.5 3v5.25c0 4.5-2.9 8.25-7.5 9.25-4.6-1-7.5-4.75-7.5-9.25V4.5L10 1.5zm3.03 6.03a.75.75 0 00-1.06-1.06L9 9.44 7.53 7.97a.75.75 0 10-1.06 1.06l2 2a.75.75 0 001.06 0l3.5-3.5z',
  ),
  live: iconPath(
    'M4 5a2 2 0 012-2h8a2 2 0 012 2v6a2 2 0 01-2 2H9.414l-2.707 2.707A1 1 0 015 15.293V13H6a2 2 0 01-2-2V5zm3.5 2.5a.75.75 0 000 1.5h5a.75.75 0 000-1.5h-5z',
  ),
  patients: iconPath(
    'M10 2a4 4 0 100 8 4 4 0 000-8zM3.5 16.5a6.5 6.5 0 0113 0 .75.75 0 01-.75.75h-11.5a.75.75 0 01-.75-.75z',
  ),
  dashboard: iconPath(
    'M3 4.5A1.5 1.5 0 014.5 3h3A1.5 1.5 0 019 4.5v3A1.5 1.5 0 017.5 9h-3A1.5 1.5 0 013 7.5v-3zM11 4.5A1.5 1.5 0 0112.5 3h3A1.5 1.5 0 0117 4.5v3A1.5 1.5 0 0115.5 9h-3A1.5 1.5 0 0111 7.5v-3zM3 12.5A1.5 1.5 0 014.5 11h3A1.5 1.5 0 019 12.5v3A1.5 1.5 0 017.5 17h-3A1.5 1.5 0 013 15.5v-3zM11 12.5a1.5 1.5 0 011.5-1.5h3a1.5 1.5 0 011.5 1.5v3a1.5 1.5 0 01-1.5 1.5h-3a1.5 1.5 0 01-1.5-1.5v-3z',
  ),
  fhir: iconPath(
    'M4.5 3A1.5 1.5 0 003 4.5v11A1.5 1.5 0 004.5 17h11a1.5 1.5 0 001.5-1.5v-11A1.5 1.5 0 0015.5 3h-11zM6 7.25a.75.75 0 01.75-.75h6.5a.75.75 0 010 1.5h-6.5A.75.75 0 016 7.25zm0 3a.75.75 0 01.75-.75h6.5a.75.75 0 010 1.5h-6.5A.75.75 0 016 10.25zm0 3a.75.75 0 01.75-.75h3.5a.75.75 0 010 1.5h-3.5A.75.75 0 016 13.25z',
  ),
}

interface NavItem {
  label: string
  to: string
  icon: () => ReturnType<typeof h>
  show: boolean
}

const workspaceItems = computed<NavItem[]>(() =>
  [
    { label: 'Intake', to: '/intake', icon: icons.intake, show: auth.canIntake },
    { label: 'Cover Sheets', to: '/cover-sheets', icon: icons.cover, show: auth.canIntake },
    { label: 'Data Entry', to: '/entry', icon: icons.entry, show: auth.canEntry },
    { label: 'Verification', to: '/verification', icon: icons.verify, show: auth.canVerify },
    { label: 'Clinical Approval', to: '/approval', icon: icons.approve, show: auth.canApprove },
    { label: 'Live Capture', to: '/live-capture', icon: icons.live, show: auth.canLiveCapture },
    { label: 'Patient History', to: '/patients', icon: icons.patients, show: auth.isAuthenticated },
  ].filter((item) => item.show),
)

const adminItems = computed<NavItem[]>(() =>
  [
    { label: 'Queue Dashboard', to: '/dashboard', icon: icons.dashboard, show: auth.canSupervise },
    { label: 'FHIR Explorer', to: '/fhir-explorer', icon: icons.fhir, show: auth.canSupervise },
  ].filter((item) => item.show),
)

function isActive(path: string): boolean {
  if (path === '/patients') {
    return route.path === '/patients' || route.path.startsWith('/patients/')
  }
  if (path === '/entry') {
    return route.path === '/entry' || route.path.startsWith('/entry/')
  }
  if (path === '/verification') {
    return route.path === '/verification' || route.path.startsWith('/verification/')
  }
  if (path === '/approval') {
    return route.path === '/approval' || route.path.startsWith('/approval/')
  }
  return route.path === path || route.path.startsWith(`${path}/`)
}

function navItemClass(path: string): string {
  const base =
    'flex items-center gap-2.5 rounded-input text-sm transition-colors ' +
    (collapsed.value ? 'justify-center px-2 py-2.5' : 'px-2.5 py-2')
  if (isActive(path)) {
    return `${base} bg-primary-600 text-white font-medium`
  }
  return `${base} text-white/75 hover:bg-white/10 hover:text-white`
}
</script>
