<!-- #region CommitModal [C:3] [TYPE Component] [SEMANTICS git, commit, modal, diff, message] -->
<!-- @BRIEF Modal for creating commits with diff preview and AI message generation. -->
<!-- @LAYER UI -->
<!--
@UX_STATE: Loading -> Spinner in diff area, generate/commit buttons disabled.
@UX_STATE: Ready -> Commit message, status, and diff preview available.
@UX_STATE: Submitting -> Commit buttons disabled while request is in flight.
@UX_STATE: Generating -> Generate message button shows spinner and "Generating..." label.
@UX_RECOVERY Error toast on commit failure; regenerate message on generation failure.
@UX_REACTIVITY Props -> $props(), Model -> CommitModel
-->
<!-- @RELATION BINDS_TO -> [CommitModel] -->
<!-- @INVARIANT This component contains NO business logic — all state and actions are delegated to CommitModel. -->

<script lang="ts">
  import { onMount } from 'svelte';
  import { CommitModel } from '$lib/models/CommitModel.svelte.ts';
  import { t } from '$lib/i18n/index.svelte.js';

  let { dashboardId, envId = null, show = false } = $props();

  const model = new CommitModel({ dashboardId, envId, show });

  // Sync show prop changes to model
  $effect(() => {
    model.dashboardId = dashboardId;
    model.envId = envId;
    model.show = show;
  });

  // Load status when modal opens
  $effect(() => {
    if (show) model.loadStatus();
  });
</script>

{#if show}
  <div
    class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4"
  >
    <div
      class="bg-white p-6 rounded-lg shadow-xl w-full max-w-4xl max-h-[90vh] flex flex-col"
    >
      <h2 class="text-xl font-bold mb-4">{$t.git?.commit}</h2>

      <div class="flex flex-col md:flex-row gap-4 flex-1 overflow-hidden">
        <!-- Left: Message and Files -->
        <div class="w-full md:w-1/3 flex flex-col">
          <div class="mb-4">
            <div class="flex justify-between items-center mb-1">
              <label class="block text-sm font-medium text-gray-700"
                >{$t.git?.commit_message}</label
              >
              <button
                onclick={() => model.handleGenerateMessage()}
                disabled={model.generatingMessage || model.loading}
                class="text-xs text-primary hover:text-blue-800 disabled:opacity-50 flex items-center"
              >
                {#if model.generatingMessage}
                  <span class="animate-spin mr-1">↻</span> {$t.mapper?.generating}
                {:else}
                  <span class="mr-1">✨</span> {$t.git?.generate_with_ai}
                {/if}
              </button>
            </div>
            <textarea
              bind:value={model.message}
              class="w-full border rounded p-2 h-32 focus-visible:ring-2 focus-visible:ring-primary-ring outline-none resize-none"
              placeholder={$t.git?.describe_changes}
            ></textarea>
          </div>

          {#if model.status}
            <div class="flex-1 overflow-y-auto">
              <h3 class="text-sm font-bold text-gray-500 uppercase mb-2">
                {$t.git?.changed_files}
              </h3>
              <ul class="text-xs space-y-1">
                {#each model.status.staged_files as file}
                  <li
                    class="text-green-600 flex items-center font-semibold"
                    title={$t.git?.staged}
                  >
                    <span class="mr-2">S</span>
                    {file}
                  </li>
                {/each}
                {#each model.status.modified_files as file}
                  <li
                    class="text-yellow-600 flex items-center"
                    title={$t.git?.modified_unstaged}
                  >
                    <span class="mr-2">M</span>
                    {file}
                  </li>
                {/each}
                {#each model.status.untracked_files as file}
                  <li
                    class="text-primary flex items-center"
                    title={$t.git?.untracked}
                  >
                    <span class="mr-2">?</span>
                    {file}
                  </li>
                {/each}
              </ul>
            </div>
          {/if}
        </div>

        <!-- Right: Diff Viewer -->
        <div
          class="w-full md:w-2/3 flex flex-col overflow-hidden border rounded bg-gray-50"
        >
          <div class="bg-gray-200 px-3 py-1 text-xs font-bold text-gray-600 border-b">
            {$t.git?.changes_preview}
          </div>
          <div class="flex-1 overflow-auto p-2">
            {#if model.loading}
              <div class="flex items-center justify-center h-full text-gray-500">
                {$t.git?.loading_diff}
              </div>
            {:else if model.diff}
              <pre class="text-xs font-mono whitespace-pre-wrap">{model.diff}</pre>
            {:else}
              <div class="flex items-center justify-center h-full text-gray-500 italic">
                {$t.git?.no_changes}
              </div>
            {/if}
          </div>
        </div>
      </div>

      <div class="flex justify-end space-x-3 mt-6 pt-4 border-t">
        <button
          onclick={() => (show = false)}
          class="px-4 py-2 text-gray-600 hover:bg-gray-100 rounded"
        >
          {$t.common?.cancel}
        </button>
        <button
          onclick={() => model.handleCommit()}
          disabled={!model.canCommit}
          class="px-4 py-2 bg-primary text-white rounded hover:bg-primary-hover disabled:opacity-50"
        >
          {model.committing ? $t.git?.committing : $t.git?.commit}
        </button>
      </div>
    </div>
  </div>
{/if}
<!-- #endregion CommitModal -->
