@php
    $meta = $seo;
    $title = old('seo.title', $meta?->title ?: $item->title);
    $desc = old('seo.description', $meta?->description ?: $item->excerpt);
    $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) : '');
    $ogImage = old('seo.og_image', $meta?->og_image);
    $twitterImage = old('seo.twitter_image', $meta?->twitter_image);
    $canonicalDefault = route('blog.show', $item->slug);
    $siteName = config('apex.name');
@endphp

<form method="POST" action="{{ route('admin.blog.posts.update', $item) }}" class="home-editor__body"
      x-data="seoEditor({
          title: @js((string) $title),
          description: @js((string) $desc),
          focus: @js((string) $focus),
          siteName: @js($siteName),
          aiEnabled: @js(filled(config('seo.ai_api_key'))),
          aiUrl: @js(route('admin.seo.ai')),
          linksUrl: @js(route('admin.seo.internal-links')),
          modelClass: @js($item::class),
          modelId: @js($item->getKey()),
          csrf: @js(csrf_token()),
      })">
    @csrf
    @method('PUT')
    <input type="hidden" name="tab" value="seo">
    <input type="hidden" name="seo[keywords]" :value="focus">

    <div class="mb-4 flex flex-wrap items-center justify-between gap-3">
        <div>
            <h3 class="text-base font-semibold text-slate-900">Full blog SEO system</h3>
            <p class="text-sm text-slate-500">General · Social · Schema · Advanced — with AI assist, previews, and internal links.</p>
        </div>
        <div class="flex flex-wrap gap-1 rounded-xl bg-slate-100 p-1">
            <template x-for="tabName in ['general','social','schema','advanced']" :key="tabName">
                <button type="button"
                        class="rounded-lg px-3 py-1.5 text-xs font-semibold uppercase tracking-wide"
                        :class="activeTab === tabName ? 'bg-white text-slate-900 shadow-sm' : 'text-slate-500 hover:text-slate-800'"
                        @click="activeTab = tabName" x-text="tabName"></button>
            </template>
        </div>
    </div>

    <div class="grid gap-6 lg:grid-cols-5">
        <div class="space-y-4 lg:col-span-3">
            <div class="home-seo-card space-y-4" x-show="activeTab === 'general'">
                <div>
                    <label class="home-label">SEO title <span class="font-normal text-slate-400" x-text="title.length + '/60'"></span></label>
                    <div class="flex gap-2">
                        <input type="text" name="seo[title]" x-model="title" maxlength="255" class="home-input">
                        <button type="button" class="home-btn home-btn--ghost home-btn--sm" @click="generate('title')" x-show="aiEnabled" x-cloak>AI</button>
                    </div>
                </div>
                <div>
                    <label class="home-label">Meta description <span class="font-normal text-slate-400" x-text="description.length + '/160'"></span></label>
                    <div class="flex gap-2">
                        <textarea name="seo[description]" rows="4" x-model="description" maxlength="500" class="home-textarea"></textarea>
                        <button type="button" class="home-btn home-btn--ghost home-btn--sm h-fit" @click="generate('description')" x-show="aiEnabled" x-cloak>AI</button>
                    </div>
                </div>
                <div class="home-field-grid">
                    <div>
                        <label class="home-label">Focus keyphrase</label>
                        <input type="text" name="seo[focus_keyword]" x-model="focus" class="home-input" placeholder="Primary phrase to rank for">
                    </div>
                    <div>
                        <label class="home-label">Robots</label>
                        <select name="seo[robots]" class="home-select">
                            @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 class="span-2">
                        <label class="home-label">Secondary keywords</label>
                        <input type="text" name="seo[secondary_keywords]" value="{{ $secondary }}" class="home-input" placeholder="Comma separated">
                    </div>
                    <div class="span-2">
                        <label class="home-label">Synonyms</label>
                        <input type="text" name="seo[synonyms]" value="{{ $synonyms }}" class="home-input" placeholder="Comma separated, max 4">
                    </div>
                </div>
                <div class="flex flex-wrap gap-4 text-sm text-slate-700">
                    <label class="inline-flex items-center gap-2">
                        <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">
                        <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">
                        <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="home-note">
                        <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 underline" @click="applySuggestion(item)" x-text="item"></button></li>
                            </template>
                        </ul>
                    </div>
                </template>
            </div>

            <div class="home-seo-card space-y-4" x-show="activeTab === 'social'" x-cloak>
                <div class="home-field-grid">
                    <div>
                        <label class="home-label">OG title</label>
                        <input type="text" name="seo[og_title]" value="{{ old('seo.og_title', $meta?->og_title) }}" class="home-input">
                    </div>
                    <div>
                        <label class="home-label">Twitter title</label>
                        <input type="text" name="seo[twitter_title]" value="{{ old('seo.twitter_title', $meta?->twitter_title) }}" class="home-input">
                    </div>
                    <div class="span-2">
                        <label class="home-label">OG description</label>
                        <textarea name="seo[og_description]" rows="2" class="home-textarea">{{ old('seo.og_description', $meta?->og_description) }}</textarea>
                    </div>
                    <div class="span-2">
                        <label class="home-label">Twitter description</label>
                        <textarea name="seo[twitter_description]" rows="2" class="home-textarea">{{ old('seo.twitter_description', $meta?->twitter_description) }}</textarea>
                    </div>
                </div>
                <x-admin.media-picker mode="url" name="seo[og_image]" :value="$ogImage" label="OG image" help="Recommended 1200×630." />
                <x-admin.media-picker mode="url" name="seo[twitter_image]" :value="$twitterImage" label="Twitter image" help="Optional override; defaults to OG image." />
                @if ($globalOg)
                    <p class="home-note">Global OG fallback configured in Settings.</p>
                @endif
            </div>

            <div class="home-seo-card space-y-4" x-show="activeTab === 'schema'" x-cloak>
                <div>
                    <label class="home-label">Schema type</label>
                    <select name="seo[schema_type]" class="home-select">
                        @foreach (['', 'Article', 'NewsArticle', 'BlogPosting', 'FAQPage', 'HowTo', 'WebPage'] as $type)
                            <option value="{{ $type }}" @selected(old('seo.schema_type', $meta?->schema_type ?: 'Article') === $type)>{{ $type ?: 'Auto / default' }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label class="home-label">Custom JSON-LD override</label>
                    <textarea name="seo[schema_markup]" rows="8" class="home-textarea font-mono text-xs"
                              placeholder='{"@type":"Article","headline":"..."}'>{{ old('seo.schema_markup', $meta?->schema_markup ? json_encode($meta->schema_markup, JSON_PRETTY_PRINT|JSON_UNESCAPED_SLASHES) : '') }}</textarea>
                </div>
                <div class="home-field-grid">
                    <div>
                        <label class="home-label">Video URL</label>
                        <input type="url" name="seo[video_url]" value="{{ old('seo.video_url', $meta?->video_url) }}" class="home-input">
                    </div>
                    <div>
                        <label class="home-label">Video thumbnail</label>
                        <input type="url" name="seo[video_thumbnail]" value="{{ old('seo.video_thumbnail', $meta?->video_thumbnail) }}" class="home-input">
                    </div>
                </div>
            </div>

            <div class="home-seo-card space-y-4" x-show="activeTab === 'advanced'" x-cloak>
                <div class="home-field-grid">
                    <div>
                        <label class="home-label">Canonical URL</label>
                        <input type="text" name="seo[canonical_url]" value="{{ old('seo.canonical_url', $meta?->canonical_url ?: $canonicalDefault) }}" class="home-input">
                    </div>
                    <div>
                        <label class="home-label">Breadcrumb title</label>
                        <input type="text" name="seo[breadcrumb_title]" value="{{ old('seo.breadcrumb_title', $meta?->breadcrumb_title) }}" class="home-input">
                    </div>
                </div>
            </div>
        </div>

        <div class="space-y-4 lg:col-span-2">
            <div class="home-seo-card" style="background: linear-gradient(180deg,#f8fafc,#fff);">
                <p class="mb-3 text-[10px] font-bold uppercase tracking-[0.12em] text-slate-500">Google preview</p>
                <p class="truncate text-base text-[#1a0dab]" x-text="(title || 'Page title') + ' | ' + siteName"></p>
                <p class="truncate text-xs text-[#006621]">{{ parse_url(url('/'), PHP_URL_HOST) }}/blog/{{ $item->slug }}</p>
                <p class="mt-1 text-sm leading-snug text-[#4d5156]" x-text="description || 'Meta description preview…'"></p>
            </div>
            <div class="home-seo-card" style="background:#f0f2f5;">
                <p class="mb-2 text-[10px] font-bold uppercase tracking-[0.12em] text-slate-500">Facebook / OG</p>
                <p class="text-sm font-semibold text-slate-900" x-text="title || 'Title'"></p>
                <p class="mt-1 line-clamp-2 text-xs text-slate-600" x-text="description || 'Description'"></p>
            </div>
            <div class="home-seo-card" style="background:#0f172a;color:#fff;">
                <p class="mb-2 text-[10px] font-bold uppercase tracking-[0.12em] text-slate-400">X / Twitter</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>
            <div class="home-seo-card">
                <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 font-semibold text-teal-700" @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-lg bg-slate-50 px-2 py-1.5">
                            <span class="truncate" x-text="link.title"></span>
                            <a :href="link.url" target="_blank" class="shrink-0 text-teal-700">Open</a>
                        </li>
                    </template>
                    <li x-show="!links.length" class="text-slate-500">Click refresh to load suggestions.</li>
                </ul>
            </div>
            <div class="home-note">
                After saving, open <strong>SEO Audit</strong> for a deep score with desktop/mobile SERP previews.
            </div>
        </div>
    </div>

    <div class="home-editor__footer">
        <button type="submit" class="home-btn home-btn--primary">Save SEO</button>
    </div>
</form>