<template>
  <v-app>
    <v-navigation-drawer v-model="drawer" app width="280">
      <!-- Logo Section -->
      <v-list-item class="pa-4 text-center">
        <v-img 
          src="/MONACOUSA-Flags_376x376.png" 
          width="80" 
          height="80"
          class="mx-auto mb-2" 
        />
        <div class="text-h6 font-weight-bold" style="color: #dc2626;">
          MonacoUSA Portal
        </div>
        <div class="text-caption text-medium-emphasis">Board Portal</div>
      </v-list-item>
      
      <v-divider />
      
      <!-- Navigation Menu -->
      <v-list nav density="comfortable">
        <!-- Board Overview -->
        <v-list-item 
          to="/board/dashboard" 
          prepend-icon="mdi-view-dashboard"
          title="Board Dashboard"
          value="dashboard"
        />

        <!-- Member Management -->
        <v-list-group value="members">
          <template v-slot:activator="{ props }">
            <v-list-item
              v-bind="props"
              prepend-icon="mdi-account-group"
              title="Members"
            />
          </template>
          
          <v-list-item 
            to="/board/members" 
            title="Member Directory"
            value="member-list"
          />
          <v-list-item 
            to="/board/members/dues" 
            title="Dues Management"
            value="dues"
          />
          <v-list-item 
            to="/board/members/applications" 
            title="Applications"
            value="applications"
          >
            <template v-slot:append>
              <v-badge 
                :content="pendingApplications" 
                :value="pendingApplications > 0"
                color="error"
              />
            </template>
          </v-list-item>
        </v-list-group>

        <!-- Events & Meetings -->
        <v-list-group value="events">
          <template v-slot:activator="{ props }">
            <v-list-item
              v-bind="props"
              prepend-icon="mdi-calendar"
              title="Events & Meetings"
            />
          </template>
          
          <v-list-item 
            to="/board/events" 
            title="All Events"
            value="events"
          />
          <v-list-item 
            to="/board/meetings" 
            title="Board Meetings"
            value="meetings"
          />
          <v-list-item 
            to="/board/meetings/minutes" 
            title="Meeting Minutes"
            value="minutes"
          />
        </v-list-group>

        <!-- Reports & Analytics -->
        <v-list-item 
          to="/board/reports" 
          prepend-icon="mdi-chart-box"
          title="Reports & Analytics"
          value="reports"
        />

        <!-- Governance -->
        <v-list-item 
          to="/board/governance" 
          prepend-icon="mdi-gavel"
          title="Governance"
          value="governance"
        />

        <!-- Communications -->
        <v-list-item 
          to="/board/communications" 
          prepend-icon="mdi-email-newsletter"
          title="Communications"
          value="communications"
        />

        <v-divider class="my-2" />
        
        <!-- Member Section Access -->
        <v-list-subheader>Member Portal</v-list-subheader>
        <v-list-item 
          to="/member/dashboard" 
          prepend-icon="mdi-account"
          title="Member View"
          value="member-view"
        />
      </v-list>
      
      <!-- Footer -->
      <template v-slot:append>
        <div class="pa-4">
          <v-card 
            variant="tonal" 
            color="primary"
            class="text-center pa-3"
          >
            <v-icon size="small" class="mb-1">mdi-shield-account</v-icon>
            <div class="text-caption font-weight-bold">BOARD ACCESS</div>
          </v-card>
        </div>
      </template>
    </v-navigation-drawer>
    
    <v-app-bar app elevation="0" flat>
      <!-- Custom gradient background -->
      <template v-slot:extension>
        <div class="board-header-gradient"></div>
      </template>
      
      <!-- Navigation Toggle -->
      <v-btn
        icon
        @click="drawer = !drawer"
        class="mr-2"
        color="white"
      >
        <v-icon>mdi-menu</v-icon>
      </v-btn>
      
      <v-toolbar-title class="text-white font-weight-bold">
        Board Portal
      </v-toolbar-title>
      
      <v-spacer />

      <!-- Quick Actions -->
      <v-btn 
        icon 
        color="white"
        @click="toggleSearch"
      >
        <v-icon>mdi-magnify</v-icon>
      </v-btn>

      <v-btn icon color="white">
        <v-badge 
          :content="notifications" 
          :value="notifications > 0"
          color="error"
        >
          <v-icon>mdi-bell</v-icon>
        </v-badge>
      </v-btn>
      
      <!-- User Menu -->
      <v-menu offset-y>
        <template v-slot:activator="{ props }">
          <v-btn icon v-bind="props" color="white">
            <ProfileAvatar 
              :member-id="memberData?.member_id"
              :member-name="user?.name"
              :first-name="user?.firstName || memberData?.first_name"
              :last-name="user?.lastName || memberData?.last_name"
              size="small"
              :lazy="false"
              show-border
            />
          </v-btn>
        </template>
        
        <v-list min-width="250">
          <v-list-item>
            <v-list-item-title class="font-weight-bold">
              {{ user?.name || 'Board Member' }}
            </v-list-item-title>
            <v-list-item-subtitle>
              {{ user?.email }}
            </v-list-item-subtitle>
          </v-list-item>
          
          <v-list-item>
            <v-chip 
              color="primary" 
              size="x-small" 
              variant="flat"
            >
              BOARD MEMBER
            </v-chip>
          </v-list-item>
          
          <v-divider class="my-2" />
          
          <v-list-item to="/board/profile">
            <template v-slot:prepend>
              <v-icon>mdi-account</v-icon>
            </template>
            <v-list-item-title>Board Profile</v-list-item-title>
          </v-list-item>
          
          <v-list-item to="/member/dashboard">
            <template v-slot:prepend>
              <v-icon>mdi-account-switch</v-icon>
            </template>
            <v-list-item-title>Member Portal</v-list-item-title>
          </v-list-item>
          
          <v-list-item to="/board/settings">
            <template v-slot:prepend>
              <v-icon>mdi-cog</v-icon>
            </template>
            <v-list-item-title>Settings</v-list-item-title>
          </v-list-item>
          
          <v-divider class="my-2" />
          
          <v-list-item @click="handleLogout" class="text-error">
            <template v-slot:prepend>
              <v-icon color="error">mdi-logout</v-icon>
            </template>
            <v-list-item-title>Logout</v-list-item-title>
          </v-list-item>
        </v-list>
      </v-menu>
    </v-app-bar>

    <!-- Search Overlay -->
    <v-dialog v-model="searchOpen" max-width="600" persistent>
      <v-card>
        <v-card-title class="d-flex align-center">
          <v-icon class="mr-2">mdi-magnify</v-icon>
          Search Members
          <v-spacer />
          <v-btn icon @click="searchOpen = false">
            <v-icon>mdi-close</v-icon>
          </v-btn>
        </v-card-title>
        <v-card-text>
          <v-text-field
            v-model="searchQuery"
            label="Search by name, email, or member ID"
            prepend-inner-icon="mdi-magnify"
            variant="outlined"
            autofocus
            @keyup.enter="performSearch"
          />
        </v-card-text>
      </v-card>
    </v-dialog>
    
    <v-main>
      <v-container fluid class="pa-6">
        <slot />
      </v-container>
    </v-main>
  </v-app>
</template>

<script setup lang="ts">
import type { Member } from '~/utils/types';

const { user, logout } = useAuth();
const drawer = ref(true);
const notifications = ref(0);
const pendingApplications = ref(0);
const searchOpen = ref(false);
const searchQuery = ref('');

// Fetch member data
const { data: sessionData } = await useFetch<{ success: boolean; member: Member | null }>('/api/auth/session', { 
  server: false
});

const memberData = computed<Member | null>(() => sessionData.value?.member || null);

// Load board-specific notifications
onMounted(async () => {
  try {
    const [notificationsRes, applicationsRes] = await Promise.all([
      $fetch('/api/board/notifications/count'),
      $fetch('/api/board/applications/pending/count')
    ]);
    
    notifications.value = notificationsRes?.data?.count || 0;
    pendingApplications.value = applicationsRes?.data?.count || 0;
  } catch (error) {
    console.error('Error fetching board data:', error);
  }
});

const toggleSearch = () => {
  searchOpen.value = true;
};

const performSearch = () => {
  if (searchQuery.value) {
    navigateTo(`/board/members?search=${encodeURIComponent(searchQuery.value)}`);
    searchOpen.value = false;
    searchQuery.value = '';
  }
};

const handleLogout = async () => {
  await logout();
};

// Responsive drawer behavior
const { width } = useDisplay();
watch(width, (newWidth) => {
  drawer.value = newWidth >= 1024;
}, { immediate: true });
</script>

<style scoped>
.board-header-gradient {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, #dc2626 0%, #7c2d12 100%);
  z-index: -1;
}

.v-navigation-drawer {
  background: linear-gradient(180deg, #ffffff 0%, #fef2f2 100%);
  border-right: 1px solid rgba(220, 38, 38, 0.1);
}

.v-list-item {
  border-radius: 12px;
  margin: 4px 12px;
  transition: all 0.2s ease;
}

.v-list-item:hover {
  background-color: rgba(220, 38, 38, 0.04);
}

.v-list-item--active {
  background: linear-gradient(135deg, rgba(220, 38, 38, 0.15) 0%, rgba(220, 38, 38, 0.08) 100%) !important;
  color: #dc2626 !important;
  border-left: 3px solid #dc2626;
}

.v-list-item--active .v-icon {
  color: #dc2626 !important;
}

.v-list-group__items .v-list-item {
  padding-left: 52px !important;
}

.v-list-subheader {
  color: #dc2626 !important;
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.v-app-bar {
  background: transparent !important;
}

.v-main {
  background: linear-gradient(180deg, #fafafa 0%, #f5f5f5 100%);
  min-height: 100vh;
}
</style>