<div class="call-container" *ngIf="shouldShowCall()">
  <!-- Incoming Call / Active Call / Outgoing Call UI -->
  <div class="call-overlay" *ngIf="currentCall">
    <!-- Video/Audio Display Area -->
    <div class="call-media-area" [class.audio-only]="!isVideoCall() || !isCallActive">
      <!-- Remote Video -->
      <video 
        #remoteVideo 
        autoplay 
        playsinline 
        class="remote-video"
        [class.hidden]="!isVideoCall() || !isCallActive"
      ></video>
      
      <!-- Local Video (Picture-in-Picture) -->
      <video 
        #localVideo 
        autoplay 
        playsinline 
        muted
        class="local-video"
        [class.hidden]="!isVideoCall() || !isCallActive || !isVideoEnabled"
      ></video>

      <!-- Audio Call UI -->
      <div class="audio-call-ui" *ngIf="!isVideoCall() || !isCallActive">
        <div class="avatar-large">
          <img 
            *ngIf="getOtherUserAvatarUrl()" 
            [src]="userService.getAvatarUrl(getOtherUserAvatarUrl()!)" 
            [alt]="getOtherUserName()"
            class="avatar-image-large">
          <div class="avatar-circle-large" 
               [style.display]="getOtherUserAvatarUrl() ? 'none' : 'flex'">
            {{ getOtherUserName().charAt(0) }}
          </div>
        </div>
        <div class="call-user-info">
          <h3 class="call-user-name">{{ getOtherUserName() }}</h3>
          <p class="call-status" *ngIf="isRinging && isIncoming">Incoming {{ currentCall.callType }} call</p>
          <p class="call-status" *ngIf="isRinging && !isIncoming">Calling...</p>
          <p class="call-status" *ngIf="isCallActive">{{ currentCall.callType }} call</p>
        </div>
      </div>
    </div>

    <!-- Call Controls -->
    <div class="call-controls">
      <!-- Outgoing Call Controls (caller waiting for answer) -->
      <div class="outgoing-controls" *ngIf="isRinging && !isIncoming">
        <div class="call-status-text">Calling...</div>
        <button class="call-btn call-btn-end" (click)="endCall()" title="Cancel call">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M18 6L6 18" stroke-linecap="round"/>
            <path d="M6 6L18 18" stroke-linecap="round"/>
          </svg>
        </button>
      </div>
      
      <!-- Incoming Call Controls -->
      <div class="incoming-controls" *ngIf="isRinging && isIncoming">
        <button class="call-btn call-btn-reject" (click)="rejectCall()" title="Reject">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M18 6L6 18M6 6L18 18" stroke-linecap="round"/>
          </svg>
        </button>
        <button class="call-btn call-btn-answer" (click)="answerCall()" title="Answer">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <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-linecap="round" stroke-linejoin="round"/>
          </svg>
        </button>
      </div>

      <!-- Active Call Controls -->
      <div class="active-controls" *ngIf="isCallActive">
        <button 
          class="call-btn call-btn-secondary" 
          [class.active]="!isMuted"
          (click)="toggleMute()" 
          title="{{ isMuted ? 'Unmute' : 'Mute' }}">
          <svg *ngIf="!isMuted" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M12 1V23M5 8V16C5 17.0609 5.42143 18.0783 6.17157 18.8284C6.92172 19.5786 7.93913 20 9 20H11L18 13V11L11 4H9C7.93913 4 6.92172 4.42143 6.17157 5.17157C5.42143 5.92172 5 6.93913 5 8Z" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
          <svg *ngIf="isMuted" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M12 1V23M5 8V16C5 17.0609 5.42143 18.0783 6.17157 18.8284C6.92172 19.5786 7.93913 20 9 20H11L18 13V11L11 4H9C7.93913 4 6.92172 4.42143 6.17157 5.17157C5.42143 5.92172 5 6.93913 5 8Z" stroke-linecap="round" stroke-linejoin="round"/>
            <line x1="23" y1="9" x2="17" y2="15" stroke-linecap="round"/>
            <line x1="17" y1="9" x2="23" y2="15" stroke-linecap="round"/>
          </svg>
        </button>

        <button 
          *ngIf="isVideoCall()"
          class="call-btn call-btn-secondary" 
          [class.active]="isVideoEnabled"
          (click)="toggleVideo()" 
          title="{{ isVideoEnabled ? 'Turn off video' : 'Turn on video' }}">
          <svg *ngIf="isVideoEnabled" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M23 7L16 12L23 17V7Z" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M14 5H3C1.89543 5 1 5.89543 1 7V17C1 18.1046 1.89543 19 3 19H14C15.1046 19 16 18.1046 16 17V7C16 5.89543 15.1046 5 14 5Z" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
          <svg *ngIf="!isVideoEnabled" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M16 16L1 1M23 7L16 12L23 17V7Z" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M1 7V17C1 18.1046 1.89543 19 3 19H14C15.1046 19 16 18.1046 16 17V7C16 5.89543 15.1046 5 14 5H3C1.89543 5 1 5.89543 1 7Z" stroke-linecap="round" stroke-linejoin="round"/>
            <line x1="16" y1="16" x2="23" y2="23" stroke-linecap="round"/>
          </svg>
        </button>

        <button class="call-btn call-btn-end" (click)="endCall()" title="End call">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M18 6L6 18M6 6L18 18" stroke-linecap="round"/>
          </svg>
        </button>
      </div>
    </div>
  </div>
</div>

