<!-- [DEF:CommitHistory:Component] -->
<!--
@SEMANTICS: git, history, commits, audit
@PURPOSE:   Displays the commit history for a specific dashboard.
@LAYER:     Component
@RELATION:  CALLS -> gitService.getHistory
-->

<script>
    // [SECTION: IMPORTS]
    import { onMount } from 'svelte';
    import { gitService } from '../../services/gitService';
    import { addToast as toast } from '../../lib/toasts.js';
    // [/SECTION]

    // [SECTION: PROPS]
    export let dashboardId;
    // [/SECTION]

    // [SECTION: STATE]
    let history = [];
    let loading = false;
    // [/SECTION]

    // [DEF:onMount:Function]
    /**
     * @purpose Load history when component is mounted.
     */
    onMount(async () => {
        await loadHistory();
    });
    // [/DEF:onMount:Function]

    // [DEF:loadHistory:Function]
    /**
     * @purpose Fetch commit history from the backend.
     * @post history state is updated.
     */
    async function loadHistory() {
        console.log(`[CommitHistory][Action] Loading history for dashboard ${dashboardId}`);
        loading = true;
        try {
            history = await gitService.getHistory(dashboardId);
            console.log(`[CommitHistory][Coherence:OK] Loaded ${history.length} commits`);
        } catch (e) {
            console.error(`[CommitHistory][Coherence:Failed] ${e.message}`);
            toast('Failed to load commit history', 'error');
        } finally {
            loading = false;
        }
    }
    // [/DEF:loadHistory:Function]
</script>

<!-- [SECTION: TEMPLATE] -->
<div class="mt-6">
    <h3 class="text-lg font-semibold mb-4 flex justify-between items-center">
        Commit History
        <button on:click={loadHistory} class="text-sm text-blue-600 hover:underline">Refresh</button>
    </h3>

    {#if loading}
        <div class="flex items-center space-x-2 text-gray-500">
            <svg class="animate-spin h-4 w-4 text-blue-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
            </svg>
            <span>Loading history...</span>
        </div>
    {:else if history.length === 0}
        <p class="text-gray-500 italic">No commits yet.</p>
    {:else}
        <div class="space-y-3 max-h-96 overflow-y-auto pr-2">
            {#each history as commit}
                <div class="border-l-2 border-blue-500 pl-4 py-1">
                    <div class="flex justify-between items-start">
                        <span class="font-medium text-sm">{commit.message}</span>
                        <span class="text-xs text-gray-400 font-mono">{commit.hash.substring(0, 7)}</span>
                    </div>
                    <div class="text-xs text-gray-500 mt-1">
                        {commit.author} • {new Date(commit.timestamp).toLocaleString()}
                    </div>
                </div>
            {/each}
        </div>
    {/if}
</div>
<!-- [/SECTION] -->

<!-- [/DEF:CommitHistory:Component] -->