@php
    $meta = $model?->seoMeta;
    $audit = $model
        ? \Apex\Modules\SEO\Models\SeoAudit::query()
            ->where('auditable_type', $model::class)
            ->where('auditable_id', $model->getKey())
            ->first()
        : null;
    $siteName = config('apex.name');
    $defaultTitle = old('seo.title', $meta?->title ?: ($model->title ?? $model->name ?? ''));
    $defaultDesc = old('seo.description', $meta?->description ?: '');
    $focus = old('seo.focus_keyword', $meta?->focus_keyword ?: $meta?->keywords);
    $synonyms = old('seo.synonyms', is_array($meta?->synonyms) ? implode(', ', $meta->synonyms) : '');
    $secondary = old('seo.secondary_keywords', is_array($meta?->secondary_keywords) ? implode(', ', $meta->secondary_keywords) : '');
@endphp

<div
    class="seo-editor rounded-xl border border-slate-200 bg-white shadow-sm"
    x-data="seoEditor({
        title: @js($defaultTitle),
        description: @js($defaultDesc),
        focus: @js((string) $focus),
        siteName: @js($siteName),
        aiEnabled: @js(filled(config('seo.ai_api_key'))),
        aiUrl: @js(route('admin.seo.ai')),
        linksUrl: @js($model ? route('admin.seo.internal-links') : null),
        modelClass: @js($model ? $model::class : null),
        modelId: @js($model?->getKey()),
        csrf: @js(csrf_token()),
    })"
>
    <div class="flex flex-wrap items-center justify-between gap-3 border-b border-slate-200 px-4 py-3">
        <div>
            <h3 class="text-sm font-semibold text-slate-800">SEO System</h3>
            <p class="text-xs text-slate-500">Rank Math + Yoast style analysis, social previews, and schema</p>
        </div>
        @if($model)
            <x-admin.seo-panel
                :score="$audit?->score"
                :parameters="$audit?->issues ?? []"
                :audit-url="route('admin.seo.recalculate')"
                :model-class="$model::class"
                :model-id="$model->getKey()"
                class="!border-0 !p-0 !shadow-none"
            />
        @endif
    </div>

    <div class="flex flex-wrap gap-1 border-b border-slate-100 px-3 pt-3">
        <template x-for="tab in ['general','social','schema','advanced']" :key="tab">
            <button type="button" class="rounded-t px-3 py-2 text-xs font-semibold uppercase tracking-wide"
                    :class="activeTab === tab ? 'bg-slate-100 text-slate-900' : 'text-slate-500 hover:text-slate-800'"
                    @click="activeTab = tab" x-text="tab"></button>
        </template>
    </div>

    <div class="grid gap-4 p-4 lg:grid-cols-5">
        <div class="space-y-4 lg:col-span-3">
            <div x-show="activeTab === 'general'" class="space-y-4">
                <div>
                    <label class="block text-xs font-medium text-slate-600">SEO Title <span class="text-slate-400" x-text="title.length + '/60'"></span></label>
                    <div class="mt-1 flex gap-2">
                        <input type="text" name="seo[title]" x-model="title" maxlength="255"
                               class="w-full rounded border border-slate-300 px-3 py-2 text-sm">
                        <button type="button" class="rounded border border-slate-300 px-2 text-xs" @click="generate('title')" x-show="aiEnabled">AI</button>
                    </div>
                </div>
                <div>
                    <label class="block text-xs font-medium text-slate-600">Meta Description <span class="text-slate-400" x-text="description.length + '/160'"></span></label>
                    <div class="mt-1 flex gap-2">
                        <textarea name="seo[description]" rows="3" x-model="description" maxlength="500"
                                  class="w-full rounded border border-slate-300 px-3 py-2 text-sm"></textarea>
                        <button type="button" class="h-fit rounded border border-slate-300 px-2 text-xs" @click="generate('description')" x-show="aiEnabled">AI</button>
                    </div>
                </div>
                <div class="grid gap-4 sm:grid-cols-2">
                    <div>
                        <label class="block text-xs font-medium text-slate-600">Focus Keyphrase</label>
                        <input type="text" name="seo[focus_keyword]" x-model="focus" value="{{ $focus }}"
                               class="mt-1 w-full rounded border border-slate-300 px-3 py-2 text-sm">
                        <input type="hidden" name="seo[keywords]" :value="focus">
                    </div>
                    <div>
                        <label class="block text-xs font-medium text-slate-600">Synonyms (comma-separated, max 4)</label>
                        <input type="text" name="seo[synonyms]" value="{{ $synonyms }}"
                               class="mt-1 w-full rounded border border-slate-300 px-3 py-2 text-sm" placeholder="assistant, VA, remote admin">
                    </div>
                </div>
                <div>
                    <label class="block text-xs font-medium text-slate-600">Related / secondary keyphrases</label>
                    <input type="text" name="seo[secondary_keywords]" value="{{ $secondary }}"
                           class="mt-1 w-full rounded border border-slate-300 px-3 py-2 text-sm">
                </div>
                <div class="flex flex-wrap gap-4">
                    <label class="inline-flex items-center gap-2 text-sm text-slate-700">
                        <input type="checkbox" name="seo[is_cornerstone]" value="1" @checked(old('seo.is_cornerstone', $meta?->is_cornerstone))>
                        Cornerstone content
                    </label>
                    <label class="inline-flex items-center gap-2 text-sm text-slate-700">
                        <input type="hidden" name="seo[include_in_sitemap]" value="0">
                        <input type="checkbox" name="seo[include_in_sitemap]" value="1" @checked(old('seo.include_in_sitemap', $meta?->include_in_sitemap ?? true))>
                        Include in sitemap
                    </label>
                    <label class="inline-flex items-center gap-2 text-sm text-slate-700">
                        <input type="checkbox" name="seo[is_news]" value="1" @checked(old('seo.is_news', $meta?->is_news))>
                        Google News
                    </label>
                </div>
                <template x-if="suggestions.length">
                    <div class="rounded border border-blue-100 bg-blue-50 p-3 text-xs text-blue-900">
                        <p class="mb-2 font-semibold">AI suggestions</p>
                        <ul class="space-y-1">
                            <template x-for="(item, i) in suggestions" :key="i">
                                <li>
                                    <button type="button" class="text-left hover:underline" @click="applySuggestion(item)" x-text="item"></button>
                                </li>
                            </template>
                        </ul>
                    </div>
                </template>
            </div>

            <div x-show="activeTab === 'social'" x-cloak class="space-y-4">
                <div class="grid gap-4 sm:grid-cols-2">
                    <div>
                        <label class="block text-xs font-medium text-slate-600">OG Title</label>
                        <input type="text" name="seo[og_title]" value="{{ old('seo.og_title', $meta?->og_title) }}"
                               class="mt-1 w-full rounded border border-slate-300 px-3 py-2 text-sm">
                    </div>
                    <div>
                        <label class="block text-xs font-medium text-slate-600">OG Image URL</label>
                        <input type="url" name="seo[og_image]" value="{{ old('seo.og_image', $meta?->og_image) }}"
                               class="mt-1 w-full rounded border border-slate-300 px-3 py-2 text-sm">
                    </div>
                </div>
                <div>
                    <label class="block text-xs font-medium text-slate-600">OG Description</label>
                    <textarea name="seo[og_description]" rows="2" class="mt-1 w-full rounded border border-slate-300 px-3 py-2 text-sm">{{ old('seo.og_description', $meta?->og_description) }}</textarea>
                </div>
                <div class="grid gap-4 sm:grid-cols-2">
                    <div>
                        <label class="block text-xs font-medium text-slate-600">Twitter Title</label>
                        <input type="text" name="seo[twitter_title]" value="{{ old('seo.twitter_title', $meta?->twitter_title) }}"
                               class="mt-1 w-full rounded border border-slate-300 px-3 py-2 text-sm">
                    </div>
                    <div>
                        <label class="block text-xs font-medium text-slate-600">Twitter Image URL</label>
                        <input type="url" name="seo[twitter_image]" value="{{ old('seo.twitter_image', $meta?->twitter_image) }}"
                               class="mt-1 w-full rounded border border-slate-300 px-3 py-2 text-sm">
                    </div>
                </div>
                <div>
                    <label class="block text-xs font-medium text-slate-600">Twitter Description</label>
                    <textarea name="seo[twitter_description]" rows="2" class="mt-1 w-full rounded border border-slate-300 px-3 py-2 text-sm">{{ old('seo.twitter_description', $meta?->twitter_description) }}</textarea>
                </div>
            </div>

            <div x-show="activeTab === 'schema'" x-cloak class="space-y-4">
                <div>
                    <label class="block text-xs font-medium text-slate-600">Schema type</label>
                    <select name="seo[schema_type]" class="mt-1 w-full rounded border border-slate-300 px-3 py-2 text-sm">
                        @foreach(['','WebPage','Service','Article','NewsArticle','FAQPage','JobPosting','LocalBusiness','HowTo','VideoObject','Person','ItemList'] as $type)
                            <option value="{{ $type }}" @selected(old('seo.schema_type', $meta?->schema_type) === $type)>{{ $type ?: 'Auto / default' }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label class="block text-xs font-medium text-slate-600">Custom JSON-LD override</label>
                    <textarea name="seo[schema_markup]" rows="8" class="mt-1 w-full rounded border border-slate-300 px-3 py-2 font-mono text-xs"
                              placeholder='{"@type":"Service","name":"..."}'>{{ old('seo.schema_markup', $meta?->schema_markup ? json_encode($meta->schema_markup, JSON_PRETTY_PRINT|JSON_UNESCAPED_SLASHES) : '') }}</textarea>
                </div>
                <div class="grid gap-4 sm:grid-cols-2">
                    <div>
                        <label class="block text-xs font-medium text-slate-600">Video URL</label>
                        <input type="url" name="seo[video_url]" value="{{ old('seo.video_url', $meta?->video_url) }}"
                               class="mt-1 w-full rounded border border-slate-300 px-3 py-2 text-sm">
                    </div>
                    <div>
                        <label class="block text-xs font-medium text-slate-600">Video thumbnail</label>
                        <input type="url" name="seo[video_thumbnail]" value="{{ old('seo.video_thumbnail', $meta?->video_thumbnail) }}"
                               class="mt-1 w-full rounded border border-slate-300 px-3 py-2 text-sm">
                    </div>
                </div>
            </div>

            <div x-show="activeTab === 'advanced'" x-cloak class="space-y-4">
                <div class="grid gap-4 sm:grid-cols-2">
                    <div>
                        <label class="block text-xs font-medium text-slate-600">Canonical URL</label>
                        <input type="url" name="seo[canonical_url]" value="{{ old('seo.canonical_url', $meta?->canonical_url) }}"
                               class="mt-1 w-full rounded border border-slate-300 px-3 py-2 text-sm">
                    </div>
                    <div>
                        <label class="block text-xs font-medium text-slate-600">Robots</label>
                        <select name="seo[robots]" class="mt-1 w-full rounded border border-slate-300 px-3 py-2 text-sm">
                            @foreach(['index, follow','noindex, follow','index, nofollow','noindex, nofollow'] as $robots)
                                <option value="{{ $robots }}" @selected(old('seo.robots', $meta?->robots ?? 'index, follow') === $robots)>{{ $robots }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div>
                    <label class="block text-xs font-medium text-slate-600">Breadcrumb title</label>
                    <input type="text" name="seo[breadcrumb_title]" value="{{ old('seo.breadcrumb_title', $meta?->breadcrumb_title) }}"
                           class="mt-1 w-full rounded border border-slate-300 px-3 py-2 text-sm">
                </div>
            </div>
        </div>

        <div class="space-y-4 lg:col-span-2">
            <div class="rounded-lg border border-slate-200 bg-slate-50 p-3">
                <p class="mb-2 text-[10px] font-bold uppercase tracking-wide text-slate-500">Google preview</p>
                <p class="truncate text-sm text-[#1a0dab]" x-text="(title || 'Page title') + ' | ' + siteName"></p>
                <p class="truncate text-xs text-[#006621]" x-text="canonicalPreview"></p>
                <p class="mt-1 text-xs leading-snug text-[#4d5156]" x-text="description || 'Meta description preview…'"></p>
            </div>
            <div class="rounded-lg border border-slate-200 bg-[#f0f2f5] p-3">
                <p class="mb-2 text-[10px] font-bold uppercase tracking-wide text-slate-500">Facebook preview</p>
                <div class="overflow-hidden rounded border border-slate-200 bg-white">
                    <div class="flex h-28 items-center justify-center bg-slate-200 text-xs text-slate-500">OG image</div>
                    <div class="space-y-1 p-2">
                        <p class="text-[10px] uppercase text-slate-500" x-text="siteName"></p>
                        <p class="text-sm font-semibold text-slate-900" x-text="title || 'Title'"></p>
                        <p class="line-clamp-2 text-xs text-slate-600" x-text="description || 'Description'"></p>
                    </div>
                </div>
            </div>
            <div class="rounded-lg border border-slate-200 bg-black p-3 text-white">
                <p class="mb-2 text-[10px] font-bold uppercase tracking-wide text-slate-400">X / Twitter preview</p>
                <p class="text-sm font-semibold" x-text="title || 'Title'"></p>
                <p class="mt-1 text-xs text-slate-300" x-text="description || 'Description'"></p>
            </div>

            @if($model)
                <div class="rounded-lg border border-slate-200 p-3">
                    <div class="mb-2 flex items-center justify-between">
                        <p class="text-xs font-semibold text-slate-700">Internal link suggestions</p>
                        <button type="button" class="text-xs text-blue-700 hover:underline" @click="loadLinks()">Refresh</button>
                    </div>
                    <ul class="max-h-40 space-y-1 overflow-y-auto text-xs">
                        <template x-for="link in links" :key="link.url">
                            <li class="flex justify-between gap-2 rounded bg-slate-50 px-2 py-1">
                                <span class="truncate" x-text="link.title"></span>
                                <a :href="link.url" target="_blank" class="shrink-0 text-blue-700">Open</a>
                            </li>
                        </template>
                        <li x-show="!links.length" class="text-slate-500">Click refresh to load suggestions.</li>
                    </ul>
                </div>
            @endif
        </div>
    </div>
</div>