@php
    $canCreate = auth()->user()->can('create', \App\Models\Workflow::class);
    $badges = ['draft' => 'bg-amber-100 text-amber-700', 'active' => 'bg-emerald-100 text-emerald-700', 'archived' => 'bg-gray-100 text-gray-500'];
    $hasFilters = filled($search) || $status !== 'all';
@endphp

<div>
    <div class="mb-5 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
        <div>
            <h1 class="text-lg font-bold text-gray-800">Workflowها</h1>
            <p class="text-sm text-gray-500">روند خودکار پیامک و پیگیری: هر مرحله (پیامک، انتظار، شرط) را خودتان تعریف می‌کنید و در کمپین‌های مختلف به‌کار می‌برید.</p>
        </div>

        @if ($canCreate)
            <x-primary-button type="button" wire:click="openCreate">+ Workflow جدید</x-primary-button>
        @endif
    </div>

    <div class="mb-4 grid gap-3 rounded-lg border border-gray-200 bg-white p-4 sm:grid-cols-3">
        <div class="sm:col-span-2">
            <label class="mb-1 block text-xs text-gray-500">جستجو</label>
            <input type="text" wire:model.live.debounce.400ms="search" class="w-full rounded-md border-gray-300 text-sm" placeholder="نام یا توضیحات">
        </div>
        <div>
            <label class="mb-1 block text-xs text-gray-500">وضعیت</label>
            <select wire:model.live="status" class="w-full rounded-md border-gray-300 text-sm">
                <option value="all">همه</option>
                @foreach ($statuses as $case)
                    <option value="{{ $case->value }}">{{ $case->label() }}</option>
                @endforeach
            </select>
        </div>
    </div>

    <div class="grid gap-4 md:grid-cols-2">
        @forelse ($workflows as $workflow)
            <a wire:key="workflow-{{ $workflow->id }}" href="{{ route('automation.workflows.show', $workflow) }}" wire:navigate
                class="block rounded-xl border border-gray-200 bg-white p-4 shadow-sm transition hover:border-indigo-300">
                <div class="flex items-start justify-between gap-2">
                    <h2 class="font-medium text-gray-900">{{ $workflow->name }}</h2>
                    <span class="shrink-0 rounded-full px-2 py-0.5 text-xs {{ $badges[$workflow->status->value] }}">{{ $workflow->status->label() }}</span>
                </div>
                @if ($workflow->description)
                    <p class="mt-1 line-clamp-2 text-sm text-gray-500">{{ $workflow->description }}</p>
                @endif
                <div class="mt-3 flex flex-wrap items-center gap-x-4 gap-y-1 text-xs text-gray-500">
                    <span>{{ $workflow->publishedVersion ? 'نسخهٔ منتشرشده: '.$workflow->publishedVersion->version_number : 'هنوز منتشر نشده' }}</span>
                    <span>کمپین‌ها: <span class="ltr-numerals">{{ $workflow->campaigns_count }}</span>@if (($running[$workflow->id] ?? 0) > 0) (<span class="ltr-numerals">{{ $running[$workflow->id] }}</span> فعال)@endif</span>
                    <span>ویرایش: <span class="ltr-numerals">@ldate($workflow->updated_at)</span></span>
                </div>
            </a>
        @empty
            <p class="rounded-xl border border-dashed border-gray-200 p-8 text-center text-sm text-gray-400 md:col-span-2">
                {{ $hasFilters ? 'Workflowی با این فیلترها پیدا نشد.' : 'هنوز Workflowی ساخته نشده است. از یک قالب آماده شروع کنید.' }}
            </p>
        @endforelse
    </div>

    @if ($canCreate)
        <x-modal name="create-workflow" :show="$errors->has('name')" focusable max-width="2xl">
            <form wire:submit="create" class="space-y-4 p-6">
                <h2 class="text-base font-bold text-gray-800">Workflow جدید</h2>

                <div>
                    <x-input-label for="wf-name" value="نام" />
                    <x-text-input wire:model="name" id="wf-name" type="text" class="mt-1 block w-full" placeholder="مثلاً معرفی محصول به مشتریان جدید" />
                    <x-input-error :messages="$errors->get('name')" class="mt-2" />
                </div>

                <div>
                    <x-input-label for="wf-description" value="توضیحات (اختیاری)" />
                    <textarea wire:model="description" id="wf-description" rows="2" class="mt-1 block w-full rounded-md border-gray-300 text-sm shadow-sm"></textarea>
                </div>

                <div>
                    <p class="mb-2 text-sm font-medium text-gray-700">شروع از</p>
                    <div class="grid gap-2 sm:grid-cols-2">
                        <label @class(['flex cursor-pointer items-start gap-2 rounded-lg border p-3 text-sm', 'border-indigo-500 bg-indigo-50' => $template === '', 'border-gray-200' => $template !== ''])>
                            <input type="radio" wire:model.live="template" value="" class="mt-1">
                            <span><span class="block font-medium text-gray-800">Workflow خالی</span><span class="text-xs text-gray-500">مرحله‌ها را خودتان اضافه می‌کنید.</span></span>
                        </label>

                        @foreach ($systemTemplates as $key => $info)
                            <label wire:key="tpl-{{ $key }}" @class(['flex cursor-pointer items-start gap-2 rounded-lg border p-3 text-sm', 'border-indigo-500 bg-indigo-50' => $template === $key, 'border-gray-200' => $template !== $key])>
                                <input type="radio" wire:model.live="template" value="{{ $key }}" class="mt-1">
                                <span><span class="block font-medium text-gray-800">{{ $info['name'] }}</span><span class="text-xs text-gray-500">{{ $info['description'] }}</span></span>
                            </label>
                        @endforeach

                        @foreach ($ownTemplates as $own)
                            <label wire:key="own-{{ $own->id }}" @class(['flex cursor-pointer items-start gap-2 rounded-lg border p-3 text-sm', 'border-indigo-500 bg-indigo-50' => $template === 'workspace:'.$own->id, 'border-gray-200' => $template !== 'workspace:'.$own->id])>
                                <input type="radio" wire:model.live="template" value="workspace:{{ $own->id }}" class="mt-1">
                                <span><span class="block font-medium text-gray-800">{{ $own->name }} <span class="text-xs font-normal text-indigo-600">قالب شما</span></span><span class="text-xs text-gray-500">{{ $own->description }}</span></span>
                            </label>
                        @endforeach
                    </div>
                    <p class="mt-2 text-xs text-gray-400">قالب فقط یک نقطهٔ شروع است؛ متن و مراحل بعد از ساخت قابل ویرایش‌اند.</p>
                </div>

                <div class="flex justify-end gap-2">
                    <x-secondary-button type="button" x-on:click="$dispatch('close-modal', 'create-workflow')">انصراف</x-secondary-button>
                    <x-primary-button wire:loading.attr="disabled">ساخت و ویرایش</x-primary-button>
                </div>
            </form>
        </x-modal>
    @endif
</div>