@php
    $p = $product ?? null;
    $enabledLocales = site_supported_locales();
    $statusLabels = [
        'active' => __('admin.status_active'),
        'inactive' => __('admin.status_inactive'),
        'pending' => __('admin.pending'),
        'draft' => __('admin.draft'),
    ];
    $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.product_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.product_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.product_tab_media') }}</button>
        <button type="button" class="rounded-lg px-3 py-1.5 text-sm font-semibold transition"
            :class="tab === 'card' ? 'bg-slate-900 text-white' : 'bg-slate-100 text-slate-600 hover:bg-slate-200'"
            @click="tab = 'card'">{{ __('admin.product_tab_card') }}</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.product_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', $p?->category_id)"
                        required
                    />
                </div>
                @foreach($enabledLocales as $loc)
                    <div>
                        <label class="admin-label">{{ __("admin.locale_{$loc}") }} — {{ __('admin.name') }}</label>
                        <input name="name_{{ $loc }}" value="{{ old("name_{$loc}", $p?->{"name_{$loc}"}) }}" class="admin-input" required />
                    </div>
                @endforeach
                <div>
                    <label class="admin-label">{{ __('admin.slug') }}</label>
                    <input name="slug" value="{{ old('slug', $p?->slug) }}" class="admin-input" placeholder="auto" />
                </div>
                <div>
                    <label class="admin-label">{{ __('admin.sku') }}</label>
                    <input name="sku" value="{{ old('sku', $p?->sku) }}" class="admin-input" />
                </div>
                <div>
                    <label class="admin-label">{{ __('admin.manufacturer') }}</label>
                    <input name="manufacturer" value="{{ old('manufacturer', $p?->manufacturer) }}" class="admin-input" />
                </div>
            </div>
        </div>

        <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.product_section_pricing') }}</h3>
            <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
                <div>
                    <label class="admin-label">{{ __('admin.price') }}</label>
                    <input type="number" step="0.01" name="price" value="{{ old('price', $p?->price) }}" class="admin-input" placeholder="{{ __('admin.price_null_hint') }}" />
                    <p class="mt-1 text-xs text-slate-500">{{ __('admin.price_null_hint') }}</p>
                </div>
                <div>
                    <label class="admin-label">{{ __('admin.compare_at_price') }}</label>
                    <input type="number" step="0.01" name="compare_at_price" value="{{ old('compare_at_price', $p?->compare_at_price) }}" class="admin-input" />
                </div>
                <div>
                    <label class="admin-label">{{ __('admin.currency_unit') }}</label>
                    <select name="currency" class="admin-input">
                        @foreach(config('site.supported_currencies', ['USD', 'EUR', 'IRR', 'TOM']) as $cur)
                            <option value="{{ $cur }}" @selected(old('currency', $p?->currency ?? 'TOM') === $cur)>{{ $cur }}</option>
                        @endforeach
                    </select>
                    <p class="mt-1 text-xs text-slate-500">{{ __('admin.currency_price_hint') }}</p>
                </div>
                <div>
                    <label class="admin-label">{{ __('admin.status') }}</label>
                    <select name="status" class="admin-input">
                        @foreach(['active','inactive','pending','draft'] as $st)
                            <option value="{{ $st }}" @selected(old('status', $p?->status ?? 'active') === $st)>{{ $statusLabels[$st] ?? $st }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label class="admin-label">{{ __('admin.sort_order') }}</label>
                    <input type="number" name="sort_order" value="{{ old('sort_order', $p?->sort_order ?? 0) }}" class="admin-input" min="0" />
                </div>
                <div class="flex flex-wrap items-center gap-4 pt-6">
                    <label class="flex items-center gap-2 text-sm">
                        <input type="hidden" name="available" value="0" />
                        <input type="checkbox" name="available" value="1" @checked(old('available', $p?->available ?? true)) class="rounded" />
                        <span>{{ __('admin.available') }}</span>
                    </label>
                    <label class="flex items-center gap-2 text-sm">
                        <input type="hidden" name="featured" value="0" />
                        <input type="checkbox" name="featured" value="1" @checked(old('featured', $p?->featured)) class="rounded" />
                        <span>{{ __('admin.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.summary') ?? 'خلاصه' }}</label>
                        <textarea name="summary_{{ $loc }}" rows="8" class="admin-input admin-input--prose-sm">{{ old("summary_{$loc}", $p?->{"summary_{$loc}"}) }}</textarea>
                    </div>
                    <div>
                        <label class="admin-label">{{ __('admin.body') }}</label>
                        <textarea name="description_{{ $loc }}" rows="16" class="admin-input admin-input--prose">{{ old("description_{$loc}", $p?->{"description_{$loc}"}) }}</textarea>
                    </div>
                </div>
            </div>
        @endforeach
        <div class="rounded-xl border border-slate-100  p-4">
            <label class="admin-label">{{ __('admin.specifications') }}</label>
            <textarea name="specifications" rows="25" class="admin-input font-mono text-xs" dir="ltr">{{ admin_form_json_field('specifications', $p?->specifications) }}</textarea>
        </div>
        <div class="rounded-xl border border-slate-100 p-4">
            <label class="admin-label">{{ __('admin.seo_tags') }}</label>
            <x-admin.tag-input name="meta_keywords" :value="old('meta_keywords', $p?->meta_keywords)" :hint="__('admin.seo_tags_hint')" />
        </div>
    </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($p?->image ? '/storage/'.ltrim($p->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($p?->image ? '/storage/'.ltrim($p->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' => $p?->images ?? collect(),
                'existingMedia' => $p?->galleryMedia ?? collect(),
                'deleteRouteName' => $p ? 'admin.repair-products.images.destroy' : null,
                'deleteRouteParams' => $p ? ['repair_product' => $p] : [],
                'deleteMediaRouteName' => $p ? 'admin.repair-products.media.destroy' : null,
                'deleteMediaRouteParams' => $p ? ['repair_product' => $p] : [],
            ])
        </div>
    </div>

    {{-- Card / engagement --}}
    <div class="rounded-xl border border-slate-100  p-4" x-show="tab === 'card'" x-cloak>
        <h3 class="mb-3 text-sm font-bold text-slate-700">{{ __('admin.card_display') }}</h3>
        <div class="grid gap-4 sm:grid-cols-2">
            @if($p)
                <div>
                    <label class="admin-label">{{ __('admin.current_stock') }}</label>
                    <input type="text" value="{{ $p->current_stock }}" class="admin-input bg-white" readonly disabled />
                    <p class="mt-1 text-xs text-slate-500">{{ __('admin.stock_ledger_hint') }}</p>
                </div>
            @endif
            <div>
                <label class="admin-label">{{ __('admin.low_stock_threshold') }}</label>
                <input type="number" name="low_stock_threshold" value="{{ old('low_stock_threshold', $p?->low_stock_threshold ?? 5) }}" class="admin-input" min="0" />
            </div>
            <div>
                <label class="admin-label">{{ __('admin.rating') }}</label>
                <input type="number" step="0.1" name="rating" value="{{ old('rating', $p?->rating ?? 0) }}" class="admin-input" min="0" max="5" />
            </div>
            <div>
                <label class="admin-label">{{ __('admin.likes_count') }}</label>
                <input type="number" name="likes_count" value="{{ old('likes_count', $p?->likes_count ?? 0) }}" class="admin-input" min="0" />
            </div>
            <div>
                <label class="admin-label">{{ __('admin.sales_count') }}</label>
                <input type="number" name="sales_count" value="{{ old('sales_count', $p?->sales_count ?? 0) }}" class="admin-input" min="0" />
            </div>
            <div>
                <label class="admin-label">{{ __('admin.ai_recommendation_percent') }}</label>
                <input type="number" name="ai_recommendation_percent" value="{{ old('ai_recommendation_percent', $p?->ai_recommendation_percent) }}" class="admin-input" min="0" max="100" />
            </div>
            <div class="flex flex-wrap items-center gap-4 sm:col-span-2">
                <label class="flex items-center gap-2 text-sm"><input type="hidden" name="is_new" value="0" /><input type="checkbox" name="is_new" value="1" @checked(old('is_new', $p?->is_new)) class="rounded" /><span>{{ __('admin.is_new') }}</span></label>
                <label class="flex items-center gap-2 text-sm"><input type="hidden" name="is_bestseller" value="0" /><input type="checkbox" name="is_bestseller" value="1" @checked(old('is_bestseller', $p?->is_bestseller)) class="rounded" /><span>{{ __('admin.is_bestseller') }}</span></label>
                <label class="flex items-center gap-2 text-sm"><input type="hidden" name="fast_shipping" value="0" /><input type="checkbox" name="fast_shipping" value="1" @checked(old('fast_shipping', $p?->fast_shipping)) class="rounded" /><span>{{ __('admin.fast_shipping') }}</span></label>
                <label class="flex items-center gap-2 text-sm"><input type="hidden" name="official_warranty" value="0" /><input type="checkbox" name="official_warranty" value="1" @checked(old('official_warranty', $p?->official_warranty)) class="rounded" /><span>{{ __('admin.official_warranty') }}</span></label>
            </div>
        </div>
    </div>
</div>