{{--
    One list of steps and what closes it (an end card, or — after a condition — its two branches).
    Recursive: a condition includes this same partial for each branch.
    Expects: $seq, $path ('' for the top list, "steps.2.yes" for a branch), $readOnly, $flat, $describer.
--}}
@php
    $listPath = $path === '' ? 'steps' : $path.'.steps';
    $steps = $seq['steps'] ?? [];
    $count = count($steps);
    $endsWithCondition = $count > 0 && ($steps[$count - 1]['type'] ?? '') === 'condition';
    $kinds = ['action' => ['پیامک', 'bg-indigo-100 text-indigo-700'], 'wait' => ['انتظار', 'bg-sky-100 text-sky-700'], 'condition' => ['شرط', 'bg-amber-100 text-amber-700']];
@endphp

<div class="relative space-y-2 border-s-2 border-dashed border-gray-200 ps-4">
    @foreach ($steps as $i => $step)
        @php
            $stepPath = $listPath.'.'.$i;
            [$kindLabel, $kindClass] = $kinds[$step['type']];
            $enabled = $step['is_enabled'] ?? true;
        @endphp

        @include('livewire.automation.workflows._insert', ['listPath' => $listPath, 'index' => $i, 'allowCondition' => false, 'readOnly' => $readOnly])

        <div wire:key="step-{{ $step['key'] }}" @class(['rounded-lg border bg-white p-3 shadow-sm', 'border-gray-200' => $enabled, 'border-dashed border-gray-300 opacity-60' => ! $enabled])>
            <div class="flex items-start justify-between gap-2">
                <div class="min-w-0 flex-1">
                    <div class="flex flex-wrap items-center gap-2">
                        <span class="rounded-full px-2 py-0.5 text-[11px] {{ $kindClass }}">{{ $kindLabel }}</span>
                        <span class="text-sm font-medium text-gray-800">{{ $step['name'] }}</span>
                        @unless ($enabled)
                            <span class="rounded-full bg-gray-100 px-2 py-0.5 text-[11px] text-gray-500">غیرفعال</span>
                        @endunless
                    </div>
                    <p class="mt-1 whitespace-pre-line break-words text-xs leading-6 text-gray-500">{{ $describer->describe($step) }}</p>
                    @if (($step['type'] ?? '') === 'action' && ($step['config']['retry']['enabled'] ?? false))
                        <p class="mt-1 text-[11px] text-gray-400">تلاش مجدد: تا {{ (int) ($step['config']['retry']['max_attempts'] ?? 0) }} بار</p>
                    @endif
                </div>

                @unless ($readOnly)
                    <div class="flex shrink-0 items-center gap-1 text-xs">
                        <button type="button" wire:click="editStep('{{ $stepPath }}')" class="rounded px-2 py-1 text-indigo-600 hover:bg-indigo-50">ویرایش</button>
                        @if ($step['type'] !== 'condition')
                            <button type="button" wire:click="moveStep('{{ $stepPath }}', -1)" class="rounded px-1.5 py-1 text-gray-500 hover:bg-gray-100" aria-label="بالا">↑</button>
                            <button type="button" wire:click="moveStep('{{ $stepPath }}', 1)" class="rounded px-1.5 py-1 text-gray-500 hover:bg-gray-100" aria-label="پایین">↓</button>
                        @endif
                        <button type="button" wire:click="toggleStep('{{ $stepPath }}')" class="rounded px-1.5 py-1 text-gray-500 hover:bg-gray-100">{{ $enabled ? 'خاموش' : 'روشن' }}</button>
                        <button type="button" wire:click="removeStep('{{ $stepPath }}')" wire:confirm="این مرحله{{ $step['type'] === 'condition' ? ' و هر دو شاخه‌اش' : '' }} حذف شود؟" class="rounded px-1.5 py-1 text-rose-600 hover:bg-rose-50" aria-label="حذف">✕</button>
                    </div>
                @endunless
            </div>
        </div>

        @if ($step['type'] === 'condition')
            <div class="grid gap-3 md:grid-cols-2">
                @foreach (['yes' => ['اگر شرط برقرار بود', 'border-emerald-300'], 'no' => ['اگر برقرار نبود', 'border-rose-300']] as $branch => [$branchLabel, $branchBorder])
                    <div wire:key="branch-{{ $step['key'] }}-{{ $branch }}" class="rounded-lg border {{ $branchBorder }} bg-gray-50/60 p-3">
                        <p class="mb-2 text-xs font-medium text-gray-600">{{ $branchLabel }}</p>
                        @include('livewire.automation.workflows._sequence', ['seq' => $step[$branch], 'path' => $stepPath.'.'.$branch, 'readOnly' => $readOnly, 'flat' => $flat, 'describer' => $describer])
                    </div>
                @endforeach
            </div>
        @endif
    @endforeach

    @unless ($endsWithCondition)
        @include('livewire.automation.workflows._insert', ['listPath' => $listPath, 'index' => $count, 'allowCondition' => true, 'readOnly' => $readOnly])

        @php
            $end = $seq['end'] ?? null;
        @endphp
        @if ($end)
            <div wire:key="end-{{ $end['key'] }}" class="rounded-lg border border-gray-300 bg-gray-100 p-3">
                <div class="flex items-center justify-between gap-2">
                    <div class="flex flex-wrap items-center gap-2">
                        <span class="rounded-full bg-gray-200 px-2 py-0.5 text-[11px] text-gray-700">پایان</span>
                        <span class="text-xs text-gray-600">{{ $describer->describeEnd($end, $flat) }}</span>
                    </div>
                    @unless ($readOnly)
                        <button type="button" wire:click="editEnd('{{ $path }}')" class="rounded px-2 py-1 text-xs text-indigo-600 hover:bg-indigo-50">تغییر</button>
                    @endunless
                </div>
            </div>
        @endif
    @endunless
</div>