@using TrueCV.Application.Models

<div class="employment-table-wrapper">
    @if (Verifications is null || Verifications.Count == 0)
    {
        <div class="employment-empty">
            <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor" class="bi bi-briefcase text-muted mb-3" viewBox="0 0 16 16">
                <path d="M6.5 1A1.5 1.5 0 0 0 5 2.5V3H1.5A1.5 1.5 0 0 0 0 4.5v8A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5v-8A1.5 1.5 0 0 0 14.5 3H11v-.5A1.5 1.5 0 0 0 9.5 1zM6 2.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 .5.5V3H6zM1 4.5a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 .5.5V7H1zM1 8h14v4.5a.5.5 0 0 1-.5.5h-13a.5.5 0 0 1-.5-.5z"/>
            </svg>
            <span class="text-muted">No employment verification data available</span>
        </div>
    }
    else
    {
        <div class="employment-summary mb-3">
            @{
                var verifiedCount = Verifications.Count(v => v.IsVerified);
                var unverifiedCount = Verifications.Count - verifiedCount;
            }
            <span class="badge bg-success me-2">
                <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" class="bi bi-check-lg me-1" viewBox="0 0 16 16">
                    <path d="M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425z"/>
                </svg>
                @verifiedCount Verified
            </span>
            @if (unverifiedCount > 0)
            {
                <span class="badge bg-danger">
                    <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" class="bi bi-x-lg me-1" viewBox="0 0 16 16">
                        <path d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8z"/>
                    </svg>
                    @unverifiedCount Unverified
                </span>
            }
        </div>

        <div class="table-responsive">
            <table class="table table-hover employment-table mb-0">
                <thead class="table-light">
                    <tr>
                        <th scope="col">Company Claimed</th>
                        <th scope="col">Matched Company</th>
                        <th scope="col">Match Score</th>
                        <th scope="col">Status</th>
                        <th scope="col">Dates</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach (var verification in Verifications)
                    {
                        <tr class="@(verification.IsVerified ? "" : "table-warning")">
                            <td>
                                <span class="company-name">@verification.ClaimedCompany</span>
                            </td>
                            <td>
                                @if (!string.IsNullOrEmpty(verification.MatchedCompanyName))
                                {
                                    <span class="matched-company">
                                        @verification.MatchedCompanyName
                                        @if (!string.IsNullOrEmpty(verification.MatchedCompanyNumber))
                                        {
                                            <small class="text-muted d-block">@verification.MatchedCompanyNumber</small>
                                        }
                                    </span>
                                }
                                else
                                {
                                    <span class="text-muted">No match found</span>
                                }
                            </td>
                            <td>
                                <div class="match-score">
                                    <div class="progress" style="width: 80px; height: 6px;">
                                        <div class="progress-bar @GetMatchScoreClass(verification.MatchScore)"
                                             role="progressbar"
                                             style="width: @verification.MatchScore%"
                                             aria-valuenow="@verification.MatchScore"
                                             aria-valuemin="0"
                                             aria-valuemax="100">
                                        </div>
                                    </div>
                                    <span class="match-score-value @GetMatchScoreTextClass(verification.MatchScore)">
                                        @verification.MatchScore%
                                    </span>
                                </div>
                            </td>
                            <td>
                                @if (verification.IsVerified)
                                {
                                    <span class="badge bg-success">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" class="bi bi-check-circle-fill me-1" 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>
                                        Verified
                                    </span>
                                }
                                else
                                {
                                    <span class="badge bg-danger">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" class="bi bi-x-circle-fill me-1" 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>
                                        Unverified
                                    </span>
                                }
                            </td>
                            <td>
                                <span class="employment-dates">
                                    @FormatDateRange(verification.ClaimedStartDate, verification.ClaimedEndDate)
                                </span>
                            </td>
                        </tr>
                        @if (!string.IsNullOrEmpty(verification.VerificationNotes))
                        {
                            <tr class="verification-notes-row @(verification.IsVerified ? "" : "table-warning")">
                                <td colspan="5" class="verification-notes">
                                    <small>
                                        <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" class="bi bi-info-circle me-1" viewBox="0 0 16 16">
                                            <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"/>
                                            <path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0"/>
                                        </svg>
                                        @verification.VerificationNotes
                                    </small>
                                </td>
                            </tr>
                        }
                    }
                </tbody>
            </table>
        </div>
    }
</div>

<style>
    .employment-table-wrapper {
        background-color: #fff;
        border: 1px solid #dee2e6;
        border-radius: 0.5rem;
        overflow: hidden;
    }

    .employment-summary {
        padding: 1rem 1rem 0 1rem;
    }

    .employment-empty {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 3rem;
        color: #6c757d;
    }

    .employment-table {
        font-size: 0.875rem;
    }

    .employment-table th {
        font-weight: 600;
        font-size: 0.8125rem;
        text-transform: uppercase;
        letter-spacing: 0.025em;
        color: #495057;
        border-bottom-width: 1px;
    }

    .company-name {
        font-weight: 500;
    }

    .matched-company {
        font-weight: 500;
    }

    .match-score {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .match-score-value {
        font-size: 0.75rem;
        font-weight: 600;
        min-width: 35px;
    }

    .employment-dates {
        font-size: 0.8125rem;
        color: #6c757d;
        white-space: nowrap;
    }

    .verification-notes-row td {
        padding-top: 0 !important;
        border-top: none !important;
    }

    .verification-notes {
        color: #6c757d;
        font-style: italic;
    }

    .table-warning {
        --bs-table-bg: #fff3cd;
        --bs-table-striped-bg: #f2e6be;
        --bs-table-hover-bg: #ecdeb1;
    }
</style>

@code {
    [Parameter]
    public List<CompanyVerificationResult>? Verifications { get; set; }

    private static string GetMatchScoreClass(int score)
    {
        return score switch
        {
            >= 80 => "bg-success",
            >= 60 => "bg-info",
            >= 40 => "bg-warning",
            _ => "bg-danger"
        };
    }

    private static string GetMatchScoreTextClass(int score)
    {
        return score switch
        {
            >= 80 => "text-success",
            >= 60 => "text-info",
            >= 40 => "text-warning",
            _ => "text-danger"
        };
    }

    private static string FormatDateRange(DateOnly? startDate, DateOnly? endDate)
    {
        if (!startDate.HasValue && !endDate.HasValue)
        {
            return "Dates not specified";
        }

        var start = startDate?.ToString("MMM yyyy") ?? "Unknown";
        var end = endDate?.ToString("MMM yyyy") ?? "Present";

        return $"{start} - {end}";
    }
}
