<script setup>
import { useRoute } from 'vue-router'

const route = useRoute()

const links = [
  { to: '/ward', label: 'Virtual Ward', icon: 'ward' },
  { to: '/alerts', label: 'Alert Center', icon: 'alerts' },
  { to: '/feedback', label: 'Feedback Summary', icon: 'feedback' },
]

function linkClasses(path) {
  const active = route.path.startsWith(path)
  return active
    ? 'bg-blue-50 text-blue-700 dark:bg-blue-950/50 dark:text-blue-300'
    : 'text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-800'
}
</script>

<template>
  <aside class="hidden w-64 shrink-0 border-r border-gray-200 bg-white dark:border-gray-800 dark:bg-gray-900 lg:flex lg:flex-col">
    <div class="flex h-16 items-center px-8">
      <span class="text-lg font-bold text-gray-900 dark:text-gray-100">VigilCare</span>
    </div>
    <nav class="flex-1 px-4 py-4" aria-label="Main navigation">
      <ul class="space-y-2">
        <li v-for="link in links" :key="link.to">
          <RouterLink
            :to="link.to"
            class="flex items-center gap-4 rounded-lg px-4 py-2 text-sm font-medium transition duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
            :class="linkClasses(link.to)"
          >
            <svg
              v-if="link.icon === 'ward'"
              class="h-6 w-6 shrink-0"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
              aria-hidden="true"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M4 6h16M4 10h16M4 14h16M4 18h16"
              />
            </svg>
            <svg
              v-else-if="link.icon === 'alerts'"
              class="h-6 w-6 shrink-0"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
              aria-hidden="true"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"
              />
            </svg>
            <svg
              v-else
              class="h-6 w-6 shrink-0"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
              aria-hidden="true"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z"
              />
            </svg>
            {{ link.label }}
          </RouterLink>
        </li>
      </ul>
    </nav>
  </aside>
</template>
