RealCV/src/TrueCV.Web/Components/Shared/VerificationProgress.razor

@using TrueCV.Domain.Enums

<div class="verification-progress">
    <div class="verification-progress-header">
        @if (!string.IsNullOrEmpty(FileName))
        {
            <span class="verification-progress-filename" title="@FileName">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-file-earmark-text me-2" viewBox="0 0 16 16">
                    <path d="M5.5 7a.5.5 0 0 0 0 1h5a.5.5 0 0 0 0-1zM5 9.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5m0 2a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5"/>
                    <path d="M9.5 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4.5zm0 1v2A1.5 1.5 0 0 0 11 4.5h2V14a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1z"/>
                </svg>
                @FileName
            </span>
        }
    </div>

    <div class="verification-progress-status">
        @switch (Status)
        {
            case CheckStatus.Pending:
                <div class="status-icon status-pending">
                    <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor" class="bi bi-hourglass" viewBox="0 0 16 16">
                        <path d="M2 1.5a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-1v1a4.5 4.5 0 0 1-2.557 4.06c-.29.139-.443.377-.443.59v.7c0 .213.154.451.443.59A4.5 4.5 0 0 1 12.5 13v1h1a.5.5 0 0 1 0 1h-11a.5.5 0 1 1 0-1h1v-1a4.5 4.5 0 0 1 2.557-4.06c.29-.139.443-.377.443-.59v-.7c0-.213-.154-.451-.443-.59A4.5 4.5 0 0 1 3.5 3V2h-1a.5.5 0 0 1-.5-.5m2.5.5v1a3.5 3.5 0 0 0 1.989 3.158c.533.256 1.011.791 1.011 1.491v.702c0 .7-.478 1.235-1.011 1.491A3.5 3.5 0 0 0 4.5 13v1h7v-1a3.5 3.5 0 0 0-1.989-3.158C8.978 9.586 8.5 9.052 8.5 8.351v-.702c0-.7.478-1.235 1.011-1.491A3.5 3.5 0 0 0 11.5 3V2z"/>
                    </svg>
                </div>
                <div class="status-text">
                    <span class="status-title">Pending</span>
                    <span class="status-description">Your CV is queued for verification</span>
                </div>
                break;

            case CheckStatus.Processing:
                <div class="status-icon status-processing">
                    <div class="spinner-border text-primary" role="status" style="width: 3rem; height: 3rem;">
                        <span class="visually-hidden">Processing...</span>
                    </div>
                </div>
                <div class="status-text">
                    <span class="status-title">Processing</span>
                    <span class="status-description">Verifying your CV data...</span>
                </div>
                <div class="processing-steps mt-3">
                    <div class="processing-step active">
                        <div class="step-indicator"></div>
                        <span>Extracting CV data</span>
                    </div>
                    <div class="processing-step">
                        <div class="step-indicator"></div>
                        <span>Verifying companies</span>
                    </div>
                    <div class="processing-step">
                        <div class="step-indicator"></div>
                        <span>Analysing timeline</span>
                    </div>
                    <div class="processing-step">
                        <div class="step-indicator"></div>
                        <span>Generating report</span>
                    </div>
                </div>
                break;

            case CheckStatus.Completed:
                <div class="status-icon status-completed">
                    <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor" class="bi bi-check-circle-fill text-success" viewBox="0 0 16 16">
                        <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0m-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
                    </svg>
                </div>
                <div class="status-text">
                    <span class="status-title text-success">Completed</span>
                    <span class="status-description">Verification complete! View your results below.</span>
                </div>
                break;

            case CheckStatus.Failed:
                <div class="status-icon status-failed">
                    <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor" class="bi bi-x-circle-fill text-danger" viewBox="0 0 16 16">
                        <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293z"/>
                    </svg>
                </div>
                <div class="status-text">
                    <span class="status-title text-danger">Failed</span>
                    <span class="status-description">Something went wrong. Please try again.</span>
                </div>
                break;
        }
    </div>
</div>

<style>
    .verification-progress {
        background-color: #fff;
        border: 1px solid #dee2e6;
        border-radius: 0.5rem;
        padding: 1.5rem;
    }

    .verification-progress-header {
        margin-bottom: 1.5rem;
        padding-bottom: 1rem;
        border-bottom: 1px solid #dee2e6;
    }

    .verification-progress-filename {
        display: inline-flex;
        align-items: center;
        font-size: 0.875rem;
        color: #495057;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .verification-progress-status {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 1rem 0;
    }

    .status-icon {
        margin-bottom: 1rem;
    }

    .status-pending svg {
        color: #6c757d;
    }

    .status-text {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
    }

    .status-title {
        font-size: 1.25rem;
        font-weight: 600;
        color: #212529;
    }

    .status-description {
        font-size: 0.875rem;
        color: #6c757d;
    }

    .processing-steps {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        width: 100%;
        max-width: 250px;
    }

    .processing-step {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        font-size: 0.875rem;
        color: #adb5bd;
    }

    .processing-step.active {
        color: #0d6efd;
    }

    .processing-step.active .step-indicator {
        background-color: #0d6efd;
        animation: pulse 1.5s ease-in-out infinite;
    }

    .step-indicator {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: #dee2e6;
        flex-shrink: 0;
    }

    @@keyframes pulse {
        0%, 100% {
            opacity: 1;
            transform: scale(1);
        }
        50% {
            opacity: 0.5;
            transform: scale(1.2);
        }
    }
</style>

@code {
    [Parameter]
    public CheckStatus Status { get; set; }

    [Parameter]
    public string? FileName { get; set; }
}