{# app/templates/admin/code-quality-violations.html #}
{% extends "admin/base.html" %}

{% block title %}Violations List{% endblock %}

{% block alpine_data %}codeQualityViolations(){% endblock %}

{% block extra_scripts %}
<script src="/static/admin/js/code-quality-violations.js"></script>
{% endblock %}

{% block content %}
<!-- Page Header -->
<div class="flex items-center justify-between my-6">
    <div>
        <h2 class="text-2xl font-semibold text-gray-700 dark:text-gray-200">
            Architecture Violations
        </h2>
        <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">
            Review and manage code quality violations
        </p>
    </div>
    <a href="/admin/code-quality"
       class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-gray-700 dark:text-gray-300 transition-colors duration-150 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:shadow-outline-gray">
        <span x-html="$icon('arrow-left', 'w-4 h-4 mr-2')"></span>
        Back to Dashboard
    </a>
</div>

<!-- Loading State -->
<div x-show="loading" class="text-center py-12">
    <span x-html="$icon('spinner', 'inline w-8 h-8 text-purple-600')"></span>
    <p class="mt-2 text-gray-600 dark:text-gray-400">Loading violations...</p>
</div>

<!-- Error State -->
<div x-show="error && !loading" class="mb-6 p-4 bg-red-100 border border-red-400 text-red-700 rounded-lg flex items-start">
    <span x-html="$icon('exclamation', 'w-5 h-5 mr-3 mt-0.5 flex-shrink-0')"></span>
    <div>
        <p class="font-semibold">Error loading violations</p>
        <p class="text-sm" x-text="error"></p>
    </div>
</div>

<!-- Content -->
<div x-show="!loading">
    <!-- Filters -->
    <div class="mb-6 p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
        <h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">Filters</h3>
        <div class="grid gap-4 md:grid-cols-4">
            <!-- Severity Filter -->
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">
                    Severity
                </label>
                <select x-model="filters.severity"
                        @change="applyFilters()"
                        class="block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray form-select rounded-md">
                    <option value="">All</option>
                    <option value="error">Error</option>
                    <option value="warning">Warning</option>
                </select>
            </div>

            <!-- Status Filter -->
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">
                    Status
                </label>
                <select x-model="filters.status"
                        @change="applyFilters()"
                        class="block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray form-select rounded-md">
                    <option value="">All</option>
                    <option value="open">Open</option>
                    <option value="assigned">Assigned</option>
                    <option value="resolved">Resolved</option>
                    <option value="ignored">Ignored</option>
                </select>
            </div>

            <!-- Rule ID Filter -->
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">
                    Rule ID
                </label>
                <input x-model="filters.rule_id"
                       @input.debounce.500ms="applyFilters()"
                       type="text"
                       placeholder="e.g. API-001"
                       class="block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray form-input rounded-md">
            </div>

            <!-- File Path Filter -->
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">
                    File Path
                </label>
                <input x-model="filters.file_path"
                       @input.debounce.500ms="applyFilters()"
                       type="text"
                       placeholder="e.g. app/api"
                       class="block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray form-input rounded-md">
            </div>
        </div>
    </div>

    <!-- Violations Table -->
    <div class="w-full overflow-hidden rounded-lg shadow-xs">
        <div class="w-full overflow-x-auto">
            <table class="w-full whitespace-no-wrap">
                <thead>
                    <tr class="text-xs font-semibold tracking-wide text-left text-gray-500 uppercase border-b dark:border-gray-700 bg-gray-50 dark:text-gray-400 dark:bg-gray-800">
                        <th class="px-4 py-3">Rule</th>
                        <th class="px-4 py-3">Severity</th>
                        <th class="px-4 py-3">File</th>
                        <th class="px-4 py-3">Line</th>
                        <th class="px-4 py-3">Message</th>
                        <th class="px-4 py-3">Status</th>
                        <th class="px-4 py-3">Actions</th>
                    </tr>
                </thead>
                <tbody class="bg-white divide-y dark:divide-gray-700 dark:bg-gray-800">
                    <template x-if="violations.length === 0">
                        <tr>
                            <td colspan="7" class="px-4 py-8 text-center text-gray-500 dark:text-gray-400">
                                No violations found
                            </td>
                        </tr>
                    </template>
                    <template x-for="violation in violations" :key="violation.id">
                        <tr class="text-gray-700 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700">
                            <!-- Rule ID -->
                            <td class="px-4 py-3">
                                <div class="flex items-center text-sm">
                                    <div>
                                        <p class="font-semibold" x-text="violation.rule_id"></p>
                                    </div>
                                </div>
                            </td>

                            <!-- Severity Badge -->
                            <td class="px-4 py-3 text-xs">
                                <span class="px-2 py-1 font-semibold leading-tight rounded-full"
                                      :class="{
                                          'text-red-700 bg-red-100 dark:bg-red-700 dark:text-red-100': violation.severity === 'error',
                                          'text-yellow-700 bg-yellow-100 dark:text-yellow-100 dark:bg-yellow-700': violation.severity === 'warning'
                                      }"
                                      x-text="violation.severity">
                                </span>
                            </td>

                            <!-- File Path -->
                            <td class="px-4 py-3 text-sm">
                                <p class="truncate max-w-xs" :title="violation.file_path" x-text="violation.file_path"></p>
                            </td>

                            <!-- Line Number -->
                            <td class="px-4 py-3 text-sm">
                                <p x-text="violation.line_number"></p>
                            </td>

                            <!-- Message -->
                            <td class="px-4 py-3 text-sm">
                                <p class="truncate max-w-md" :title="violation.message" x-text="violation.message"></p>
                            </td>

                            <!-- Status Badge -->
                            <td class="px-4 py-3 text-xs">
                                <span class="px-2 py-1 font-semibold leading-tight rounded-full"
                                      :class="{
                                          'text-gray-700 bg-gray-100 dark:text-gray-100 dark:bg-gray-700': violation.status === 'open',
                                          'text-blue-700 bg-blue-100 dark:text-blue-100 dark:bg-blue-700': violation.status === 'assigned',
                                          'text-green-700 bg-green-100 dark:text-green-100 dark:bg-green-700': violation.status === 'resolved',
                                          'text-orange-700 bg-orange-100 dark:text-orange-100 dark:bg-orange-700': violation.status === 'ignored'
                                      }"
                                      x-text="violation.status">
                                </span>
                            </td>

                            <!-- Actions -->
                            <td class="px-4 py-3">
                                <div class="flex items-center space-x-2">
                                    <a :href="'/admin/code-quality/violations/' + violation.id"
                                       class="flex items-center justify-center p-2 text-purple-600 rounded-lg hover:bg-purple-50 dark:text-purple-400 dark:hover:bg-gray-700 focus:outline-none transition-colors"
                                       title="View Details">
                                        <span x-html="$icon('eye', 'w-5 h-5')"></span>
                                    </a>
                                </div>
                            </td>
                        </tr>
                    </template>
                </tbody>
            </table>
        </div>
    </div>

    <!-- Pagination -->
    <div class="mt-6 px-4 py-3 bg-white border-t border-gray-200 dark:border-gray-700 dark:bg-gray-800 rounded-b-lg">
        <div class="flex items-center justify-between">
            <div class="flex items-center">
                <span class="text-sm text-gray-700 dark:text-gray-400">
                    Showing
                    <span class="font-semibold" x-text="violations.length"></span>
                    of
                    <span class="font-semibold" x-text="pagination.total"></span>
                    results
                </span>
            </div>
            <div class="flex items-center space-x-2">
                <button @click="previousPage()"
                        :disabled="pagination.page === 1"
                        class="px-3 py-1 text-sm font-medium leading-5 text-gray-700 dark:text-gray-300 transition-colors duration-150 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed">
                    <span x-html="$icon('arrow-left', 'w-4 h-4')"></span>
                </button>
                <span class="text-sm text-gray-700 dark:text-gray-400">
                    Page <span x-text="pagination.page"></span> of <span x-text="pagination.total_pages"></span>
                </span>
                <button @click="nextPage()"
                        :disabled="pagination.page === pagination.total_pages"
                        class="px-3 py-1 text-sm font-medium leading-5 text-gray-700 dark:text-gray-300 transition-colors duration-150 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed">
                    <span x-html="$icon('arrow-right', 'w-4 h-4')"></span>
                </button>
            </div>
        </div>
    </div>
</div>
{% endblock %}