<!-- payment-failure.component.html -->
<div class="payment-result-container">
  <div class="failure-card" *ngIf="transactionDetails">
    <div class="failure-header">
      <div class="failure-icon" [ngClass]="getFailureReasonClass()">
        {{ getFailureIcon() }}
      </div>
      <h1>Payment Failed</h1>
      <p class="failure-message">Unfortunately, your payment could not be processed. Don't worry, no money has been charged.</p>
    </div>
    
    <div class="transaction-details">
      <h2>Transaction Details</h2>
      <div class="details-grid">
        <div class="detail-item">
          <span class="label">Transaction ID:</span>
          <span class="value">{{ transactionDetails.transactionId }}</span>
        </div>
        <div class="detail-item">
          <span class="label">Amount:</span>
          <span class="value amount">₹{{ transactionDetails.amount }}</span>
        </div>
        <div class="detail-item">
          <span class="label">Status:</span>
          <span class="value status-failed">{{ transactionDetails.status }}</span>
        </div>
        <div class="detail-item">
          <span class="label">Customer Name:</span>
          <span class="value">{{ transactionDetails.customerName }}</span>
        </div>
        <div class="detail-item">
          <span class="label">Email:</span>
          <span class="value">{{ transactionDetails.customerEmail }}</span>
        </div>
        <div class="detail-item">
          <span class="label">Phone:</span>
          <span class="value">{{ transactionDetails.customerPhone }}</span>
        </div>
        <div class="detail-item">
          <span class="label">Products:</span>
          <span class="value">{{ transactionDetails.products }}</span>
        </div>
        <div class="detail-item">
          <span class="label">Transaction Date:</span>
          <span class="value">{{ transactionDetails.transactionDate }}</span>
        </div>
        <div class="detail-item" *ngIf="transactionDetails.errorCode">
          <span class="label">Error Code:</span>
          <span class="value error-code">{{ transactionDetails.errorCode }}</span>
        </div>
        <div class="detail-item failure-reason-item">
          <span class="label">Failure Reason:</span>
          <span class="value failure-reason">{{ transactionDetails.failureReason }}</span>
        </div>
      </div>
    </div>

    <div class="failure-info" [ngClass]="getFailureReasonClass()">
      <h3>What happened?</h3>
      <div class="failure-explanation">
        <ng-container [ngSwitch]="getFailureReasonClass()">
          <div *ngSwitchCase="'insufficient-funds'">
            <p><strong>Insufficient Funds:</strong> Your account doesn't have enough balance for this transaction.</p>
            <ul>
              <li>Check your account balance</li>
              <li>Try using a different payment method</li>
              <li>Contact your bank if you believe this is an error</li>
            </ul>
          </div>
          
          <div *ngSwitchCase="'timeout'">
            <p><strong>Transaction Timeout:</strong> The payment took too long to process.</p>
            <ul>
              <li>Check your internet connection</li>
              <li>Try the transaction again</li>
              <li>Contact your bank if the issue persists</li>
            </ul>
          </div>
          
          <div *ngSwitchCase="'cancelled'">
            <p><strong>Transaction Cancelled:</strong> The payment was cancelled during processing.</p>
            <ul>
              <li>You may have cancelled the transaction</li>
              <li>Browser or app was closed during payment</li>
              <li>Security system blocked the transaction</li>
            </ul>
          </div>
          
          <div *ngSwitchCase="'network'">
            <p><strong>Network Error:</strong> Connection issues prevented payment completion.</p>
            <ul>
              <li>Check your internet connection</li>
              <li>Try again with a stable connection</li>
              <li>Switch to mobile data if using WiFi</li>
            </ul>
          </div>
          
          <div *ngSwitchCase="'authentication'">
            <p><strong>Authentication Failed:</strong> Card or payment details couldn't be verified.</p>
            <ul>
              <li>Verify your card details are correct</li>
              <li>Check if your card is activated for online transactions</li>
              <li>Contact your bank to enable online payments</li>
            </ul>
          </div>
          
          <div *ngSwitchDefault>
            <p><strong>Payment Failed:</strong> Your payment could not be processed.</p>
            <ul>
              <li>Check your payment details</li>
              <li>Ensure your card is valid and active</li>
              <li>Try using a different payment method</li>
              <li>Contact your bank if the problem continues</li>
            </ul>
          </div>
        </ng-container>
      </div>
    </div>

    <div class="quick-tips">
      <h4>💡 Quick Tips for Successful Payment:</h4>
      <div class="tips-grid">
        <div class="tip-item">
          <span class="tip-icon">🔒</span>
          <span>Ensure your card is enabled for online transactions</span>
        </div>
        <div class="tip-item">
          <span class="tip-icon">📶</span>
          <span>Use a stable internet connection</span>
        </div>
        <div class="tip-item">
          <span class="tip-icon">💰</span>
          <span>Check if you have sufficient balance</span>
        </div>
        <div class="tip-item">
          <span class="tip-icon">⏱️</span>
          <span>Complete the payment within the time limit</span>
        </div>
      </div>
    </div>

    <div class="action-buttons">
      <button class="btn-primary" (click)="retryPayment()">
        <span class="btn-icon">🔄</span>
        Try Again
      </button>
      <button class="btn-secondary" (click)="goToMachine()">
        <span class="btn-icon">🏪</span>
        Return to Machine
      </button>
      <button class="btn-tertiary" (click)="contactSupport()">
        <span class="btn-icon">📞</span>
        Contact Support
      </button>
    </div>
  </div>
  
  <div class="loading-card" *ngIf="loading">
    <div class="loading-spinner"></div>
    <p>Processing transaction details...</p>
  </div>
  
  <div class="error-card" *ngIf="error">
    <div class="error-icon">⚠</div>
    <h2>Error Loading Transaction Details</h2>
    <p>{{ error }}</p>
    <button class="btn-primary" (click)="goToMachine()">Return to Machine</button>
  </div>
</div>