{{--
    Renders one BlockField as an input bound to $path.

    Every block type's editor is generated from this file, so adding a block type
    requires no new form markup. Adding a new FieldType requires one case here.

    @param \App\Domain\Website\Blocks\BlockField $field
    @param string $path   wire:model path, e.g. "form.title" or "form.items.0.title"
--}}
@php
    use App\Domain\Website\Blocks\FieldType;
    $id = 'f-' . \Illuminate\Support\Str::slug(str_replace('.', '-', $path));
    $label = $field->label;
@endphp

<div class="flex flex-col gap-1.5"
     @if ($field->showIf)
         x-show="$wire.form?.{{ $field->showIf }} == {{ json_encode($field->showIfValue) }}" x-cloak
     @endif>

    @if ($field->type !== FieldType::Toggle)
        <label for="{{ $id }}" class="text-sm font-medium">
            {{ $label }}@if ($field->required) <span class="text-red-500" aria-hidden="true">*</span>@endif
        </label>
    @endif

    @switch ($field->type)

        @case (FieldType::Repeater)
            <div class="rounded-lg border divide-y bg-gray-50/60">
                @foreach (($this->form[$field->key] ?? []) as $i => $row)
                    <div class="p-3 space-y-3" wire:key="rep-{{ $field->key }}-{{ $i }}">
                        <div class="flex items-center justify-between">
                            <span class="text-xs font-semibold text-gray-500">#{{ $i + 1 }}</span>
                            <div class="flex items-center gap-1">
                                <button type="button" wire:click="moveRepeaterRow('{{ $field->key }}', {{ $i }}, -1)"
                                        class="p-1 text-gray-400 hover:text-gray-700" aria-label="{{ __('لأعلى') }}">
                                    <x-ui.icon name="chevron-up" class="w-4 h-4" />
                                </button>
                                <button type="button" wire:click="moveRepeaterRow('{{ $field->key }}', {{ $i }}, 1)"
                                        class="p-1 text-gray-400 hover:text-gray-700" aria-label="{{ __('لأسفل') }}">
                                    <x-ui.icon name="chevron-down" class="w-4 h-4" />
                                </button>
                                <button type="button" wire:click="removeRepeaterRow('{{ $field->key }}', {{ $i }})"
                                        class="p-1 text-red-500 hover:text-red-700" aria-label="{{ __('حذف') }}">
                                    <x-ui.icon name="trash" class="w-4 h-4" />
                                </button>
                            </div>
                        </div>
                        @foreach ($field->fields as $sub)
                            @include('website.builder.field', [
                                'field' => $sub,
                                'path' => "{$path}.{$i}.{$sub->key}",
                            ])
                        @endforeach
                    </div>
                @endforeach

                <div class="p-3">
                    <button type="button" wire:click="addRepeaterRow('{{ $field->key }}')"
                            @if ($field->max) @disabled(count($this->form[$field->key] ?? []) >= $field->max) @endif
                            class="inline-flex items-center gap-1.5 text-sm text-primary-600 font-medium disabled:opacity-40">
                        <x-ui.icon name="plus" class="w-4 h-4" /> {{ __('إضافة') }}
                    </button>
                    @if ($field->max)
                        <span class="text-xs text-gray-400 ms-2">{{ count($this->form[$field->key] ?? []) }}/{{ $field->max }}</span>
                    @endif
                </div>
            </div>
            @break

        @case (FieldType::Textarea)
        @case (FieldType::RichText)
            @if ($field->translatable)
                <textarea id="{{ $id }}" wire:model="{{ $path }}.ar" rows="3" dir="rtl"
                          placeholder="{{ __('عربي') }}" class="w-full rounded-lg border px-3 py-2 text-sm"></textarea>
                <textarea wire:model="{{ $path }}.en" rows="3" dir="ltr"
                          placeholder="English" class="w-full rounded-lg border px-3 py-2 text-sm"></textarea>
            @else
                <textarea id="{{ $id }}" wire:model="{{ $path }}" rows="3" class="w-full rounded-lg border px-3 py-2 text-sm"></textarea>
            @endif
            @break

        @case (FieldType::Code)
            <textarea id="{{ $id }}" wire:model="{{ $path }}" rows="8" dir="ltr" spellcheck="false"
                      class="w-full rounded-lg border px-3 py-2 font-mono text-xs"></textarea>
            @break

        @case (FieldType::Toggle)
            <label for="{{ $id }}" class="inline-flex items-center gap-2 cursor-pointer">
                <input id="{{ $id }}" type="checkbox" wire:model="{{ $path }}" class="rounded">
                <span class="text-sm font-medium">{{ $label }}</span>
            </label>
            @break

        @case (FieldType::Number)
            <input id="{{ $id }}" type="number" wire:model="{{ $path }}" dir="ltr"
                   @if ($field->min !== null) min="{{ $field->min }}" @endif
                   @if ($field->max !== null) max="{{ $field->max }}" @endif
                   class="w-full rounded-lg border px-3 py-2 text-sm">
            @break

        @case (FieldType::Color)
            <div class="flex items-center gap-2">
                <input id="{{ $id }}" type="color" wire:model="{{ $path }}" class="h-9 w-12 rounded border p-0.5">
                <input type="text" wire:model="{{ $path }}" dir="ltr" placeholder="#000000"
                       class="flex-1 rounded-lg border px-3 py-2 font-mono text-xs">
            </div>
            @break

        @case (FieldType::Select)
        @case (FieldType::Radio)
        @case (FieldType::Alignment)
        @case (FieldType::DataSource)
            <select id="{{ $id }}" wire:model="{{ $path }}" class="w-full rounded-lg border px-3 py-2 text-sm">
                @unless ($field->required)
                    <option value="">{{ __('— بدون —') }}</option>
                @endunless
                @foreach ($field->options as $value => $optionLabel)
                    <option value="{{ $value }}">{{ $optionLabel }}</option>
                @endforeach
            </select>
            @break

        @case (FieldType::Image)
            <x-website.media-input :path="$path" :id="$id" />
            @break

        @case (FieldType::Gallery)
            <x-website.media-input :path="$path" :id="$id" multiple />
            @break

        @case (FieldType::Video)
            <input id="{{ $id }}" type="url" wire:model="{{ $path }}" dir="ltr"
                   placeholder="https://youtube.com/watch?v=..." class="w-full rounded-lg border px-3 py-2 text-sm">
            @break

        @case (FieldType::Link)
            <input id="{{ $id }}" type="text" wire:model="{{ $path }}" dir="ltr"
                   placeholder="/about-us {{ __('أو') }} https://..." class="w-full rounded-lg border px-3 py-2 text-sm">
            @break

        @case (FieldType::Icon)
            <input id="{{ $id }}" type="text" wire:model="{{ $path }}" dir="ltr" list="ec-icon-names"
                   placeholder="check" class="w-full rounded-lg border px-3 py-2 text-sm font-mono">
            @break

        @case (FieldType::Date)
            <input id="{{ $id }}" type="date" wire:model="{{ $path }}" dir="ltr" class="w-full rounded-lg border px-3 py-2 text-sm">
            @break

        @case (FieldType::Map)
            <input id="{{ $id }}" type="text" wire:model="{{ $path }}" dir="ltr"
                   placeholder="30.0444, 31.2357" class="w-full rounded-lg border px-3 py-2 text-sm font-mono">
            @break

        @default
            @if ($field->translatable)
                <input id="{{ $id }}" type="text" wire:model="{{ $path }}.ar" dir="rtl"
                       placeholder="{{ $field->placeholder ?: __('عربي') }}" class="w-full rounded-lg border px-3 py-2 text-sm">
                <input type="text" wire:model="{{ $path }}.en" dir="ltr"
                       placeholder="English" class="w-full rounded-lg border px-3 py-2 text-sm">
            @else
                <input id="{{ $id }}" type="text" wire:model="{{ $path }}"
                       placeholder="{{ $field->placeholder }}" class="w-full rounded-lg border px-3 py-2 text-sm">
            @endif
    @endswitch

    @if ($field->help)
        <p class="text-xs text-gray-500">{{ $field->help }}</p>
    @endif

    @error(str_replace('form.', 'form.', $path)) <p class="text-xs text-red-600">{{ $message }}</p> @enderror
    @error(str_replace('form.', 'form.', $path) . '.ar') <p class="text-xs text-red-600">{{ $message }}</p> @enderror
</div>
