<script lang="ts">
  import { AlertTriangle, GitBranch, LoaderCircle, Trash2, X } from "@lucide/svelte";
  import type { GitBranch as GitBranchInfo } from "../types";

  interface Props {
    branch: GitBranchInfo;
    force: boolean;
    isBusy: boolean;
    onConfirm: () => void | Promise<void>;
    onClose: () => void;
  }

  let {
    branch,
    force = false,
    isBusy = false,
    onConfirm = () => {},
    onClose = () => {},
  }: Props = $props();

  let title = $derived(branch.remote ? "Delete remote branch?" : force ? "Force delete branch?" : "Delete branch?");
  let remoteParts = $derived(branch.remote ? branch.name.split(/\/(.+)/) : []);
  let branchName = $derived(branch.remote ? remoteParts[1] || branch.name : branch.name);
  let branchLocation = $derived(branch.remote ? remoteParts[0] || "Remote" : "Local repository");

</script>

<div class="dialog-backdrop" role="presentation">
  <div class="dialog branch-delete-dialog" role="dialog" aria-modal="true" aria-labelledby="branch-delete-title">
    <header class="dialog-header branch-delete-header">
      <div class="branch-delete-heading">
        <span class:force class="branch-delete-heading-icon" aria-hidden="true">
          <Trash2 size={16} />
        </span>
        <div>
        <span class="eyebrow">{branch.remote ? "Remote branch" : force ? "Force delete" : "Delete branch"}</span>
          <p class="dialog-title" id="branch-delete-title">{title}</p>
        </div>
      </div>
      <button class="btn-sm dialog-close" type="button" onclick={onClose} disabled={isBusy} aria-label="Close">
        <X size={16} aria-hidden="true" />
      </button>
    </header>

    <div class="branch-delete-body">
      <div class:force class="discard-warning-icon branch-delete-warning-icon" aria-hidden="true">
        <AlertTriangle size={22} />
      </div>

      <div class="discard-confirm-copy">
        <p class="branch-delete-lead">
          {#if branch.remote}
            This branch will be removed from the shared remote repository.
          {:else if force}
            This branch is not fully merged. Some commits may only exist here.
          {:else}
            This branch will be removed from your local repository.
          {/if}
        </p>
        <div class="branch-delete-target" title={branch.name}>
          <span class="branch-delete-target-icon" aria-hidden="true"><GitBranch size={16} /></span>
          <span class="branch-delete-target-copy">
            <code>{branchName}</code>
            <span>{branchLocation}</span>
          </span>
          <span class:remote={branch.remote} class="branch-delete-scope">{branch.remote ? "Remote" : "Local"}</span>
        </div>
        <p class="discard-warning-text">
          {#if branch.remote}
            This affects everyone using <strong>{remoteParts[0] || "the remote"}</strong>. Your local branch is kept.
          {:else if force}
            Force deletion can make unmerged commits difficult to recover.
          {:else}
            Git will stop the deletion if the branch contains unmerged commits.
          {/if}
        </p>
      </div>
    </div>

    <footer class="discard-confirm-actions">
      <button class="btn-secondary" type="button" onclick={onClose} disabled={isBusy}>Cancel</button>
      <button class="btn-danger branch-delete-confirm" type="button" onclick={onConfirm} disabled={isBusy}>
        {#if isBusy}
          <LoaderCircle class="spin" size={15} aria-hidden="true" />
        {:else}
          <Trash2 size={15} aria-hidden="true" />
        {/if}
        {branch.remote ? "Delete from remote" : force ? "Force delete" : "Delete"}
      </button>
    </footer>
  </div>
</div>
