@props([
    'stages',
    'hrefFor' => null,
])

@php
    $stages = collect($stages);
    $max = max(1, (int) $stages->max('count'));
@endphp

{{--
    Funnel built from the workspace's own pipeline_stages — names, order, colours and
    won/lost flags all come from the database, nothing is hard-coded. Each row shows the
    step conversion from the stage above it and the share retained from the funnel's top.
--}}
<ol {{ $attributes->merge(['class' => 'space-y-3']) }}>
    @foreach ($stages as $stage)
        @php
            $href = $hrefFor ? $hrefFor($stage) : null;
            $width = max(6, $stage['count'] / $max * 100);
            $color = $stage['color'] ?: ($stage['isWon'] ? '#059669' : ($stage['isLost'] ? '#e11d48' : 'var(--panel-primary)'));
        @endphp

        <li>
            <{{ $href ? 'a' : 'div' }}
                @if ($href) href="{{ $href }}" wire:navigate @endif
                class="group block {{ $href ? 'cursor-pointer' : '' }}"
            >
                <div class="mb-1 flex flex-wrap items-baseline justify-between gap-x-3 gap-y-1">
                    <span class="flex items-center gap-2 text-sm font-medium text-[var(--panel-text)]">
                        <span class="h-2 w-2 shrink-0 rounded-full" style="background: {{ $color }}" aria-hidden="true"></span>
                        <span class="{{ $href ? 'group-hover:underline' : '' }}">{{ $stage['name'] }}</span>

                        @if ($stage['isWon'])
                            <span class="rounded bg-emerald-50 px-1.5 py-0.5 text-[10px] font-bold text-emerald-700">برنده</span>
                        @elseif ($stage['isLost'])
                            <span class="rounded bg-rose-50 px-1.5 py-0.5 text-[10px] font-bold text-rose-700">ازدست‌رفته</span>
                        @endif
                    </span>

                    <span class="ltr-numerals text-xs text-[var(--panel-muted)]">
                        {{ $stage['count'] }} معامله · {{ number_format($stage['amount']) }}
                    </span>
                </div>

                <div class="h-7 w-full overflow-hidden rounded-md bg-[var(--panel-surface-muted)]">
                    <div class="flex h-full items-center justify-start rounded-md px-2 transition-[width] duration-500"
                         style="width: {{ round($width, 2) }}%; background: {{ $color }}">
                        @if ($stage['totalRate'] !== null && $width > 18)
                            <span class="ltr-numerals text-[10px] font-bold text-white">{{ $stage['totalRate'] }}٪</span>
                        @endif
                    </div>
                </div>

                @if ($stage['stepRate'] !== null && ! $loop->first)
                    <p class="mt-1 flex items-center gap-1 text-[11px] text-[var(--panel-muted-soft)]">
                        {{-- RTL: the arrow points left, following the reading direction. --}}
                        <svg class="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 12H5m0 0l6 6m-6-6l6-6"/>
                        </svg>
                        <span class="ltr-numerals">{{ $stage['stepRate'] }}٪</span>
                        <span>تبدیل از مرحله قبل</span>
                    </p>
                @endif
            </{{ $href ? 'a' : 'div' }}>
        </li>
    @endforeach
</ol>