@php
    $a = $article ?? null;
    $enabledLocales = site_supported_locales();
    $openMediaTab = $errors->has('image')
        || collect($errors->keys())->contains(fn ($key) => str_starts_with((string) $key, 'gallery_files'));
@endphp

<div class="space-y-6" x-data="{ tab: @js($openMediaTab ? 'media' : '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.article_tab_basics') }}</button>
        <button type="button" class="rounded-lg px-3 py-1.5 text-sm font-semibold transition"
            :class="tab === 'content' ? 'bg-slate-900 text-white' : 'bg-slate-100 text-slate-600 hover:bg-slate-200'"
            @click="tab = 'content'">{{ __('admin.article_tab_content') }}</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.article_tab_media') }}</button>
        <button type="button" class="rounded-lg px-3 py-1.5 text-sm font-semibold transition"
            :class="tab === 'engagement' ? 'bg-slate-900 text-white' : 'bg-slate-100 text-slate-600 hover:bg-slate-200'"
            @click="tab = 'engagement'">{{ __('admin.article_tab_engagement') }}</button>
    </div>

    {{-- Basics --}}
    <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.article_section_identity') }}</h3>
            <div class="grid gap-4 sm:grid-cols-2">
                <div class="sm:col-span-2">
                    <label class="admin-label">{{ __('admin.category') }}</label>
                    <x-admin.category-select
                        :options="$categories"
                        :value="old('category_id', $a?->category_id)"
                        required
                    />
                </div>
                @foreach($enabledLocales as $loc)
                    <div>
                        <label class="admin-label">{{ __("admin.locale_{$loc}") }} — {{ __('admin.title') }}</label>
                        <input name="title_{{ $loc }}" value="{{ old("title_{$loc}", $a?->{"title_{$loc}"}) }}" class="admin-input" @required($loc === 'fa') />
                    </div>
                @endforeach
                <div>
                    <label class="admin-label">{{ __('admin.slug') }}</label>
                    <input name="slug" value="{{ old('slug', $a?->slug) }}" class="admin-input" placeholder="auto" />
                </div>
                <div>
                    <label class="admin-label">{{ __('admin.date') }}</label>
                    <x-admin.date-field name="date" :value="old('date', $a?->date ?? now()->format('Y-m-d'))" required />
                    @error('date')<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', $a?->is_active ?? true)) class="rounded" />
                        <span>{{ __('admin.is_active') }}</span>
                    </label>
                    <label class="flex items-center gap-2 text-sm">
                        <input type="hidden" name="is_featured" value="0" />
                        <input type="checkbox" name="is_featured" value="1" @checked(old('is_featured', $a?->is_featured)) class="rounded" />
                        <span>{{ __('admin.is_featured') }}</span>
                    </label>
                </div>
            </div>
        </div>
    </div>

    {{-- Content --}}
    <div class="space-y-4" x-show="tab === 'content'" x-cloak>
        @foreach($enabledLocales as $loc)
            <div class="rounded-xl border border-slate-100  p-4">
                <h3 class="mb-3 text-sm font-bold text-slate-700">{{ __("admin.locale_{$loc}") }}</h3>
                <div class="space-y-3">
                    <div>
                        <label class="admin-label">{{ __('admin.excerpt') }}</label>
                        <textarea name="excerpt_{{ $loc }}" rows="8" class="admin-input admin-input--prose-sm">{{ old("excerpt_{$loc}", $a?->{"excerpt_{$loc}"}) }}</textarea>
                    </div>
                    <div>
                        <label class="admin-label">{{ __('admin.summary') ?? 'خلاصه' }}</label>
                        <textarea name="summary_{{ $loc }}" rows="12" class="admin-input admin-input--prose">{{ old("summary_{$loc}", $a?->{"summary_{$loc}"}) }}</textarea>
                    </div>
                </div>
            </div>
        @endforeach
    </div>

    {{-- Media --}}
    <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($a?->image ? '/storage/'.ltrim($a->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($a?->image ? '/storage/'.ltrim($a->image, '/') : null);
                }
            }"
        >
            <label class="admin-label">{{ __('admin.image') }}</label>
            <template x-if="preview">
                <p class="mb-3">
                    <img :src="preview" alt="" class="h-28 w-28 rounded-xl object-cover ring-1 " />
                </p>
            </template>
            @can(\App\Models\Permission::MEDIA_UPLOAD)
                <input type="file" name="image" accept="image/*" class="admin-input" @change="onCover($event)" />
                <p class="mt-1 text-[11px] text-slate-400">{{ __('admin.cover_image_hint') }}</p>
            @endcan
        </div>
        <div class="rounded-xl border border-slate-100  p-4">
            @include('admin.partials.gallery-upload', [
                'existingImages' => collect(),
                'existingMedia' => $a?->galleryMedia ?? collect(),
                'deleteRouteName' => null,
                'deleteRouteParams' => [],
                'deleteMediaRouteName' => $a ? 'admin.articles.media.destroy' : null,
                'deleteMediaRouteParams' => $a ? ['article' => $a] : [],
            ])
        </div>
    </div>

    {{-- Engagement --}}
    <div class="rounded-xl border border-slate-100  p-4" x-show="tab === 'engagement'" x-cloak>
        <h3 class="mb-3 text-sm font-bold text-slate-700">{{ __('admin.article_section_engagement') }}</h3>
        <div class="grid gap-4 sm:grid-cols-2">
            <div>
                <label class="admin-label">{{ __('admin.views') }}</label>
                <input type="number" name="views" value="{{ old('views', $a?->views ?? 0) }}" class="admin-input" min="0" />
            </div>
            <div>
                <label class="admin-label">{{ __('admin.likes') }}</label>
                <input type="number" name="likes_count" value="{{ old('likes_count', $a?->likes_count ?? 0) }}" class="admin-input" min="0" />
            </div>
            <div>
                <label class="admin-label">{{ __('admin.comments_count') }}</label>
                <input type="number" name="comments_count" value="{{ old('comments_count', $a?->comments_count ?? 0) }}" class="admin-input" min="0" />
            </div>
            <div>
                <label class="admin-label">{{ __('admin.reading_time_minutes') }}</label>
                <input type="number" name="reading_time_minutes" value="{{ old('reading_time_minutes', $a?->reading_time_minutes) }}" class="admin-input" min="1" placeholder="auto" />
            </div>
        </div>
    </div>
</div>