<!-- [DEF:frontend/src/components/llm/ValidationReport.svelte:Component] -->
<!-- @TIER: STANDARD -->
<!-- @PURPOSE: Displays the results of an LLM-based dashboard validation task. -->

<script>
  let {
    report,
  } = $props();


    function getStatusColor(status) {
        switch (status) {
            case 'PASS': return 'text-green-600 bg-green-100';
            case 'WARN': return 'text-yellow-600 bg-yellow-100';
            case 'FAIL': return 'text-red-600 bg-red-100';
            default: return 'text-gray-600 bg-gray-100';
        }
    }
</script>

{#if result}
    <div class="bg-white shadow rounded-lg p-6 space-y-6">
        <div class="flex items-center justify-between">
            <h2 class="text-xl font-bold text-gray-900">Validation Report</h2>
            <span class={`px-3 py-1 rounded-full text-sm font-medium ${getStatusColor(result.status)}`}>
                {result.status}
            </span>
        </div>

        <div class="prose max-w-none">
            <h3 class="text-lg font-semibold">Summary</h3>
            <p>{result.summary}</p>
        </div>

        {#if result.issues && result.issues.length > 0}
            <div class="space-y-4">
                <h3 class="text-lg font-semibold">Detected Issues</h3>
                <div class="overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg">
                    <table class="min-w-full divide-y divide-gray-300">
                        <thead class="bg-gray-50">
                            <tr>
                                <th class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900">Severity</th>
                                <th class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Message</th>
                                <th class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Location</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-200 bg-white">
                            {#each result.issues as issue}
                                <tr>
                                    <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm">
                                        <span class={`px-2 py-1 rounded text-xs font-medium ${getStatusColor(issue.severity)}`}>
                                            {issue.severity}
                                        </span>
                                    </td>
                                    <td class="px-3 py-4 text-sm text-gray-500">{issue.message}</td>
                                    <td class="px-3 py-4 text-sm text-gray-500">{issue.location || 'N/A'}</td>
                                </tr>
                            {/each}
                        </tbody>
                    </table>
                </div>
            </div>
        {/if}

        {#if result.screenshot_path}
            <div class="space-y-4">
                <h3 class="text-lg font-semibold">Screenshot</h3>
                <img src={`/api/storage/file?path=${encodeURIComponent(result.screenshot_path)}`} alt="Dashboard Screenshot" class="rounded-lg border border-gray-200 shadow-sm max-w-full" />
            </div>
        {/if}
    </div>
{:else}
    <div class="text-center py-12 bg-gray-50 rounded-lg border-2 border-dashed border-gray-300">
        <p class="text-gray-500">No validation result available.</p>
    </div>
{/if}

<!-- [/DEF:frontend/src/components/llm/ValidationReport.svelte] -->