<div class="page-container">
  @if (loading()) {
    <div class="loading-container">
      <mat-spinner diameter="48"></mat-spinner>
      <span class="loading-text">Loading request details...</span>
    </div>
  } @else if (request(); as req) {
    <!-- Request Header Card -->
    <div class="request-header-card">
      <div class="header-content">
        <div class="header-left">
          <div class="request-number">{{ req.requestNumber }}</div>
          <h1 class="request-title">{{ formatType(req.requestType) | titlecase }} Application</h1>
          <div class="request-meta">
            <span class="meta-item">
              <mat-icon>calendar_today</mat-icon>
              Created {{ req.createdAt | date: 'mediumDate' }}
            </span>
            <span class="meta-item">
              <mat-icon>update</mat-icon>
              Updated {{ req.updatedAt | date: 'mediumDate' }}
            </span>
            @if (req.submittedAt) {
              <span class="meta-item">
                <mat-icon>send</mat-icon>
                Submitted {{ req.submittedAt | date: 'mediumDate' }}
              </span>
            }
          </div>
        </div>
        <div class="header-right">
          <span class="status-large status-{{ req.status.toLowerCase().replace('_', '-') }}">
            {{ req.status | titlecase }}
          </span>
          <div class="actions">
            @if (canEdit) {
              <button mat-raised-button routerLink="edit">
                <mat-icon>edit</mat-icon>
                Edit
              </button>
            }
            @if (canSubmit) {
              <button
                mat-raised-button
                style="background: white; color: var(--dbim-blue-dark)"
                (click)="submitRequest()"
                [disabled]="submitting()"
              >
                <mat-icon>send</mat-icon>
                Submit
              </button>
            }
            @if (canCancel) {
              <button mat-button style="color: white" (click)="cancelRequest()">
                <mat-icon>cancel</mat-icon>
                Cancel
              </button>
            }
          </div>
        </div>
      </div>
    </div>

    <!-- Tabs Content -->
    <mat-tab-group animationDuration="200ms">
      <!-- Details Tab -->
      <mat-tab>
        <ng-template mat-tab-label>
          <mat-icon>info</mat-icon>
          <span style="margin-left: 8px">Details</span>
        </ng-template>
        <div class="tab-content">
          <div class="detail-grid">
            <!-- Request Information -->
            <mat-card class="info-card">
              <div class="info-section">
                <div class="section-header">
                  <div class="section-icon">
                    <mat-icon>description</mat-icon>
                  </div>
                  <h3>Request Information</h3>
                </div>
                <div class="info-row">
                  <span class="label">Request Number</span>
                  <span class="value" style="font-family: 'Roboto Mono', monospace">{{ req.requestNumber }}</span>
                </div>
                <div class="info-row">
                  <span class="label">Request Type</span>
                  <span class="value">{{ formatType(req.requestType) | titlecase }}</span>
                </div>
                <div class="info-row">
                  <span class="label">Status</span>
                  <span class="value">
                    <app-status-badge [status]="req.status" />
                  </span>
                </div>
                <div class="info-row">
                  <span class="label">Created</span>
                  <span class="value">{{ req.createdAt | date: 'medium' }}</span>
                </div>
                <div class="info-row">
                  <span class="label">Last Updated</span>
                  <span class="value">{{ req.updatedAt | date: 'medium' }}</span>
                </div>
                @if (req.submittedAt) {
                  <div class="info-row">
                    <span class="label">Submitted</span>
                    <span class="value">{{ req.submittedAt | date: 'medium' }}</span>
                  </div>
                }
                @if (req.approvedAt) {
                  <div class="info-row">
                    <span class="label">Approved</span>
                    <span class="value">{{ req.approvedAt | date: 'medium' }}</span>
                  </div>
                }
              </div>
            </mat-card>

            <!-- Blockchain Info -->
            @if (req.blockchainTxHash || req.tokenId) {
              <app-blockchain-info
                [tokenId]="req.tokenId"
                [txHash]="req.blockchainTxHash"
                [showExplorer]="true"
              />
            }

            <!-- Metadata -->
            <mat-card class="info-card">
              <div class="info-section">
                <div class="section-header">
                  <div class="section-icon">
                    <mat-icon>business</mat-icon>
                  </div>
                  <h3>Business Details</h3>
                </div>
                @if (hasMetadata(req.metadata)) {
                  @for (key of getMetadataKeys(req.metadata); track key) {
                    <div class="info-row">
                      <span class="label">{{ formatMetadataKey(key) }}</span>
                      <span class="value">{{ req.metadata[key] }}</span>
                    </div>
                  }
                } @else {
                  <p style="color: var(--dbim-grey-2); margin: 0; text-align: center; padding: 24px 0">
                    No additional metadata provided
                  </p>
                }
              </div>
            </mat-card>
          </div>
        </div>
      </mat-tab>

      <!-- Documents Tab -->
      <mat-tab>
        <ng-template mat-tab-label>
          <mat-icon>folder</mat-icon>
          <span style="margin-left: 8px">Documents ({{ detailedDocuments().length || 0 }})</span>
        </ng-template>
        <div class="tab-content">
          <div class="documents-header" style="display: flex; justify-content: flex-end; margin-bottom: 16px;">
            <button mat-raised-button color="primary" (click)="openUploadDialog()">
              <mat-icon>cloud_upload</mat-icon>
              Upload Document
            </button>
          </div>
          @if (loadingDocuments()) {
            <div class="loading-container">
              <mat-spinner diameter="40"></mat-spinner>
              <span class="loading-text">Loading documents...</span>
            </div>
          } @else {
            <app-document-viewer [documents]="detailedDocuments()" />
          }
        </div>
      </mat-tab>

      <!-- Approvals Tab -->
      <mat-tab>
        <ng-template mat-tab-label>
          <mat-icon>how_to_reg</mat-icon>
          <span style="margin-left: 8px">Approvals ({{ req.approvals?.length || 0 }})</span>
        </ng-template>
        <div class="tab-content">
          @if (req.approvals && req.approvals.length > 0) {
            <app-approval-workflow-timeline
              [requestId]="req.id"
              [txHash]="req.blockchainTxHash"
              [tokenId]="req.tokenId" />
          } @else {
            <div class="empty-state-card">
              <mat-icon>pending_actions</mat-icon>
              <p>No approval actions yet</p>
              <p style="font-size: 13px; margin-top: 8px">
                Approval workflow will begin once the request is submitted
              </p>
            </div>
          }
        </div>
      </mat-tab>
    </mat-tab-group>
  }
</div>
