<!-- Skip to main content - GIGW 3.0 Accessibility -->
<a href="#main-content" class="skip-link">Skip to main content</a>

<div class="app-shell">
  <!-- Sidebar -->
  <aside
    class="sidebar"
    [class.sidebar-collapsed]="!sidenavOpened()"
    role="navigation"
    aria-label="Main navigation"
  >
    <!-- Logo Section -->
    <div class="sidebar-header">
      <div class="logo-section">
        <div class="emblem-container">
          <img
            src="assets/images/goa-emblem.svg"
            alt="Government of Goa Emblem"
            class="goa-emblem"
            onerror="this.style.display='none'"
          />
          <div class="emblem-fallback" *ngIf="!emblemLoaded">
            <mat-icon>account_balance</mat-icon>
          </div>
        </div>
        @if (sidenavOpened()) {
          <div class="logo-text">
            <span class="govt-text">Government of Goa</span>
            <span class="platform-text">Blockchain e-Licensing</span>
          </div>
        }
      </div>
    </div>

    <!-- Department Info Banner (for department users) -->
    @if (userType() === 'DEPARTMENT' && (currentUser | async); as user) {
      <div class="department-info-banner" [class.collapsed]="!sidenavOpened()">
        @if (sidenavOpened()) {
          <div class="dept-icon">
            <mat-icon>business</mat-icon>
          </div>
          <div class="dept-details">
            <span class="dept-label">Department Portal</span>
            <span class="dept-name">{{ departmentName() || user.name }}</span>
          </div>
        } @else {
          <div class="dept-icon-compact" [matTooltip]="departmentName() || user.name" matTooltipPosition="right">
            <mat-icon>business</mat-icon>
          </div>
        }
      </div>
    }

    <!-- Navigation Links -->
    <nav class="sidebar-nav">
      <div class="nav-section">
        @if (sidenavOpened()) {
          <span class="nav-section-title">Main Menu</span>
        }
        @for (item of visibleNavItems(); track item.route) {
          <a
            class="nav-item"
            [routerLink]="item.route"
            routerLinkActive="active"
            [routerLinkActiveOptions]="{ exact: item.route === '/dashboard' }"
            [attr.aria-label]="item.label"
            [matTooltip]="!sidenavOpened() ? item.label : ''"
            matTooltipPosition="right"
          >
            <div class="nav-icon">
              <mat-icon>{{ item.icon }}</mat-icon>
            </div>
            @if (sidenavOpened()) {
              <span class="nav-label">{{ item.label }}</span>
            }
            @if (item.badge && item.badge() > 0) {
              <span class="nav-badge" [class.pulse]="item.badge() > 0">
                {{ item.badge() }}
              </span>
            }
          </a>
        }
      </div>

      @if (userType() === 'ADMIN') {
        <div class="nav-section">
          @if (sidenavOpened()) {
            <span class="nav-section-title">Administration</span>
          }
          <a
            class="nav-item"
            routerLink="/admin"
            routerLinkActive="active"
            aria-label="Admin Portal - Platform administration"
            [matTooltip]="!sidenavOpened() ? 'Admin Portal' : ''"
            matTooltipPosition="right"
          >
            <div class="nav-icon">
              <mat-icon aria-hidden="true">admin_panel_settings</mat-icon>
            </div>
            @if (sidenavOpened()) {
              <span class="nav-label">Admin Portal</span>
            }
          </a>
        </div>
      }
    </nav>

    <!-- Sidebar Footer -->
    <div class="sidebar-footer">
      @if (sidenavOpened()) {
        <div class="blockchain-status" role="status" aria-live="polite" aria-label="Blockchain network status: Connected">
          <div class="status-indicator online" aria-hidden="true"></div>
          <div class="status-text">
            <span class="status-label">Blockchain</span>
            <span class="status-value">Connected</span>
          </div>
        </div>
      } @else {
        <div class="blockchain-status-compact" role="status" aria-label="Blockchain connected">
          <div class="status-indicator online" aria-hidden="true"></div>
        </div>
      }
    </div>
  </aside>

  <!-- Main Content Area -->
  <div class="main-wrapper">
    <!-- Top Header - DBIM Compliant -->
    <header class="top-header" role="banner">
      <div class="header-left">
        <button
          mat-icon-button
          (click)="toggleSidenav()"
          aria-label="Toggle navigation menu"
          class="menu-toggle"
        >
          <mat-icon>{{ sidenavOpened() ? 'menu_open' : 'menu' }}</mat-icon>
        </button>

        <!-- Breadcrumb - GIGW 3.0 Required -->
        <nav class="breadcrumb hide-mobile" aria-label="Breadcrumb navigation">
          <ol class="breadcrumb-list" role="list">
            <li class="breadcrumb-item">
              <a routerLink="/dashboard" aria-label="Go to Dashboard">Home</a>
            </li>
            <!-- Additional breadcrumb items would be dynamically added based on route -->
          </ol>
        </nav>
      </div>

      <div class="header-right">
        <!-- Language Toggle - DBIM Required -->
        <div class="language-toggle" role="group" aria-label="Language selection">
          <button
            mat-button
            class="lang-btn"
            [class.active]="currentLanguage() === 'en'"
            (click)="setLanguage('en')"
            aria-label="Switch to English"
          >
            A
          </button>
          <span class="lang-divider">|</span>
          <button
            mat-button
            class="lang-btn"
            [class.active]="currentLanguage() === 'hi'"
            (click)="setLanguage('hi')"
            aria-label="Switch to Hindi"
          >
            &#2309;
          </button>
        </div>
        <!-- Search - GIGW 3.0 Required -->
        <button
          mat-icon-button
          class="header-action hide-mobile"
          aria-label="Search the platform"
          title="Search"
        >
          <mat-icon>search</mat-icon>
        </button>

        <!-- Notifications -->
        <button
          mat-icon-button
          class="header-action"
          [matMenuTriggerFor]="notificationMenu"
          [attr.aria-label]="'Notifications, ' + unreadNotifications() + ' unread'"
          title="Notifications"
        >
          <mat-icon
            [matBadge]="unreadNotifications()"
            matBadgeColor="warn"
            matBadgeSize="small"
            [attr.aria-hidden]="true"
          >
            notifications
          </mat-icon>
        </button>

        <mat-menu #notificationMenu="matMenu" class="notification-menu">
          <div class="notification-header">
            <span class="notification-title">Notifications</span>
            <button mat-button color="primary" class="mark-read-btn">Mark all read</button>
          </div>
          <mat-divider></mat-divider>
          <div class="notification-list">
            <div class="notification-item unread">
              <div class="notification-icon success">
                <mat-icon>check_circle</mat-icon>
              </div>
              <div class="notification-content">
                <span class="notification-text">Request #1234 approved</span>
                <span class="notification-time">2 minutes ago</span>
              </div>
            </div>
            <div class="notification-item">
              <div class="notification-icon info">
                <mat-icon>info</mat-icon>
              </div>
              <div class="notification-content">
                <span class="notification-text">New document uploaded</span>
                <span class="notification-time">1 hour ago</span>
              </div>
            </div>
          </div>
          <mat-divider></mat-divider>
          <button mat-menu-item class="view-all-btn">
            View all notifications
          </button>
        </mat-menu>

        <!-- User Profile -->
        <div class="user-profile">
          <button
            mat-button
            [matMenuTriggerFor]="userMenu"
            class="user-button"
            aria-label="User menu"
          >
            <div class="user-avatar" [style.background]="getAvatarColor()">
              {{ getUserInitials() }}
            </div>
            @if (currentUser | async; as user) {
              <div class="user-info hide-mobile">
                <span class="user-name">{{ user.name }}</span>
                <span class="user-role">{{ formatRole(user.type) }}</span>
              </div>
            }
            <mat-icon class="dropdown-arrow hide-mobile">expand_more</mat-icon>
          </button>

          <mat-menu #userMenu="matMenu" class="user-menu">
            @if (currentUser | async; as user) {
              <div class="user-menu-header">
                <div class="user-avatar-large" [style.background]="getAvatarColor()">
                  {{ getUserInitials() }}
                </div>
                <div class="user-details">
                  <span class="user-name">{{ user.name }}</span>
                  <span class="user-email">{{ user.email || (user.departmentCode ? user.departmentCode + '@goa.gov.in' : 'user@goa.gov.in') }}</span>
                  <span class="user-badge">{{ formatRole(user.type) }}</span>
                </div>
              </div>
              <mat-divider></mat-divider>
            }
            <button mat-menu-item>
              <mat-icon>person</mat-icon>
              <span>My Profile</span>
            </button>
            <button mat-menu-item>
              <mat-icon>settings</mat-icon>
              <span>Settings</span>
            </button>
            @if (userType() === 'DEPARTMENT') {
              <button mat-menu-item routerLink="/department/wallet">
                <mat-icon>account_balance_wallet</mat-icon>
                <span>My Wallet</span>
              </button>
            }
            <mat-divider></mat-divider>
            <button mat-menu-item (click)="logout()" class="logout-btn">
              <mat-icon>logout</mat-icon>
              <span>Logout</span>
            </button>
          </mat-menu>
        </div>
      </div>
    </header>

    <!-- Main Content -->
    <main id="main-content" class="main-content" role="main">
      <router-outlet></router-outlet>
    </main>

    <!-- Footer - DBIM & GIGW 3.0 Compliant -->
    <footer class="main-footer" role="contentinfo">
      <div class="footer-content">
        <div class="footer-left">
          <span class="footer-text">
            &copy; {{ currentYear }} Government of Goa, India. All rights reserved.
          </span>
          <span class="footer-divider hide-mobile">|</span>
          <span class="footer-text hide-mobile">
            Last Updated: {{ lastUpdated }}
          </span>
        </div>
        <div class="footer-right">
          <a href="/policies" class="footer-link" aria-label="Website Policies">Website Policies</a>
          <a href="/terms" class="footer-link" aria-label="Terms and Conditions">Terms &amp; Conditions</a>
          <a href="/accessibility" class="footer-link" aria-label="Accessibility Statement">Accessibility</a>
          <a href="/contact" class="footer-link" aria-label="Contact Information">Contact</a>
          <a href="/help" class="footer-link" aria-label="Help and Support">Help</a>
        </div>
      </div>
    </footer>
  </div>
</div>
