<div class="token-verification-container">
    <div class="verification-card">
        <div class="logo-section">
            <img src="assets/images/ROLCC-Logo-Color.png" alt="ROLCC Logo" class="logo">
        </div>

        <div class="verification-content">
            <!-- Verifying State -->
            <div *ngIf="isVerifying" class="verifying-state">
                <kendo-loader size="large"></kendo-loader>
                <h2>Verifying your access...</h2>
                <p>Please wait while we verify your email link.</p>
            </div>

            <!-- Token Verified State -->
            <div *ngIf="verificationResult?.isValid && !isVerifying && !verificationResult?.requiresMfa"
                class="success-state">
                <div class="success-icon">
                    <i class="k-icon k-i-check-circle"></i>
                </div>
                <h2>Access Granted!</h2>
                <p>Welcome back, {{ verificationResult?.user?.firstName }}!</p>
                <p class="redirect-message">Redirecting you to the dashboard...</p>
            </div>

            <!-- MFA Required State -->
            <div *ngIf="verificationResult?.isValid && verificationResult?.requiresMfa && !isVerifying"
                class="mfa-required-state">
                <div class="success-icon">
                    <i class="k-icon k-i-check-circle"></i>
                </div>
                <h2>Token Verified!</h2>
                <p>Welcome back, {{ verificationResult?.user?.firstName }}!</p>
                <p class="mfa-message">Please complete MFA verification to continue...</p>

                <!-- Debug button to manually trigger MFA dialog -->
                <div class="debug-actions" style="margin-top: 20px;">
                    <button kendoButton themeColor="primary" (click)="showMfaDialog()" class="action-btn">
                        Show MFA Dialog (Debug)
                    </button>
                </div>
            </div>

            <!-- Error State -->
            <div *ngIf="errorMessage && !isVerifying" class="error-state">
                <div class="error-icon">
                    <i class="k-icon k-i-warning"></i>
                </div>
                <h2>Link Verification Failed</h2>
                <p class="error-message">{{ errorMessage }}</p>

                <div class="help-text">
                    <p>If you're having trouble accessing your account:</p>
                    <ul>
                        <li>Make sure you clicked the complete link from your email</li>
                        <li>Check if the link has expired</li>
                        <li>Try requesting a new access link</li>
                    </ul>
                </div>

                <div class="action-buttons">
                    <button kendoButton themeColor="primary" (click)="requestNewLink()" class="action-btn">
                        Request New Link
                    </button>

                    <button kendoButton (click)="goToLogin()" class="action-btn secondary">
                        Go to Login
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- MFA Dialog -->
    <app-mfa-dialog #mfaDialog (mfaSuccess)="onMfaSuccess($event)" (mfaCancel)="onMfaCancel()">
    </app-mfa-dialog>
</div>