<template>
  <div class="dashboard-container">
    <!-- Sidebar Navigation -->
    <nav class="sidebar" :class="{ 'open': sidebarOpen }">
      <div class="sidebar-header">
        <a href="#" class="sidebar-logo">
          <div class="logo-icon">
            <i class="fas fa-stethoscope"></i>
          </div>
          <span class="logo-text">Modern Medics</span>
        </a>
      </div>
      
      <div class="sidebar-nav">
        <router-link 
          v-for="item in navigationItems" 
          :key="item.name"
          :to="item.route" 
          class="sidebar-nav-item"
          :class="{ 'active': $route.path === item.route }"
        >
          <i :class="item.icon"></i>
          <span>{{ item.name }}</span>
        </router-link>
      </div>
    </nav>

    <!-- Main Content Area -->
    <main class="main-content">
      <!-- Header -->
      <header class="dashboard-header">
        <div class="header-title">
          <h1>{{ headerTitle }}</h1>
          <div class="header-subtitle">{{ headerSubtitle }}</div>
        </div>
        
        <div class="header-user">
          <div class="user-info">
            <div class="user-name">{{ user.name }}</div>
            <div class="user-role">{{ userRoleLabel }}</div>
          </div>
        </div>
      </header>

      <!-- Dashboard Content -->
      <div class="dashboard-content">
        <router-view />
      </div>
    </main>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()
const sidebarOpen = ref(false)

// User data from Laravel
const user = ref(window.dashboardUser || {})
const userRole = ref(window.userRole || 'patient')

// Navigation items based on user role
const navigationItems = computed(() => {
  const baseItems = [
    { name: 'Dashboard', route: `/${userRole.value}-dashboard`, icon: 'fas fa-chart-pie' }
  ]
  
  if (userRole.value === 'doctor') {
    return [
      ...baseItems,
      { name: 'Appointments', route: '/appointments', icon: 'fas fa-calendar-check' },
      { name: 'Medicine Search', route: '/medicine-search', icon: 'fas fa-search' },
      { name: 'Pending Requests', route: '/pending-requests', icon: 'fas fa-clock' },
      { name: 'Patients', route: '/patients', icon: 'fas fa-user-injured' },
      { name: 'Staff Users', route: '/staff-users', icon: 'fas fa-users' },
      { name: 'Settings', route: '/settings', icon: 'fas fa-cog' }
    ]
  }
  
  // Add other role-specific navigation items here
  return baseItems
})

// Header content based on user role
const headerTitle = computed(() => {
  if (userRole.value === 'doctor') {
    return `DR. ${user.value.name?.toUpperCase() || 'DOCTOR'}`
  }
  return user.value.name || 'User'
})

const headerSubtitle = computed(() => {
  return 'Dashboard Overview'
})

const userRoleLabel = computed(() => {
  const roleLabels = {
    'doctor': 'Admin User (System)',
    'patient': 'Patient',
    'hospital_admin': 'Hospital Admin',
    'nurse': 'Nurse',
    'receptionist': 'Receptionist'
  }
  return roleLabels[userRole.value] || 'User'
})

onMounted(() => {
  // Any initialization logic
  console.log('Dashboard mounted for user:', user.value)
})
</script>

<style scoped>
/* Component-specific styles if needed */
</style>