<ion-header>
  <ion-toolbar color="primary">
    <ion-buttons slot="start">
      <ion-button (click)="dismiss()">
        <ion-icon slot="icon-only" name="arrow-back"></ion-icon>
      </ion-button>
    </ion-buttons>
    <ion-title>Discusión del Reporte</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content #content>
  <div class="messages-container">

    <ng-container *ngIf="loading">
      <div class="message-wrapper left">
        <ion-skeleton-text [animated]="true" style="width: 55%; height: 54px; border-radius: 18px;"></ion-skeleton-text>
      </div>
      <div class="message-wrapper right">
        <ion-skeleton-text [animated]="true" style="width: 42%; height: 40px; border-radius: 18px;"></ion-skeleton-text>
      </div>
      <div class="message-wrapper center">
        <ion-skeleton-text [animated]="true" style="width: 64%; height: 48px; border-radius: 10px;"></ion-skeleton-text>
      </div>
      <div class="message-wrapper left">
        <ion-skeleton-text [animated]="true" style="width: 50%; height: 36px; border-radius: 18px;"></ion-skeleton-text>
      </div>
      <div class="message-wrapper right">
        <ion-skeleton-text [animated]="true" style="width: 60%; height: 60px; border-radius: 18px;"></ion-skeleton-text>
      </div>
    </ng-container>

    <div class="empty-state" *ngIf="!loading && messages.length === 0">
      <ion-icon name="chatbubbles-outline" style="font-size: 48px; margin-bottom: 12px;"></ion-icon>
      <p>No hay mensajes aún.</p>
    </div>

    <ng-container *ngIf="!loading">
      <ng-container *ngFor="let msg of messages">

        <!-- Moderador — centrado -->
        <div class="message-wrapper center" *ngIf="msg.sender_type === 'moderator'">
          <div class="message-bubble moderator">
            <span class="sender-name">Moderador</span>
            <p>{{ msg.comment }}</p>
            <span class="timestamp">{{ msg.created_at | date:'d MMM, HH:mm' }}</span>
          </div>
        </div>

        <!-- Mensaje propio — derecha -->
        <div class="message-wrapper right"
             *ngIf="msg.sender_type !== 'moderator' && msg.sender_id === currentUserId">
          <div class="message-bubble mine">
            <p>{{ msg.comment }}</p>
            <span class="timestamp">{{ msg.created_at | date:'d MMM, HH:mm' }}</span>
          </div>
        </div>

        <!-- Mensaje del otro — izquierda -->
        <div class="message-wrapper left"
             *ngIf="msg.sender_type !== 'moderator' && msg.sender_id !== currentUserId">
          <div class="message-bubble other">
            <span class="sender-name">{{ msg.sender_name }}</span>
            <p>{{ msg.comment }}</p>
            <span class="timestamp">{{ msg.created_at | date:'d MMM, HH:mm' }}</span>
          </div>
        </div>

      </ng-container>
    </ng-container>

  </div>
</ion-content>

<ion-footer>
  <div class="input-bar">
    <ion-button fill="clear" color="medium" (click)="attachPhoto()">
      <ion-icon slot="icon-only" name="camera-outline"></ion-icon>
    </ion-button>
    <ion-textarea
      [(ngModel)]="newMessage"
      placeholder="Escribe un comentario..."
      rows="1"
      autoGrow="true"
      style="--highlight-height: 0"
      (keydown.enter)="$event.preventDefault(); newMessage.trim() && !sending && sendMessage()"
    ></ion-textarea>
    <ion-button
      fill="clear"
      color="primary"
      [disabled]="!newMessage.trim() || sending"
      (click)="sendMessage()">
      <ion-icon slot="icon-only" name="send"></ion-icon>
    </ion-button>
  </div>
</ion-footer>
