<header class="dashboard-header">
  <div class="header-content">
    <div class="header-left">
      <div class="logo-section">
        <svg class="medical-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M12 2L2 7V10C2 16 6 21.4 12 22C18 21.4 22 16 22 10V7L12 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          <path d="M12 8V16M8 12H16" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
        <div class="header-text">
          <h1 class="dashboard-title">Patient Dashboard</h1>
          <p class="dashboard-subtitle">
            Welcome, {{ currentUser?.firstName }} {{ currentUser?.lastName }}
          </p>
        </div>
      </div>
    </div>

    <div class="header-right">
      <div class="notification-container">
        <button
          class="notification-button"
          (click)="onToggleNotifications()"
          [class.has-notifications]="notificationCount > 0"
          title="Notifications"
        >
          <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M18 8A6 6 0 0 0 6 8C6 9.65735 5.32843 11.2336 4.17157 12.4142C3.01472 13.5949 2 14.7712 2 16V17H22V16C22 14.7712 21.0147 13.5949 19.8579 12.4142C18.7011 11.2336 18 9.65735 18 8Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M9 21H15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M10 3C10 2.44772 10.4477 2 11 2H13C13.5523 2 14 2.44772 14 3V4H10V3Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
          <span class="notification-badge" *ngIf="notificationCount > 0">
            {{ notificationCount }}
          </span>
        </button>

        <div class="notification-dropdown" *ngIf="showNotifications">
          <div class="notification-header">
            <div>
              <h3>Notifications</h3>
              <p class="subtitle">Message and missed-call alerts curated for you</p>
            </div>
            <div class="header-actions">
              <button
                class="mark-all-read"
                *ngIf="notificationCount > 0"
                (click)="onMarkAllRead($event)"
              >
                Mark all read
              </button>
              <button
                class="delete-all"
                *ngIf="notifications.length > 0"
                (click)="onDeleteAll($event)"
                title="Delete all notifications"
              >
                <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M3 6H5H21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                  <path d="M8 6V4C8 3.46957 8.21071 2.96086 8.58579 2.58579C8.96086 2.21071 9.46957 2 10 2H14C14.5304 2 15.0391 2.21071 15.4142 2.58579C15.7893 2.96086 16 3.46957 16 4V6M19 6V20C19 20.5304 18.7893 21.0391 18.4142 21.4142C18.0391 21.7893 17.5304 22 17 22H7C6.46957 22 5.96086 21.7893 5.58579 21.4142C5.21071 21.0391 5 20.5304 5 20V6H19Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
              </button>
            </div>
          </div>

          <div class="notification-list">
            <div *ngIf="notifications.length === 0" class="no-notifications">
              <p>No notifications</p>
            </div>

            <div
              *ngFor="let notification of notifications"
              class="notification-item"
              [class.unread]="!notification.read"
              (click)="onNotificationClick(notification)"
            >
              <div class="notification-icon">
                <svg *ngIf="notification.type === 'message'" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M21 15C21 15.5304 20.7893 16.0391 20.4142 16.4142C20.0391 16.7893 19.5304 17 19 17H7L3 21V5C3 4.46957 3.21071 3.96086 3.58579 3.58579C3.96086 3.21071 4.46957 3 5 3H19C19.5304 3 20.0391 3.21071 20.4142 3.58579C20.7893 3.96086 21 4.46957 21 5V15Z" stroke="currentColor" stroke-width="2"/>
                </svg>
                <svg *ngIf="notification.type === 'missed-call'" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M22 16.92V19.92C22 20.6204 21.719 21.2922 21.219 21.7922C20.719 22.2922 20.0474 22.5734 19.347 22.5134C15.8482 22.2324 12.4895 21.0003 9.6 18.86C7.21358 17.0896 5.35036 14.7065 4.2 12C3.04964 9.29352 2.66265 6.44787 3.07 3.64C3.13826 2.94623 3.43566 2.29903 3.91368 1.80642C4.39171 1.31381 5.01885 1.00758 5.7 1H8.7C9.29674 0.994966 9.87908 1.16796 10.3813 1.49754C10.8835 1.82712 11.2839 2.29965 11.53 2.86L13.08 6.58C13.2833 7.06943 13.3459 7.60609 13.2612 8.12757C13.1765 8.64906 12.9484 9.13502 12.6 9.53L11 11.13C12.7613 13.3728 15.1272 15.2387 17.37 17L18.97 15.4C19.365 15.0516 19.851 14.8235 20.3724 14.7388C20.8939 14.6541 21.4306 14.7167 21.92 14.92L25.64 16.47C26.1928 16.7132 26.6677 17.1107 26.9989 17.6098C27.3301 18.1088 27.5035 18.6879 27.5 19.28L27.5 22.28C27.4913 22.9658 27.2056 23.6191 26.7058 24.1051C26.206 24.5912 25.5326 24.8734 24.83 24.89C22.8968 24.9587 20.9658 24.7498 19.1 24.27" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                  <path d="M2 2L22 22M22 2L2 22" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="0.8"/>
                </svg>
              </div>
              <div class="notification-content">
                <div class="notification-title">{{ notification.title }}</div>
                <div class="notification-message">{{ notification.message }}</div>
                <div class="notification-time">{{ getNotificationTime(notification.timestamp) }}</div>
              </div>
              <button
                class="notification-delete"
                (click)="onDeleteNotification(notification.id, $event)"
                title="Delete notification"
              >
                <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M18 6L6 18M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
              </button>
            </div>
          </div>
        </div>
      </div>

    <!-- Chat Controls -->
    <div class="chat-menu-container">
      <button
        class="chat-menu-button"
        (click)="onToggleChatMenu()"
        [class.active]="showChatMenu"
        [class.has-unread]="chatUnreadCount > 0"
        title="Messages"
      >
        <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M21 15C21 15.5304 20.7893 16.0391 20.4142 16.4142C20.0391 16.7893 19.5304 17 19 17H7L3 21V5C3 4.46957 3.21071 3.96086 3.58579 3.58579C3.96086 3.21071 4.46957 3 5 3H19C19.5304 3 20.0391 3.21071 20.4142 3.58579C20.7893 3.96086 21 4.46957 21 5V15Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
        <span class="chat-menu-badge" *ngIf="chatUnreadCount > 0">{{ chatUnreadCount }}</span>
      </button>

      <!-- Blocked Users Panel inside chat menu -->
      <div
        class="blocked-users-panel-dropdown"
        *ngIf="showBlockedUsers && showChatMenu"
        (click)="$event.stopPropagation()"
      >
        <div class="blocked-users-header-dropdown">
          <h3>Blocked Users</h3>
          <button class="close-blocked-users" (click)="onToggleBlockedUsers($event)">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <line x1="18" y1="6" x2="6" y2="18"></line>
              <line x1="6" y1="6" x2="18" y2="18"></line>
            </svg>
          </button>
        </div>

        <div class="blocked-users-content-dropdown">
          <div class="blocked-loading" *ngIf="isLoadingBlockedUsers">
            <p>Loading blocked users...</p>
          </div>
          <div class="blocked-users-list-dropdown" *ngIf="!isLoadingBlockedUsers">
            <div
              *ngFor="let user of blockedUsers"
              class="blocked-user-item-dropdown"
            >
              <div class="blocked-user-avatar-dropdown">
                <img
                  *ngIf="user.avatarUrl"
                  [src]="userService.getAvatarUrl(user.avatarUrl)"
                  [alt]="user.firstName + ' ' + user.lastName"
                  class="avatar-image"
                  (error)="onChatImageError($event)"
                />
                <div class="avatar-circle-dropdown" [style.display]="user.avatarUrl ? 'none' : 'flex'">
                  {{ user.firstName.charAt(0) }}{{ user.lastName.charAt(0) }}
                </div>
              </div>
              <div class="blocked-user-info-dropdown">
                <div class="blocked-user-name-dropdown">{{ user.firstName }} {{ user.lastName }}</div>
                <div class="blocked-user-details-dropdown">
                  <span *ngIf="user.specialization">{{ user.specialization }}</span>
                </div>
              </div>
              <button
                type="button"
                class="unblock-button-dropdown"
                (click)="onUnblockUser(user, $event)"
                title="Unblock user"
              >
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" pointer-events="none">
                  <path d="M18 6L6 18"></path>
                  <path d="M6 6l12 12"></path>
                </svg>
                <span>Unblock</span>
              </button>
            </div>
            <div class="no-blocked-users-dropdown" *ngIf="blockedUsers.length === 0 && !isLoadingBlockedUsers">
              <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" opacity="0.3">
                <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
                <circle cx="9" cy="7" r="4"></circle>
              </svg>
              <p>No blocked users</p>
              <span>You haven't blocked anyone yet</span>
            </div>
          </div>
        </div>
      </div>

      <!-- Chat Menu -->
      <div
        class="chat-menu-dropdown"
        *ngIf="showChatMenu && !showBlockedUsers"
        (click)="$event.stopPropagation()"
      >
        <div class="chat-menu-header">
          <h3>Messages</h3>
          <div class="chat-menu-header-actions">
            <button class="chat-menu-blocked-users" (click)="onToggleBlockedUsers($event)" title="Blocked Users">
              <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
                <circle cx="9" cy="7" r="4"></circle>
                <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
                <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
                <circle cx="18" cy="8" r="2.5"></circle>
                <line x1="16.5" y1="6.5" x2="19.5" y2="9.5"></line>
              </svg>
            </button>
            <button class="chat-menu-close" (click)="onToggleChatMenu()" title="Close">
              <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M18 6L6 18M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
              </svg>
            </button>
          </div>
        </div>

        <div class="chat-menu-search">
          <div class="search-input-container">
            <svg class="search-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M21 21L15 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
            <input
              type="text"
              class="search-input"
              placeholder="Search for people..."
              [value]="chatSearchQuery"
              (input)="onChatSearch($event)"
            />
            <button
              *ngIf="chatSearchQuery"
              class="search-clear"
              (click)="onClearChatSearch($event)"
              title="Clear search"
            >
              <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M18 6L6 18M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
              </svg>
            </button>
          </div>
        </div>

        <div class="conversation-list-dropdown">
          <div *ngIf="chatSearchQuery && chatSearchResults.length > 0" class="search-results-section">
            <div class="search-results-header">Search Results ({{ chatSearchResults.length }})</div>
            <div
              *ngFor="let user of chatSearchResults"
              class="conversation-item-dropdown"
              (click)="onOpenChatWithUser(user.userId)"
            >
              <div class="conversation-avatar-dropdown">
                <img
                  *ngIf="user.avatarUrl"
                  [src]="userService.getAvatarUrl(user.avatarUrl)"
                  [alt]="user.firstName + ' ' + user.lastName"
                  class="avatar-image"
                  (error)="onChatImageError($event)"
                />
                <div class="avatar-circle-dropdown" [style.display]="user.avatarUrl ? 'none' : 'flex'">
                  {{ user.firstName.charAt(0) }}{{ user.lastName.charAt(0) }}
                </div>
                <div
                  class="online-indicator-dropdown"
                  [class.online]="user.isOnline && user.status !== 'BUSY' && user.status !== 'OFFLINE'"
                  [class.offline]="!user.isOnline || user.status === 'OFFLINE'"
                  [class.busy]="user.status === 'BUSY'"
                  [title]="getStatusText(user.status)"
                ></div>
              </div>
              <div class="conversation-info-dropdown">
                <div class="conversation-name-dropdown">{{ user.firstName }} {{ user.lastName }}</div>
                <div class="conversation-preview-dropdown" *ngIf="user.specialization">{{ user.specialization }}</div>
              </div>
            </div>
          </div>

          <div class="conversations-section">
            <div
              class="conversations-header"
              *ngIf="chatSearchQuery && conversations && conversations.length > 0"
            >
              Conversations ({{ filteredConversations.length }})
            </div>
            <div
              *ngIf="(!chatSearchQuery && (!conversations || conversations.length === 0)) || (chatSearchQuery && filteredConversations.length === 0)"
              class="no-conversations"
            >
              <p>{{ chatSearchQuery ? 'No conversations found' : 'No conversations yet' }}</p>
              <p class="subtext">
                {{ chatSearchQuery ? 'Try a different search term' : 'Start a conversation to begin messaging' }}
              </p>
            </div>
            <div
              *ngIf="chatSearchQuery && chatSearchResults.length === 0 && filteredConversations.length === 0 && chatSearchQuery.length >= 2"
              class="no-conversations"
            >
              <p>No users found</p>
              <p class="subtext">Try searching with a different name</p>
            </div>

            <div
              *ngFor="let conversation of (chatSearchQuery ? filteredConversations : conversations)"
              class="conversation-item-dropdown"
              [class.active]="activeConversationId === conversation.otherUserId"
              (click)="onOpenChatConversation(conversation.otherUserId)"
            >
              <div class="conversation-avatar-dropdown">
                <img
                  *ngIf="conversation.otherUserAvatarUrl"
                  [src]="userService.getAvatarUrl(conversation.otherUserAvatarUrl)"
                  [alt]="conversation.otherUserName"
                  class="avatar-image"
                  (error)="onChatImageError($event)"
                />
                <div class="avatar-circle-dropdown" [style.display]="conversation.otherUserAvatarUrl ? 'none' : 'flex'">
                  {{ conversation.otherUserName.charAt(0) }}
                </div>
                <div
                  class="online-indicator-dropdown"
                  [class.online]="conversation.isOnline && conversation.otherUserStatus !== 'BUSY' && conversation.otherUserStatus !== 'OFFLINE'"
                  [class.offline]="!conversation.isOnline || conversation.otherUserStatus === 'OFFLINE'"
                  [class.busy]="conversation.otherUserStatus === 'BUSY'"
                  [title]="getStatusText(conversation.otherUserStatus)"
                ></div>
              </div>
              <div class="conversation-info-dropdown">
                <div class="conversation-name-dropdown">{{ conversation.otherUserName }}</div>
                <div class="conversation-preview-dropdown">
                  {{ conversation.lastMessage?.content || 'No messages yet' }}
                </div>
              </div>
              <div class="conversation-meta-dropdown">
                <div class="conversation-time-dropdown" *ngIf="conversation.lastMessage?.createdAt">
                  {{ getConversationTime(conversation.lastMessage!.createdAt) }}
                </div>
                <div class="conversation-unread-dropdown" *ngIf="conversation.unreadCount > 0">
                  {{ conversation.unreadCount }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Blocked Users Button -->
    <div class="blocked-users-container">
      <button
        class="blocked-users-button-header"
        (click)="onToggleBlockedUsers($event)"
        [class.active]="showBlockedUsers && !showChatMenu"
        title="Blocked Users"
      >
        <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
          <circle cx="9" cy="7" r="4"></circle>
          <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
          <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
          <circle cx="18" cy="8" r="2.5"></circle>
          <line x1="16.5" y1="6.5" x2="19.5" y2="9.5"></line>
        </svg>
      </button>

      <div
        class="blocked-users-panel-dropdown"
        *ngIf="showBlockedUsers && !showChatMenu"
        (click)="$event.stopPropagation()"
      >
        <div class="blocked-users-header-dropdown">
          <h3>Blocked Users</h3>
          <button class="close-blocked-users" (click)="onToggleBlockedUsers($event)">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <line x1="18" y1="6" x2="6" y2="18"></line>
              <line x1="6" y1="6" x2="18" y2="18"></line>
            </svg>
          </button>
        </div>

        <div class="blocked-users-content-dropdown">
          <div class="blocked-loading" *ngIf="isLoadingBlockedUsers">
            <p>Loading blocked users...</p>
          </div>
          <div class="blocked-users-list-dropdown" *ngIf="!isLoadingBlockedUsers">
            <div
              *ngFor="let user of blockedUsers"
              class="blocked-user-item-dropdown"
            >
              <div class="blocked-user-avatar-dropdown">
                <img
                  *ngIf="user.avatarUrl"
                  [src]="userService.getAvatarUrl(user.avatarUrl)"
                  [alt]="user.firstName + ' ' + user.lastName"
                  class="avatar-image"
                  (error)="onChatImageError($event)"
                />
                <div class="avatar-circle-dropdown" [style.display]="user.avatarUrl ? 'none' : 'flex'">
                  {{ user.firstName.charAt(0) }}{{ user.lastName.charAt(0) }}
                </div>
              </div>
              <div class="blocked-user-info-dropdown">
                <div class="blocked-user-name-dropdown">{{ user.firstName }} {{ user.lastName }}</div>
                <div class="blocked-user-details-dropdown">
                  <span *ngIf="user.specialization">{{ user.specialization }}</span>
                </div>
              </div>
              <button
                type="button"
                class="unblock-button-dropdown"
                (click)="onUnblockUser(user, $event)"
                title="Unblock user"
              >
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" pointer-events="none">
                  <path d="M18 6L6 18"></path>
                  <path d="M6 6l12 12"></path>
                </svg>
                <span>Unblock</span>
              </button>
            </div>
            <div class="no-blocked-users-dropdown" *ngIf="blockedUsers.length === 0 && !isLoadingBlockedUsers">
              <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" opacity="0.3">
                <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
                <circle cx="9" cy="7" r="4"></circle>
              </svg>
              <p>No blocked users</p>
              <span>You haven't blocked anyone yet</span>
            </div>
          </div>
        </div>
      </div>
    </div>

      <button class="refresh-button" (click)="onRefresh()" [disabled]="loading" title="Refresh">
        <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M1 4V10H7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          <path d="M23 20V14H17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          <path d="M20.49 9A9 9 0 0 0 5.64 5.64L1 10M23 14L18.36 18.36A9 9 0 0 1 3.51 15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
        <span>Refresh</span>
      </button>
      <button class="logout-button" (click)="onLogout()" title="Logout">
        <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M9 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V5C3 4.46957 3.21071 3.96086 3.58579 3.58579C3.96086 3.21071 4.46957 3 5 3H9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          <path d="M16 17L21 12L16 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          <path d="M21 12H9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
        <span>Logout</span>
      </button>
    </div>
  </div>
</header>

