<!-- #region GitReleasePanel [C:3] [TYPE Component] [SEMANTICS git, release, promote, merge, branch] -->
<!-- @BRIEF Git release panel: promote branches via MR or direct mode. -->
<!-- @LAYER UI -->
<!-- @RELATION DEPENDS_ON -> [GitUtils] -->
<!-- @RELATION CALLS -> [EXT:frontend:gitService] -->
<!-- @UX_STATE Idle -> Pipeline status and promote button. -->
<!-- @UX_STATE Advanced -> Expandable branch/reason settings. -->
<script lang="ts">
  import { t } from "$lib/i18n/index.svelte.js";
  import { Button, Input, Select } from "$lib/ui";
  import { stageBadgeClass } from "../../services/git-utils.js";

  let {
    currentEnvStage,
    promoteFromBranch = $bindable(),
    promoteToBranch = $bindable(),
    promoteMode = $bindable(),
    promoteReason = $bindable(),
    preferredDeployTargetStage,
    showAdvancedPromote = $bindable(),
    promoting,
    onPromote,
  } = $props();
</script>

<div class="space-y-4">
  <div class="rounded-lg border border-slate-200 bg-slate-50 p-4">
    <div class="mb-3 text-sm font-semibold text-slate-700">Текущий статус пайплайна</div>
    <div class="flex flex-wrap items-center gap-2 text-sm">
      <span class={`rounded-full border px-3 py-1 font-semibold ${stageBadgeClass('DEV')}`}>DEV (dev)</span>
      <span class="text-slate-400">➔</span>
      <span class={`rounded-full border px-3 py-1 font-semibold ${stageBadgeClass('PREPROD')}`}>PREPROD (preprod)</span>
      <span class="text-slate-400">➔</span>
      <span class={`rounded-full border px-3 py-1 font-semibold ${stageBadgeClass('PROD')}`}>PROD (main)</span>
    </div>
    {#if preferredDeployTargetStage}
      <p class="mt-2 text-xs text-slate-600">
        Следующий шаг по GitFlow: <strong>{promoteFromBranch} ➔ {promoteToBranch}</strong>
      </p>
    {/if}
  </div>

  <Button
    onclick={onPromote}
    disabled={promoting || !promoteFromBranch || !promoteToBranch || promoteFromBranch === promoteToBranch}
    isLoading={promoting}
    class={`w-full ${promoteMode === 'direct' ? 'bg-destructive hover:bg-destructive-hover focus-visible:ring-red-500' : ''}`}
  >
    {promoteMode === 'direct'
      ? `Прямой перенос ${promoteFromBranch} ➔ ${promoteToBranch} (unsafe)`
      : `Создать Merge Request (${promoteFromBranch} ➔ ${promoteToBranch})`}
  </Button>

  <button
    class="text-sm text-slate-600 hover:text-slate-900"
    onclick={() => (showAdvancedPromote = !showAdvancedPromote)}
  >
    {showAdvancedPromote ? '▴ Скрыть advanced settings' : '▾ Advanced settings'}
  </button>

  {#if showAdvancedPromote}
    <div class="space-y-3 rounded-lg border border-slate-200 p-3">
      <div class="grid grid-cols-1 gap-2 md:grid-cols-2">
        <Input
          label="From branch"
          bind:value={promoteFromBranch}
          placeholder="dev"
        />
        <Input
          label="To branch"
          bind:value={promoteToBranch}
          placeholder="preprod"
        />
      </div>
      <Select
        label="Promotion mode"
        bind:value={promoteMode}
        options={[
          { value: 'mr', label: 'Create MR/PR (Safe)' },
          { value: 'direct', label: 'Direct merge without MR (Unsafe)' },
        ]}
      />
      {#if promoteMode === 'direct'}
        <div class="rounded-lg border border-destructive-ring bg-destructive-light p-3 text-sm text-red-800">
          <div class="font-semibold">Внимание: прямой перенос без MR</div>
          <div class="mt-1">Это обходит процесс аппрува и записывается в audit лог.</div>
        </div>
        <Input
          label="Причина (обязательно)"
          bind:value={promoteReason}
          placeholder="Почему bypass MR?"
        />
      {/if}
    </div>
  {/if}
</div>
<!-- #endregion GitReleasePanel -->
