<script lang="ts">
  import { GitCompare, History, RotateCcw } from "@lucide/svelte";
  import type { GitCommit } from "../types";

  interface Props {
    fileHistory: GitCommit[];
    selectedExplorerPath: string;
    selectedExplorerLabel: string;
    hasRepository: boolean;
    isBusy: boolean;
    onDiff: (commit: GitCommit) => void;
    onRestore: (commit: GitCommit) => void;
  }

  let {
    fileHistory = [],
    selectedExplorerPath = "",
    selectedExplorerLabel = "File history",
    hasRepository = false,
    isBusy = false,
    onDiff = () => {},
    onRestore = () => {},
  }: Props = $props();

  function formatCommitDate(value: string): string {
    const date = new Date(value);
    if (Number.isNaN(date.getTime())) return value;
    return new Intl.DateTimeFormat(undefined, { dateStyle: "medium", timeStyle: "short" }).format(date);
  }
</script>

<section class="panel grid grid-rows-[auto_1fr] overflow-hidden" aria-label="Selected file history">
  <div class="section-head">
    <div class="min-w-0">
      <span class="eyebrow">{selectedExplorerLabel}</span>
      <h2 class="mt-0.5 text-ink text-base font-bold leading-tight truncate">{selectedExplorerPath || "No file"}</h2>
    </div>
    <span class="pill pill-count flex-shrink-0">{fileHistory.length}</span>
  </div>

  {#if !hasRepository}
    <div class="blank-state">No repository loaded.</div>
  {:else if !selectedExplorerPath}
    <div class="blank-state">Select a file in Explorer.</div>
  {:else if fileHistory.length === 0}
    <div class="blank-state">No history returned for this selection.</div>
  {:else}
    <div class="history-list overflow-auto p-2">
      {#each fileHistory as item (item.hash)}
        <article class="commit-row compact">
          <div class="commit-line">
            <History size={16} aria-hidden="true" />
            <div>
              <strong title={item.summary}>{item.summary}</strong>
              <span>{item.short_hash} - {item.author_name}</span>
            </div>
          </div>

          <div class="commit-actions">
            <time datetime={item.date}>{formatCommitDate(item.date)}</time>
            <div class="commit-action-buttons">
              <button class="btn-sm" type="button" onclick={() => onDiff(item)} disabled={isBusy} title="Show changes vs working tree">
                <GitCompare size={15} aria-hidden="true" />
                Diff
              </button>
              <button class="btn-sm" type="button" onclick={() => onRestore(item)} disabled={isBusy} title="Restore selected file from this commit">
                <RotateCcw size={15} aria-hidden="true" />
                Restore
              </button>
            </div>
          </div>
        </article>
      {/each}
    </div>
  {/if}
</section>
