<div class="chat-container">
  <!-- Main Chat Layout -->
  <div class="chat-layout">
    <!-- Main Chat Area -->
    <main class="chat-main" *ngIf="selectedConversation">
      <!-- Chat Header -->
      <header class="chat-header">
        <div class="chat-header-info">
          <div class="chat-user-avatar">
            <img 
              *ngIf="selectedConversation.otherUserAvatarUrl"
              [src]="userService.getAvatarUrl(selectedConversation.otherUserAvatarUrl)"
              [alt]="selectedConversation.otherUserName"
              (error)="onImageError($event)">
            <div class="avatar-fallback" 
                 [style.display]="!selectedConversation.otherUserAvatarUrl ? 'flex' : 'none'">
              {{ selectedConversation.otherUserName.charAt(0) || 'U' }}
            </div>
            <div class="online-indicator" 
                 *ngIf="selectedConversation.isOnline && selectedConversation.otherUserStatus === 'ONLINE'"
                 [title]="'Last seen ' + getLastSeenTime(selectedConversation.lastSeen)"></div>
            <div class="status-badge" 
                 *ngIf="selectedConversation.otherUserStatus === 'BUSY'"
                 title="Busy">
              <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor">
                <circle cx="12" cy="12" r="10"></circle>
              </svg>
            </div>
            <div class="status-badge offline-badge" 
                 *ngIf="!selectedConversation.isOnline || selectedConversation.otherUserStatus === 'OFFLINE'"
                 title="Offline">
              <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor">
                <circle cx="12" cy="12" r="10"></circle>
              </svg>
            </div>
          </div>
          <div class="chat-user-info">
            <div class="chat-user-name">{{ selectedConversation.otherUserName }}</div>
            <div class="chat-user-status">
              <span *ngIf="selectedConversation.isOnline && selectedConversation.otherUserStatus === 'ONLINE'">Online</span>
              <span *ngIf="selectedConversation.otherUserStatus === 'BUSY'">Busy</span>
              <span *ngIf="!selectedConversation.isOnline || selectedConversation.otherUserStatus === 'OFFLINE'">
                Last seen {{ getLastSeenTime(selectedConversation.lastSeen) }}
              </span>
            </div>
          </div>
        </div>
        <div class="chat-header-actions">
          <!-- Status Badge Selector -->
          <div class="status-selector">
            <button 
              class="status-badge-button"
              (click)="showStatusMenu = !showStatusMenu"
              title="Change Status"
              aria-label="Change Status">
              <div class="status-badge-indicator" 
                   [class.status-online]="currentUserStatus === 'ONLINE'"
                   [class.status-busy]="currentUserStatus === 'BUSY'"
                   [class.status-offline]="currentUserStatus === 'OFFLINE'">
                <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor">
                  <circle cx="12" cy="12" r="10"></circle>
                </svg>
              </div>
              <span class="status-label">{{ getStatusLabel(currentUserStatus) }}</span>
            </button>
            <div class="status-menu-dropdown" *ngIf="showStatusMenu" (click)="$event.stopPropagation()">
              <button 
                class="status-menu-item"
                [class.active]="currentUserStatus === 'ONLINE'"
                (click)="setUserStatus('ONLINE')">
                <div class="status-menu-indicator status-online">
                  <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor">
                    <circle cx="12" cy="12" r="10"></circle>
                  </svg>
                </div>
                <span>Online</span>
                <svg *ngIf="currentUserStatus === 'ONLINE'" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <path d="M20 6L9 17l-5-5"></path>
                </svg>
              </button>
              <button 
                class="status-menu-item"
                [class.active]="currentUserStatus === 'BUSY'"
                (click)="setUserStatus('BUSY')">
                <div class="status-menu-indicator status-busy">
                  <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor">
                    <circle cx="12" cy="12" r="10"></circle>
                  </svg>
                </div>
                <span>Busy</span>
                <svg *ngIf="currentUserStatus === 'BUSY'" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <path d="M20 6L9 17l-5-5"></path>
                </svg>
              </button>
              <button 
                class="status-menu-item"
                [class.active]="currentUserStatus === 'OFFLINE'"
                (click)="setUserStatus('OFFLINE')">
                <div class="status-menu-indicator status-offline">
                  <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor">
                    <circle cx="12" cy="12" r="10"></circle>
                  </svg>
                </div>
                <span>Offline</span>
                <svg *ngIf="currentUserStatus === 'OFFLINE'" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <path d="M20 6L9 17l-5-5"></path>
                </svg>
              </button>
            </div>
          </div>
          <button 
            class="icon-button call-button"
            (click)="startAudioCall()"
            title="Audio Call"
            aria-label="Start Audio Call">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path>
            </svg>
          </button>
          <button 
            class="icon-button call-button"
            (click)="startVideoCall()"
            title="Video Call"
            aria-label="Start Video Call">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <path d="M23 7l-7 5 7 5V7z"></path>
              <rect x="1" y="5" width="15" height="14" rx="2" ry="2"></rect>
            </svg>
          </button>
          <div class="more-menu">
            <button 
              class="icon-button more-button"
              (click)="showMoreMenu = !showMoreMenu"
              title="More Options"
              aria-label="More Options">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <circle cx="12" cy="12" r="1"></circle>
                <circle cx="19" cy="12" r="1"></circle>
                <circle cx="5" cy="12" r="1"></circle>
              </svg>
            </button>
            <div class="more-menu-dropdown" *ngIf="showMoreMenu">
              <button 
                class="more-menu-item"
                (click)="blockUser(); showMoreMenu = false"
                *ngIf="!isUserBlocked">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <path d="M18 6L6 18M6 6l12 12"></path>
                </svg>
                <span>Block User</span>
              </button>
              <button 
                class="more-menu-item"
                (click)="unblockSelectedUser(); showMoreMenu = false"
                *ngIf="isUserBlocked">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <path d="M9 11l3 3L22 4M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path>
                </svg>
                <span>Unblock User</span>
              </button>
              <button 
                class="more-menu-item danger"
                (click)="deleteConversation(); showMoreMenu = false">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <polyline points="3 6 5 6 21 6"></polyline>
                  <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
                </svg>
                <span>Delete Conversation</span>
              </button>
            </div>
          </div>
        </div>
      </header>

      <!-- Messages Area -->
      <div class="messages-container" #messagesContainer>
        <div class="messages-empty" *ngIf="messages.length === 0">
          <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
            <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
          </svg>
          <p>No messages yet</p>
          <p class="empty-subtitle">Start the conversation by sending a message</p>
        </div>
        <div class="messages-list" *ngIf="messages.length > 0">
          <div 
            class="message-wrapper"
            *ngFor="let message of messages; trackBy: trackByMessageId"
            [class.message-sent]="isMyMessage(message)"
            [class.message-received]="!isMyMessage(message)">
            <div class="message-bubble">
              <div class="message-content">{{ message.content }}</div>
              <div class="message-footer">
                <span class="message-time">{{ getMessageTime(message.createdAt) }}</span>
                <svg 
                  *ngIf="isMyMessage(message)"
                  class="read-indicator"
                  [class.read]="message.isRead"
                  width="16" 
                  height="16" 
                  viewBox="0 0 24 24" 
                  fill="none" 
                  stroke="currentColor" 
                  stroke-width="2">
                  <path d="M20 6L9 17l-5-5" *ngIf="message.isRead"></path>
                  <path d="M9 12l2 2 4-4" *ngIf="!message.isRead"></path>
                </svg>
              </div>
              <button 
                class="message-actions-button"
                (click)="showMessageActions = message.id"
                *ngIf="isMyMessage(message) && message.id"
                title="Message Options">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <circle cx="12" cy="12" r="1"></circle>
                  <circle cx="12" cy="5" r="1"></circle>
                  <circle cx="12" cy="19" r="1"></circle>
                </svg>
              </button>
              <div class="message-actions-menu" *ngIf="showMessageActions === message.id">
                <button 
                  class="message-action-item danger"
                  (click)="deleteMessage(message); showMessageActions = null">
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <polyline points="3 6 5 6 21 6"></polyline>
                    <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
                  </svg>
                  <span>Delete</span>
                </button>
              </div>
            </div>
          </div>
          
          <!-- Typing Indicator -->
          <div class="typing-indicator" *ngIf="isOtherUserTyping">
            <div class="typing-dots">
              <span></span>
              <span></span>
              <span></span>
            </div>
            <span class="typing-text">{{ typingUserName }} is typing...</span>
          </div>
        </div>
      </div>

      <!-- Message Input Area -->
      <div class="message-input-area" *ngIf="!isUserBlocked">
        <form class="message-form" (ngSubmit)="sendMessage()">
          <div class="input-wrapper">
            <textarea 
              class="message-input"
              [(ngModel)]="newMessage"
              (input)="onMessageInput()"
              (keydown)="onMessageKeyDown($event)"
              placeholder="Type a message..."
              rows="1"
              [disabled]="!selectedConversation"
              name="messageInput"></textarea>
            <button 
              type="submit"
              class="send-button"
              [disabled]="!newMessage.trim() || !selectedConversation"
              title="Send Message"
              aria-label="Send Message">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <line x1="22" y1="2" x2="11" y2="13"></line>
                <polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
              </svg>
            </button>
          </div>
        </form>
      </div>
      <div class="blocked-notice" *ngIf="isUserBlocked">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M18 6L6 18M6 6l12 12"></path>
        </svg>
        <p>You have blocked this user. Unblock them to send messages.</p>
        <button class="unblock-action-button" (click)="unblockSelectedUser()">
          Unblock User
        </button>
      </div>
    </main>

    <!-- Empty State - No Conversation Selected -->
    <div class="chat-empty" *ngIf="!selectedConversation">
      <div class="empty-content">
        <svg width="96" height="96" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
          <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
        </svg>
        <h2>No conversation selected</h2>
        <p>Start a conversation to begin messaging</p>
      </div>
    </div>
  </div>

  <!-- Delete Confirmation Modal -->
  <div class="modal-overlay" *ngIf="showDeleteModal" (click)="closeDeleteModal()">
    <div class="modal-content" (click)="$event.stopPropagation()">
      <div class="modal-header">
        <h3 class="modal-title">{{ getDeleteModalTitle() }}</h3>
        <button class="modal-close" (click)="closeDeleteModal()">
          <svg width="24" height="24" 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="modal-body">
        <p>{{ getDeleteModalMessage() }}</p>
      </div>
      <div class="modal-footer">
        <button class="modal-button secondary" (click)="closeDeleteModal()">Cancel</button>
        <button class="modal-button primary danger" (click)="confirmDelete()">Delete</button>
      </div>
    </div>
  </div>
</div>

