<!-- #region DashboardGitManager [C:3] [TYPE Component] [SEMANTICS sveltekit, git, sync, commit, diff] -->
<!-- @BRIEF Git repository status block: status, ahead/behind, changes count, push/pull/sync buttons, and diff preview. -->
<!-- @LAYER UI -->
<!-- @RELATION DEPENDS_ON -> [EXT:frontend:DashboardDetailPage]] -->
<!-- @RELATION CALLS -> [EXT:frontend:api_module] -->
<script lang="ts">
  /**
   * @PURPOSE: Git Repository block (status, ahead/behind, changes count, push/pull/sync buttons, and diff preview).
   * @LAYER UI
   */
  import { t } from "$lib/i18n/index.svelte.js";

  let {
    isGitStatusLoading,
    gitStatusError,
    hasGitRepo,
    gitSyncState,
    gitStatus,
    changedChartsCount,
    changedDatasetsCount,
    allChangedFiles,
    runGitSyncAndOpenCommit,
    isSyncingGit,
    hasChangesToCommit,
    loadGitDiffPreview,
    isGitDiffLoading,
    runGitPull,
    isPullingGit,
    runGitPush,
    isPushingGit,
    gitDiffPreview,
    loadGitStatus,
    showGitManager = $bindable()
  } = $props();
</script>

<div class="rounded-xl border border-slate-200 bg-white p-4 xl:col-span-3">
  <div class="mb-3 flex items-center justify-between gap-2">
    <h2 class="text-sm font-semibold uppercase tracking-wide text-slate-500">
      {$t.git?.management}
    </h2>
    <button
      class="rounded-md border border-slate-300 px-2 py-1 text-xs text-slate-700 hover:bg-slate-50"
      onclick={loadGitStatus}
      disabled={isGitStatusLoading}
    >
      {$t.common?.refresh}
    </button>
  </div>

  {#if isGitStatusLoading}
    <div class="space-y-2">
      {#each Array(3) as _}
        <div class="h-10 animate-pulse rounded bg-slate-100"></div>
      {/each}
    </div>
  {:else if gitStatusError}
    <div class="rounded-lg border border-rose-200 bg-rose-50 px-3 py-2 text-sm text-rose-700">
      {gitStatusError}
    </div>
  {:else if !hasGitRepo}
    <div class="space-y-3 rounded-lg border border-slate-200 bg-slate-50 px-3 py-6 text-sm text-slate-600">
      <div>
        {$t.git?.not_linked}
      </div>
      <button
        class="inline-flex items-center justify-center rounded-lg bg-slate-900 px-3 py-2 text-sm font-medium text-white transition-colors hover:bg-slate-800"
        onclick={() => (showGitManager = true)}
      >
        {$t.git?.init_repo_button || $t.git?.init_repo}
      </button>
    </div>
  {:else}
    <div class="space-y-4">
      <p class="text-sm text-slate-700">
        {#if gitSyncState === "CHANGES"}
          {$t.git?.repo_changes_detected}
        {:else}
          {$t.git?.repo_synced_with_branch?.replace("{branch}", gitStatus?.current_branch || "main")}
        {/if}
      </p>

      <div class="flex flex-wrap gap-2 text-xs text-slate-600">
        <span class="rounded-full bg-slate-100 px-2 py-1">
          {$t.git?.charts_label?.replace("{count}", changedChartsCount)}
        </span>
        <span class="rounded-full bg-slate-100 px-2 py-1">
          {$t.git?.datasets_label?.replace("{count}", changedDatasetsCount)}
        </span>
        <span class="rounded-full bg-slate-100 px-2 py-1">
          {$t.git?.files_label?.replace("{count}", allChangedFiles.length)}
        </span>
      </div>

      <div class="grid gap-2 md:grid-cols-2">
        <button
          class="inline-flex items-center justify-center rounded-lg bg-primary px-3 py-2 text-sm font-medium text-white transition-colors hover:bg-primary-hover disabled:opacity-60"
          onclick={runGitSyncAndOpenCommit}
          disabled={isSyncingGit || !hasChangesToCommit}
        >
          {isSyncingGit ? $t.common?.loading : $t.git?.sync_and_commit}
        </button>
        <button
          class="inline-flex items-center justify-center rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm font-medium text-slate-700 transition-colors hover:bg-slate-50 disabled:opacity-60"
          onclick={loadGitDiffPreview}
          disabled={isGitDiffLoading || !hasChangesToCommit}
        >
          {isGitDiffLoading ? $t.common?.loading : $t.git?.show_diff}
        </button>
      </div>

      <div class="grid gap-2 md:grid-cols-2">
        <button
          class="inline-flex items-center justify-center rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm font-medium text-slate-700 transition-colors hover:bg-slate-50 disabled:opacity-60"
          onclick={runGitPull}
          disabled={isPullingGit}
        >
          {isPullingGit ? $t.common?.loading : $t.git?.pull}
        </button>
        <button
          class="inline-flex items-center justify-center rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm font-medium text-slate-700 transition-colors hover:bg-slate-50 disabled:opacity-60"
          onclick={runGitPush}
          disabled={isPushingGit}
        >
          {#if isPushingGit}
            {$t.common?.loading}
          {:else}
            {$t.git?.push}{#if gitStatus?.ahead_count > 0} ({gitStatus.ahead_count}){/if}
          {/if}
        </button>
      </div>

      {#if gitDiffPreview}
        <div class="max-h-52 overflow-auto rounded-lg border border-slate-200 bg-slate-900 p-3 text-xs text-slate-100">
          <pre class="whitespace-pre-wrap font-mono">{gitDiffPreview}</pre>
        </div>
      {/if}
    </div>
  {/if}
</div>
<!-- #endregion DashboardGitManager -->