@php
    $n = $post ?? null;
    $enabledLocales = site_supported_locales();
    $publishedValue = old('published_at', $n?->published_at?->format('Y-m-d\TH:i') ?? now()->format('Y-m-d\TH:i'));
@endphp

<div class="space-y-6" x-data="{ tab: 'basics' }">
    <div class="flex flex-wrap gap-2 border-b border-slate-200 pb-3">
        <button type="button" class="rounded-lg px-3 py-1.5 text-sm font-semibold transition"
            :class="tab === 'basics' ? 'bg-slate-900 text-white' : 'bg-slate-100 text-slate-600 hover:bg-slate-200'"
            @click="tab = 'basics'">{{ __('admin.news_tab_basics') }}</button>
        <button type="button" class="rounded-lg px-3 py-1.5 text-sm font-semibold transition"
            :class="tab === 'body' ? 'bg-slate-900 text-white' : 'bg-slate-100 text-slate-600 hover:bg-slate-200'"
            @click="tab = 'body'">{{ __('admin.news_tab_body') }}</button>
        <button type="button" class="rounded-lg px-3 py-1.5 text-sm font-semibold transition"
            :class="tab === 'media' ? 'bg-slate-900 text-white' : 'bg-slate-100 text-slate-600 hover:bg-slate-200'"
            @click="tab = 'media'">{{ __('admin.news_tab_media') }}</button>
    </div>

    <div class="grid gap-4 sm:grid-cols-2" x-show="tab === 'basics'">
        <div class="sm:col-span-2 rounded-xl border border-slate-100 p-4">
            <h3 class="mb-3 text-sm font-bold text-slate-700">{{ __('admin.news_section_identity') }}</h3>
            <div class="grid gap-4 sm:grid-cols-2">
                @foreach($enabledLocales as $loc)
                    <div class="sm:col-span-2">
                        <label class="admin-label">{{ __("admin.locale_{$loc}") }} — {{ __('admin.title') }}</label>
                        <input name="title_{{ $loc }}" value="{{ old("title_{$loc}", $n?->{"title_{$loc}"}) }}" class="admin-input" @required($loc === 'fa') />
                    </div>
                    <div class="sm:col-span-2">
                        <label class="admin-label">{{ __("admin.locale_{$loc}") }} — {{ __('admin.excerpt') }}</label>
                        <textarea name="excerpt_{{ $loc }}" rows="2" class="admin-input">{{ old("excerpt_{$loc}", $n?->{"excerpt_{$loc}"}) }}</textarea>
                    </div>
                @endforeach
                <div>
                    <label class="admin-label">{{ __('admin.slug') }}</label>
                    <input name="slug" value="{{ old('slug', $n?->slug) }}" class="admin-input" placeholder="auto" />
                </div>
                <div>
                    <label class="admin-label">{{ __('admin.commission_category') }}</label>
                    @if (! empty($lockedCategory))
                        <input type="hidden" name="commission_category_id" value="{{ $lockedCategory->id }}" />
                        <p class="admin-input bg-slate-50 text-slate-700">{{ $lockedCategory->name_fa }}</p>
                    @else
                        <select name="commission_category_id" class="admin-input" required>
                            <option value="">{{ __('admin.no_category') }}</option>
                            @foreach(($categories ?? []) as $cat)
                                <option value="{{ $cat->id }}" @selected((string) old('commission_category_id', $n?->commission_category_id) === (string) $cat->id)>
                                    {{ $cat->name_fa }}
                                </option>
                            @endforeach
                        </select>
                    @endif
                    @error('commission_category_id')<p class="mt-1 text-xs text-rose-600">{{ $message }}</p>@enderror
                </div>
                <div>
                    <label class="admin-label">{{ __('admin.published_at') }}</label>
                    <x-admin.date-field name="published_at" mode="datetime" :value="$publishedValue" required />
                    @error('published_at')<p class="mt-1 text-xs text-rose-600">{{ $message }}</p>@enderror
                </div>
                <div class="flex flex-wrap items-center gap-4 pt-6 sm:col-span-2">
                    <label class="flex items-center gap-2 text-sm">
                        <input type="hidden" name="is_active" value="0" />
                        <input type="checkbox" name="is_active" value="1" @checked(old('is_active', $n?->is_active ?? true)) class="rounded" />
                        <span>{{ __('admin.is_active') }}</span>
                    </label>
                </div>
            </div>
        </div>
    </div>

    <div class="space-y-4" x-show="tab === 'body'" x-cloak>
        <p class="text-sm text-slate-500">{{ __('admin.news_body_hint') }}</p>
        @foreach($enabledLocales as $loc)
            @php
                $existingBlocks = old("body_{$loc}", $n?->{"body_{$loc}"} ?? [['type' => 'text', 'content' => '']]);
                if (! is_array($existingBlocks) || $existingBlocks === []) {
                    $existingBlocks = [['type' => 'text', 'content' => '']];
                }
            @endphp
            <div
                class="rounded-xl border border-slate-100 p-4"
                x-data="{
                    blocks: @js(array_values($existingBlocks)),
                    addText() { this.blocks.push({ type: 'text', content: '' }) },
                    addImage() { this.blocks.push({ type: 'image', path: '', alt: '' }) },
                    remove(i) { if (this.blocks.length > 1) this.blocks.splice(i, 1) },
                    move(i, dir) {
                        const j = i + dir;
                        if (j < 0 || j >= this.blocks.length) return;
                        const tmp = this.blocks[i];
                        this.blocks[i] = this.blocks[j];
                        this.blocks[j] = tmp;
                    }
                }"
            >
                <div class="mb-3 flex flex-wrap items-center justify-between gap-2">
                    <h3 class="text-sm font-bold text-slate-700">{{ __("admin.locale_{$loc}") }}</h3>
                    <div class="flex flex-wrap gap-2">
                        <button type="button" class="admin-btn-muted text-xs" @click="addText()">{{ __('admin.news_add_paragraph') }}</button>
                        <button type="button" class="admin-btn-muted text-xs" @click="addImage()">{{ __('admin.news_add_image') }}</button>
                    </div>
                </div>
                <div class="space-y-3">
                    <template x-for="(block, index) in blocks" :key="index">
                        <div class="rounded-lg border border-slate-200 p-3">
                            <div class="mb-2 flex items-center justify-between gap-2">
                                <span class="text-xs font-semibold text-slate-500" x-text="block.type === 'image' ? '{{ __('admin.news_block_image') }}' : '{{ __('admin.news_block_text') }}'"></span>
                                <div class="flex gap-1">
                                    <button type="button" class="rounded px-2 py-1 text-xs text-slate-500 hover:bg-slate-100" @click="move(index, -1)">↑</button>
                                    <button type="button" class="rounded px-2 py-1 text-xs text-slate-500 hover:bg-slate-100" @click="move(index, 1)">↓</button>
                                    <button type="button" class="rounded px-2 py-1 text-xs text-rose-600 hover:bg-rose-50" @click="remove(index)">{{ __('admin.delete') }}</button>
                                </div>
                            </div>
                            <input type="hidden" :name="'body_{{ $loc }}[' + index + '][type]'" :value="block.type" />
                            <template x-if="block.type === 'text'">
                                <textarea :name="'body_{{ $loc }}[' + index + '][content]'" rows="4" class="admin-input" x-model="block.content"></textarea>
                            </template>
                            <template x-if="block.type === 'image'">
                                <div class="space-y-2">
                                    <input type="hidden" :name="'body_{{ $loc }}[' + index + '][path]'" :value="block.path || ''" />
                                    <template x-if="block.path">
                                        <img :src="block.path.startsWith('http') ? block.path : '/storage/' + String(block.path).replace(/^\/+/, '')" alt="" class="max-h-40 rounded-lg object-contain" />
                                    </template>
                                    <input type="file" :name="'body_{{ $loc }}[' + index + '][image]'" accept="image/jpeg,image/jpg,image/png,image/webp,image/gif" class="admin-input" />
                                    <input :name="'body_{{ $loc }}[' + index + '][alt]'" x-model="block.alt" class="admin-input" placeholder="{{ __('admin.news_image_alt') }}" />
                                </div>
                            </template>
                        </div>
                    </template>
                </div>
            </div>
        @endforeach
    </div>

    <div class="space-y-4" x-show="tab === 'media'" x-cloak>
        <div
            class="rounded-xl border border-slate-100 p-4"
            x-data="{
                preview: @js($n?->image ? '/storage/'.ltrim($n->image, '/') : null),
                onCover(e) {
                    const file = e.target.files?.[0];
                    if (this.preview && this.preview.startsWith('blob:')) {
                        URL.revokeObjectURL(this.preview);
                    }
                    this.preview = file ? URL.createObjectURL(file) : @js($n?->image ? '/storage/'.ltrim($n->image, '/') : null);
                }
            }"
        >
            <label class="admin-label">{{ __('admin.news_cover_image') }}</label>
            <template x-if="preview">
                <p class="mb-3">
                    <img :src="preview" alt="" class="h-28 w-44 rounded-xl object-cover ring-1 " />
                </p>
            </template>
            @can(\App\Models\Permission::MEDIA_UPLOAD)
                <input type="file" name="image" accept="image/jpeg,image/jpg,image/png,image/webp,image/gif" class="admin-input" @change="onCover($event)" />
                <p class="mt-1 text-[11px] text-slate-400">{{ __('admin.news_cover_hint') }}</p>
            @endcan
        </div>
    </div>
</div>