<section class="live-page" [class.centered]="showPlayer">
  @if (!showPlayer) {
    @if (loadingStreams) {
      <p class="hint">Loading streams...</p>
    }

    @if (!loadingStreams && streams.length !== 0) {
      <app-stream-cards
        [streams]="streams"
        [streamTitles]="streamTitles"
        [streamThumbnails]="streamThumbnails"
        (streamSelected)="selectStream($event)"
        [isLive]="isStreamLive.bind(this)"
        [startTime]="getStreamStartTime.bind(this)"
      ></app-stream-cards>
    }
  }

  @if (showPlayer) {
    <header class="live-header">
      <h1>Live Streaming - {{ streamTitle }}</h1>
    </header>

    @if (!error) {
      <div class="live-content">
        <div class="player-column">
          <div class="player-shell">
            <video #nativeVideo controls playsinline></video>
          </div>
        </div>

        <aside class="chat-panel">
          <div class="chat-header">
            <div>
              <h2>Live Chat</h2>
              <p>{{ chatPresenceCount }} viewer<span *ngIf="chatPresenceCount !== 1">s</span> in chat</p>
            </div>

            <button class="chat-identity" type="button" (click)="reopenUsernamePrompt()">
              {{ chatUsername || 'Join chat' }}
            </button>
          </div>

          <div #chatMessagesContainer class="chat-messages" (scroll)="onChatScroll()">
            <div *ngIf="chatMessages.length === 0" class="chat-empty">
              No messages yet. Start the conversation.
            </div>

            <div *ngFor="let message of chatMessages" class="chat-message">
              <div class="chat-message-meta">
                <strong>{{ message.username }}</strong>
                <span>{{ message.createdAt | date: 'shortTime' }}</span>
              </div>
              <p>{{ message.text }}</p>
            </div>
          </div>

          <div *ngIf="chatError" class="chat-error">{{ chatError }}</div>

          <div *ngIf="!canSendChat" class="chat-hint">
            Join chat with your name to send messages. You can still watch and follow the conversation.
          </div>

          <form class="chat-compose" (ngSubmit)="sendChatMessage()">
            <input
              #chatMessageInput
              type="text"
              name="chatMessage"
              [(ngModel)]="chatMessage"
              maxlength="500"
              [placeholder]="canSendChat ? 'Write a message' : 'Join chat to start typing'"
              [disabled]="!canSendChat || showUsernamePrompt"
            />
            <div class="chat-emoji-picker" [class.chat-emoji-picker-open]="showEmojiPicker" [attr.aria-hidden]="!showEmojiPicker">
              <button
                *ngFor="let emoji of chatEmojiOptions"
                type="button"
                class="chat-emoji-option"
                (click)="addEmoji(emoji)"
              >
                {{ emoji }}
              </button>
            </div>
            <button
              type="button"
              class="chat-emoji-toggle"
              (click)="toggleEmojiPicker()"
              [disabled]="!canSendChat || showUsernamePrompt"
              aria-label="Open emoji picker"
              title="Add emoji"
            >
              🙂
            </button>
            <button type="submit" [disabled]="!canSendChat || showUsernamePrompt || !chatMessage.trim()">Send</button>
          </form>
        </aside>
      </div>

      <div *ngIf="showUsernamePrompt" class="username-modal-backdrop">
        <div class="username-modal">
          <h2>Join Live Chat</h2>
          <p>Enter a username to chat in {{ streamTitle }}.</p>

          <input
            type="text"
            name="username"
            [(ngModel)]="usernameDraft"
            maxlength="40"
            placeholder="Your username"
            (keyup.enter)="joinChat()"
          />

          <div *ngIf="chatError" class="chat-error">{{ chatError }}</div>

          <div class="username-modal-actions">
            <button type="button" class="secondary" (click)="closeUsernamePrompt()">Back</button>
            <button type="button" (click)="joinChat()">Join chat</button>
          </div>
        </div>
      </div>

      <div class="brokerDetails">
        <p>Details to Broker</p>
        <a
          class="broker-link"
          href="https://ec2-13-228-169-204.ap-southeast-1.compute.amazonaws.com:1943/#/login"
          target="_blank"
          rel="noopener noreferrer"
        >https://ec2-13-228-169-204.ap-southeast-1.compute.amazonaws.com:1943/#/login</a>
        <p class="hint">Creds: view/view</p>
        <p class="hint">VPN: default</p>
      </div>
    }
  }
</section>
