@using TrueCV.Application.Models

<div class="flags-list">
    @if (Flags is null || Flags.Count == 0)
    {
        <div class="flags-empty">
            <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor" class="bi bi-check-circle text-success mb-3" 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="m10.97 4.97-.02.022-3.473 4.425-2.093-2.094a.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-1.071-1.05"/>
            </svg>
            <span class="text-muted">No flags found</span>
        </div>
    }
    else
    {
        <div class="flags-summary mb-3">
            @{
                var criticalCount = GetFlagsBySeverity("Critical").Count;
                var warningCount = GetFlagsBySeverity("Warning").Count;
                var infoCount = GetFlagsBySeverity("Info").Count;
            }
            @if (criticalCount > 0)
            {
                <span class="badge bg-danger me-2">@criticalCount Critical</span>
            }
            @if (warningCount > 0)
            {
                <span class="badge bg-warning text-dark me-2">@warningCount Warning</span>
            }
            @if (infoCount > 0)
            {
                <span class="badge bg-info text-dark">@infoCount Info</span>
            }
        </div>

        <div class="flags-items">
            @foreach (var flag in GetSortedFlags())
            {
                <div class="flag-item @GetFlagSeverityClass(flag.Severity)">
                    <div class="flag-icon">
                        @GetFlagIcon(flag.Severity)
                    </div>
                    <div class="flag-content">
                        <div class="flag-header">
                            <span class="flag-title">@flag.Title</span>
                            <span class="flag-category badge bg-secondary">@flag.Category</span>
                        </div>
                        <p class="flag-description">@flag.Description</p>
                        <div class="flag-impact">
                            <span class="flag-impact-label">Score Impact:</span>
                            <span class="flag-impact-value @(flag.ScoreImpact < 0 ? "text-danger" : "text-success")">
                                @(flag.ScoreImpact > 0 ? "+" : "")@flag.ScoreImpact
                            </span>
                        </div>
                    </div>
                </div>
            }
        </div>
    }
</div>

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

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

    .flags-items {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .flag-item {
        display: flex;
        gap: 1rem;
        padding: 1rem;
        border-radius: 0.375rem;
        border-left: 4px solid;
    }

    .flag-item.critical {
        background-color: #f8d7da;
        border-left-color: #dc3545;
    }

    .flag-item.warning {
        background-color: #fff3cd;
        border-left-color: #ffc107;
    }

    .flag-item.info {
        background-color: #cff4fc;
        border-left-color: #0dcaf0;
    }

    .flag-icon {
        flex-shrink: 0;
        width: 24px;
        height: 24px;
    }

    .flag-item.critical .flag-icon { color: #dc3545; }
    .flag-item.warning .flag-icon { color: #856404; }
    .flag-item.info .flag-icon { color: #055160; }

    .flag-content {
        flex: 1;
        min-width: 0;
    }

    .flag-header {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin-bottom: 0.5rem;
        flex-wrap: wrap;
    }

    .flag-title {
        font-weight: 600;
        font-size: 0.9375rem;
    }

    .flag-item.critical .flag-title { color: #842029; }
    .flag-item.warning .flag-title { color: #664d03; }
    .flag-item.info .flag-title { color: #055160; }

    .flag-category {
        font-size: 0.75rem;
    }

    .flag-description {
        font-size: 0.875rem;
        margin-bottom: 0.5rem;
        color: #495057;
    }

    .flag-impact {
        font-size: 0.75rem;
    }

    .flag-impact-label {
        color: #6c757d;
        margin-right: 0.25rem;
    }

    .flag-impact-value {
        font-weight: 600;
    }
</style>

@code {
    [Parameter]
    public List<FlagResult>? Flags { get; set; }

    private List<FlagResult> GetSortedFlags()
    {
        if (Flags is null || Flags.Count == 0)
        {
            return [];
        }

        return Flags
            .OrderBy(f => GetSeverityOrder(f.Severity))
            .ThenBy(f => f.ScoreImpact)
            .ToList();
    }

    private List<FlagResult> GetFlagsBySeverity(string severity)
    {
        if (Flags is null)
        {
            return [];
        }

        return Flags.Where(f => f.Severity.Equals(severity, StringComparison.OrdinalIgnoreCase)).ToList();
    }

    private static int GetSeverityOrder(string severity)
    {
        return severity.ToLowerInvariant() switch
        {
            "critical" => 0,
            "warning" => 1,
            "info" => 2,
            _ => 3
        };
    }

    private static string GetFlagSeverityClass(string severity)
    {
        return severity.ToLowerInvariant() switch
        {
            "critical" => "critical",
            "warning" => "warning",
            "info" => "info",
            _ => "info"
        };
    }

    private static MarkupString GetFlagIcon(string severity)
    {
        var icon = severity.ToLowerInvariant() switch
        {
            "critical" => """<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-exclamation-octagon-fill" viewBox="0 0 16 16"><path d="M11.46.146A.5.5 0 0 0 11.107 0H4.893a.5.5 0 0 0-.353.146L.146 4.54A.5.5 0 0 0 0 4.893v6.214a.5.5 0 0 0 .146.353l4.394 4.394a.5.5 0 0 0 .353.146h6.214a.5.5 0 0 0 .353-.146l4.394-4.394a.5.5 0 0 0 .146-.353V4.893a.5.5 0 0 0-.146-.353zM8 4c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995A.905.905 0 0 1 8 4m.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2"/></svg>""",
            "warning" => """<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-exclamation-triangle-fill" viewBox="0 0 16 16"><path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5m.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2"/></svg>""",
            _ => """<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-info-circle-fill" viewBox="0 0 16 16"><path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2"/></svg>"""
        };
        return new MarkupString(icon);
    }
}
