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

<script>
  import { t } from '$lib/i18n';
  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">{$t.llm?.validation_report_title}</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">{$t.reports?.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">{$t.tasks?.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">{$t.reports?.severity}</th>
                                <th class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">{$t.reports?.message}</th>
                                <th class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">{$t.tasks?.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 || $t.common?.not_available}</td>
                                </tr>
                            {/each}
                        </tbody>
                    </table>
                </div>
            </div>
        {/if}

        {#if result.screenshot_path}
            <div class="space-y-4">
                <h3 class="text-lg font-semibold">{$t.dashboard?.screenshot_strategy}</h3>
                <img src={`/api/storage/file?path=${encodeURIComponent(result.screenshot_path)}`} alt={$t.dashboard?.dashboard_validation} 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">{$t.llm?.no_validation_result}</p>
    </div>
{/if}

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