@extends('layouts.admin')
@section('title', $isCreate ? 'New post' : $post->title)
@section('content')
@php
  $featuredSelected = old('featured_media_asset_id')
      ? \App\Models\MediaAsset::query()->with('variants')->find(old('featured_media_asset_id'))
      : ($post->featuredMedia ?? null);
  $ogSelected = old('og_media_asset_id')
      ? \App\Models\MediaAsset::query()->with('variants')->find(old('og_media_asset_id'))
      : ($post->ogMedia ?? null);
  $selectedCategories = collect(old('category_ids', $post->exists ? $post->categories->pluck('id')->all() : []));
  $selectedTags = collect(old('tag_ids', $post->exists ? $post->tags->pluck('id')->all() : []));
  $selectedRelated = collect(old('related_ids', $post->exists ? $post->relatedPosts->pluck('id')->all() : []));
  $checks = $analysis['checks'] ?? [];
  $seoScore = old('seo_score', $seo?->seo_score ?? null);
  $faqJson = old('meta_faq', json_encode(data_get($post->meta, 'faq', []), JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES));
@endphp

<form
    id="post-form"
    method="post"
    action="{{ $isCreate ? route('admin.posts.store') : route('admin.posts.update', $post) }}"
    data-post-editor
    @unless($isCreate) data-analyze-url="{{ route('admin.posts.analyze', $post) }}" @endunless
>
@csrf
@unless($isCreate) @method('PUT') @endunless

<x-admin.page
    :title="$isCreate ? 'New post' : $post->title"
    :subtitle="$isCreate
        ? 'Compose content with taxonomy, media, scheduling, and a full SEO workspace.'
        : ('/blogs/news/'.$post->handle.' · v'.($post->revisions->count() + 1).' revisions')"
>
    <x-slot:actions>
        <a href="{{ route('admin.posts.index') }}" class="admin-btn">
            <i data-lucide="arrow-left" class="h-3.5 w-3.5"></i> Posts
        </a>
        @unless($isCreate)
            <a href="{{ $post->publicUrl() }}" target="_blank" class="admin-btn">
                <i data-lucide="external-link" class="h-3.5 w-3.5"></i> View
            </a>
            <button type="submit" form="duplicate-form" class="admin-btn">
                <i data-lucide="copy" class="h-3.5 w-3.5"></i> Duplicate
            </button>
            <button type="button" class="admin-btn" data-analyze-btn>
                <i data-lucide="radar" class="h-3.5 w-3.5"></i> Recalculate SEO
            </button>
        @endunless
        <button type="submit" class="admin-btn admin-btn-primary">
            <i data-lucide="save" class="h-3.5 w-3.5"></i>
            {{ $isCreate ? 'Create post' : 'Save post' }}
        </button>
    </x-slot:actions>

    @if(session('status'))
        <div class="mb-4 rounded-lg border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-900">{{ session('status') }}</div>
    @endif
    @if($errors->any())
        <div class="mb-4 rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-800">{{ $errors->first() }}</div>
    @endif

    <div class="grid gap-5 xl:grid-cols-[minmax(0,1fr)_22rem]">
        <div class="space-y-5">
            <x-admin.section title="Content" hint="Title, handle, excerpt, and HTML body (safe tags).">
                <x-admin.field label="Title" name="title" required>
                    <input name="title" value="{{ old('title', $post->title) }}" required class="admin-input text-base font-medium" data-title-input>
                </x-admin.field>
                <div class="mt-4 grid gap-4 sm:grid-cols-2">
                    <x-admin.field label="Handle" name="handle" help="Public URL: /blogs/news/{handle}">
                        <input name="handle" value="{{ old('handle', $post->handle) }}" class="admin-input font-mono text-xs" data-handle-input>
                    </x-admin.field>
                    <x-admin.field label="Author name" name="author_name">
                        <input name="author_name" value="{{ old('author_name', $post->author_name) }}" class="admin-input">
                    </x-admin.field>
                </div>
                <x-admin.field label="Excerpt" name="excerpt" class="mt-4" help="Used in cards, RSS, and meta fallback.">
                    <textarea name="excerpt" rows="3" class="admin-input" data-excerpt-input maxlength="500">{{ old('excerpt', $post->excerpt) }}</textarea>
                </x-admin.field>
                <x-admin.field label="Body" name="body" class="mt-4" help="Allowed: p, headings, lists, links, images, blockquote, code.">
                    <textarea name="body" rows="18" class="admin-input font-mono text-sm leading-relaxed" data-body-input>{{ old('body', $post->body) }}</textarea>
                </x-admin.field>
            </x-admin.section>

            <x-admin.section title="Taxonomy & media">
                <x-admin.media-field
                    name="featured_media_asset_id"
                    mode="single"
                    label="Featured image"
                    help="Used on cards, article header, and OG fallback. Opens Insert Media."
                    :selected="$featuredSelected ? [$featuredSelected] : []"
                    :max="1"
                />
                <div class="mt-5">
                    <x-admin.media-field
                        name="og_media_asset_id"
                        mode="single"
                        label="Social / OG image"
                        help="Optional override for Open Graph and Twitter cards. Choose from Media library."
                        :selected="$ogSelected ? [$ogSelected] : []"
                        :max="1"
                    />
                </div>
                <div class="mt-5 grid gap-4 sm:grid-cols-2">
                    <div>
                        <p class="admin-label mb-2">Categories</p>
                        <div class="max-h-48 space-y-2 overflow-y-auto rounded-xl border border-[var(--color-admin-border)] p-3">
                            @forelse($categories as $category)
                                <label class="flex items-center gap-2 text-sm">
                                    <input type="checkbox" name="category_ids[]" value="{{ $category->id }}" @checked($selectedCategories->contains($category->id))>
                                    {{ $category->name }}
                                </label>
                            @empty
                                <p class="text-xs text-[#6d7175]">No categories yet.</p>
                            @endforelse
                        </div>
                    </div>
                    <div>
                        <p class="admin-label mb-2">Tags</p>
                        <div class="max-h-48 space-y-2 overflow-y-auto rounded-xl border border-[var(--color-admin-border)] p-3">
                            @forelse($tags as $tag)
                                <label class="flex items-center gap-2 text-sm">
                                    <input type="checkbox" name="tag_ids[]" value="{{ $tag->id }}" @checked($selectedTags->contains($tag->id))>
                                    {{ $tag->name }}
                                </label>
                            @empty
                                <p class="text-xs text-[#6d7175]">No tags yet.</p>
                            @endforelse
                        </div>
                    </div>
                </div>
            </x-admin.section>

            <x-admin.section title="Publish">
                <div class="grid gap-4 sm:grid-cols-2">
                    <x-admin.field label="Status" name="status" required>
                        <select name="status" class="admin-input" data-status-input>
                            @foreach(['draft','scheduled','published','archived'] as $status)
                                <option value="{{ $status }}" @selected(old('status', $post->status ?: 'draft') === $status)>{{ ucfirst($status) }}</option>
                            @endforeach
                        </select>
                    </x-admin.field>
                    <x-admin.field label="Published at" name="published_at">
                        <input type="datetime-local" name="published_at" class="admin-input"
                               value="{{ old('published_at', optional($post->published_at)->format('Y-m-d\TH:i')) }}">
                    </x-admin.field>
                    <x-admin.field label="Scheduled at" name="scheduled_at">
                        <input type="datetime-local" name="scheduled_at" class="admin-input"
                               value="{{ old('scheduled_at', optional($post->scheduled_at)->format('Y-m-d\TH:i')) }}">
                    </x-admin.field>
                    <x-admin.field label="Canonical URL override" name="canonical_url">
                        <input name="canonical_url" value="{{ old('canonical_url', $post->canonical_url) }}" class="admin-input font-mono text-xs" placeholder="https://…">
                    </x-admin.field>
                </div>
                <div class="mt-4 flex flex-wrap gap-4 text-sm">
                    <label class="flex items-center gap-2"><input type="checkbox" name="is_featured" value="1" @checked(old('is_featured', $post->is_featured))> Featured</label>
                    <label class="flex items-center gap-2"><input type="checkbox" name="is_cornerstone" value="1" @checked(old('is_cornerstone', $post->is_cornerstone))> Cornerstone</label>
                    <label class="flex items-center gap-2"><input type="checkbox" name="allow_indexing" value="1" @checked(old('allow_indexing', $post->allow_indexing ?? true))> Allow indexing</label>
                    <label class="flex items-center gap-2"><input type="checkbox" name="noindex" value="1" @checked(old('noindex', $post->noindex))> Force noindex</label>
                </div>
            </x-admin.section>

            <x-admin.section title="SEO" hint="General · Social · Schema · Advanced">
                <div class="mb-4 flex flex-wrap gap-2" data-seo-tabs>
                    @foreach(['general' => 'General', 'social' => 'Social', 'schema' => 'Schema', 'advanced' => 'Advanced'] as $key => $label)
                        <button type="button" class="order-ops-chip {{ $key === 'general' ? 'is-active' : '' }}" data-seo-tab="{{ $key }}">{{ $label }}</button>
                    @endforeach
                </div>

                <div data-seo-panel="general">
                    <div class="mb-4 rounded-lg border border-[var(--color-admin-border)] bg-[#fafbfb] p-4 text-sm">
                        <div class="text-[#1a0dab]" data-seo-title-preview>{{ old('seo_title', $seo?->title ?? $post->title ?: 'Post title') }}</div>
                        <div class="text-xs text-[#006621]" data-seo-url-preview>{{ url('/blogs/news/'.(old('handle', $post->handle) ?: 'post-handle')) }}</div>
                        <div class="mt-1 text-[#4d5156]" data-seo-desc-preview>{{ old('seo_description', $seo?->description ?? \Illuminate\Support\Str::limit((string) $post->excerpt, 150)) }}</div>
                    </div>
                    <div class="grid gap-4 sm:grid-cols-2">
                        <x-admin.field label="Focus keyphrase" name="seo_focus_keyphrase">
                            <input name="seo_focus_keyphrase" value="{{ old('seo_focus_keyphrase', $seo?->focus_keyphrase ?? '') }}" class="admin-input">
                        </x-admin.field>
                        <x-admin.field label="Synonyms (comma)" name="seo_keyphrase_synonyms">
                            <input name="seo_keyphrase_synonyms" value="{{ old('seo_keyphrase_synonyms', implode(', ', $seo?->keyphrase_synonyms ?? [])) }}" class="admin-input">
                        </x-admin.field>
                    </div>
                    <x-admin.field label="Related keyphrases" name="seo_related_keyphrases" class="mt-4">
                        <input name="seo_related_keyphrases" value="{{ old('seo_related_keyphrases', implode(', ', $seo?->related_keyphrases ?? [])) }}" class="admin-input">
                    </x-admin.field>
                    <x-admin.field label="SEO title" name="seo_title" class="mt-4">
                        <input name="seo_title" maxlength="70" value="{{ old('seo_title', $seo?->title ?? '') }}" class="admin-input" data-seo-title-input>
                    </x-admin.field>
                    <x-admin.field label="Meta description" name="seo_description" class="mt-4">
                        <textarea name="seo_description" rows="3" maxlength="320" class="admin-input" data-seo-desc-input>{{ old('seo_description', $seo?->description ?? '') }}</textarea>
                    </x-admin.field>
                </div>

                <div class="hidden" data-seo-panel="social">
                    <div class="mb-4 grid gap-4 sm:grid-cols-2">
                        <div class="rounded-xl border border-[var(--color-admin-border)] bg-[#f0f2f5] p-4">
                            <p class="text-[10px] font-semibold uppercase tracking-wider text-[#65676b]">Facebook / OG</p>
                            <p class="mt-2 font-semibold text-[#050505]" data-og-title-preview>{{ old('seo_og_title', $seo?->og_title ?? $post->title) }}</p>
                            <p class="mt-1 text-sm text-[#65676b]" data-og-desc-preview>{{ old('seo_og_description', $seo?->og_description ?? $post->excerpt) }}</p>
                        </div>
                        <div class="rounded-xl border border-[var(--color-admin-border)] bg-black p-4 text-white">
                            <p class="text-[10px] font-semibold uppercase tracking-wider text-white/50">X / Twitter</p>
                            <p class="mt-2 font-semibold" data-tw-title-preview>{{ old('seo_twitter_title', $seo?->twitter_title ?? $post->title) }}</p>
                            <p class="mt-1 text-sm text-white/70" data-tw-desc-preview>{{ old('seo_twitter_description', $seo?->twitter_description ?? $post->excerpt) }}</p>
                        </div>
                    </div>
                    <div class="grid gap-4 sm:grid-cols-2">
                        <x-admin.field label="OG title" name="seo_og_title">
                            <input name="seo_og_title" value="{{ old('seo_og_title', $seo?->og_title ?? '') }}" class="admin-input" data-og-title-input>
                        </x-admin.field>
                        <x-admin.field label="Twitter title" name="seo_twitter_title">
                            <input name="seo_twitter_title" value="{{ old('seo_twitter_title', $seo?->twitter_title ?? '') }}" class="admin-input" data-tw-title-input>
                        </x-admin.field>
                        <x-admin.field label="OG description" name="seo_og_description">
                            <textarea name="seo_og_description" rows="2" class="admin-input" data-og-desc-input>{{ old('seo_og_description', $seo?->og_description ?? '') }}</textarea>
                        </x-admin.field>
                        <x-admin.field label="Twitter description" name="seo_twitter_description">
                            <textarea name="seo_twitter_description" rows="2" class="admin-input" data-tw-desc-input>{{ old('seo_twitter_description', $seo?->twitter_description ?? '') }}</textarea>
                        </x-admin.field>
                        <x-admin.field label="OG image URL" name="seo_og_image">
                            <input name="seo_og_image" value="{{ old('seo_og_image', $seo?->og_image ?? '') }}" class="admin-input font-mono text-xs">
                        </x-admin.field>
                        <x-admin.field label="Twitter image URL" name="seo_twitter_image">
                            <input name="seo_twitter_image" value="{{ old('seo_twitter_image', $seo?->twitter_image ?? '') }}" class="admin-input font-mono text-xs">
                        </x-admin.field>
                    </div>
                </div>

                <div class="hidden" data-seo-panel="schema">
                    <x-admin.field label="Schema type" name="seo_schema_type">
                        <select name="seo_schema_type" class="admin-input">
                            @foreach(['Article','BlogPosting','NewsArticle','FAQPage'] as $type)
                                <option value="{{ $type }}" @selected(old('seo_schema_type', $seo?->schema_type ?? 'Article') === $type)>{{ $type }}</option>
                            @endforeach
                        </select>
                    </x-admin.field>
                    <x-admin.field label="FAQ JSON (optional)" name="meta_faq" class="mt-4" help='[{"q":"…","a":"…"}]'>
                        <textarea name="meta_faq" rows="6" class="admin-input font-mono text-xs">{{ $faqJson }}</textarea>
                    </x-admin.field>
                    <x-admin.field label="Custom JSON-LD override" name="seo_custom_schema" class="mt-4">
                        <textarea name="seo_custom_schema" rows="8" class="admin-input font-mono text-xs">{{ old('seo_custom_schema', $seo?->custom_schema ? json_encode($seo?->custom_schema, JSON_PRETTY_PRINT|JSON_UNESCAPED_SLASHES) : '') }}</textarea>
                    </x-admin.field>
                </div>

                <div class="hidden" data-seo-panel="advanced">
                    <div class="grid gap-4 sm:grid-cols-2">
                        <x-admin.field label="Canonical" name="seo_canonical">
                            <input name="seo_canonical" value="{{ old('seo_canonical', $seo?->canonical ?? '') }}" class="admin-input font-mono text-xs">
                        </x-admin.field>
                        <x-admin.field label="Robots" name="seo_robots">
                            <input name="seo_robots" value="{{ old('seo_robots', $seo?->robots ?? 'index,follow') }}" class="admin-input">
                        </x-admin.field>
                        <x-admin.field label="Breadcrumb title" name="seo_breadcrumb_title">
                            <input name="seo_breadcrumb_title" value="{{ old('seo_breadcrumb_title', $seo?->breadcrumb_title ?? '') }}" class="admin-input">
                        </x-admin.field>
                        <label class="mt-6 flex items-center gap-2 text-sm">
                            <input type="checkbox" name="seo_include_in_sitemap" value="1" @checked(old('seo_include_in_sitemap', $seo?->include_in_sitemap ?? true))>
                            Include in sitemap
                        </label>
                    </div>
                </div>
            </x-admin.section>

            <x-admin.section title="Related posts">
                <div class="max-h-56 space-y-2 overflow-y-auto rounded-xl border border-[var(--color-admin-border)] p-3">
                    @forelse($allPosts as $candidate)
                        <label class="flex items-center gap-2 text-sm">
                            <input type="checkbox" name="related_ids[]" value="{{ $candidate->id }}" @checked($selectedRelated->contains($candidate->id))>
                            <span class="min-w-0 flex-1 truncate">{{ $candidate->title }}</span>
                            <x-admin.badge tone="muted">{{ $candidate->status }}</x-admin.badge>
                        </label>
                    @empty
                        <p class="text-xs text-[#6d7175]">No other posts yet.</p>
                    @endforelse
                </div>
            </x-admin.section>

            @unless($isCreate)
                <x-admin.section title="Revisions">
                    <ul class="space-y-2 text-sm">
                        @forelse($post->revisions as $revision)
                            <li class="flex justify-between gap-2 border-b border-[var(--color-admin-border)] pb-2 last:border-0">
                                <span class="truncate">{{ $revision->title }}</span>
                                <span class="whitespace-nowrap text-[#6d7175]">{{ $revision->created_at?->diffForHumans() }}</span>
                            </li>
                        @empty
                            <li class="text-[#6d7175]">No revisions yet — save to create the first snapshot.</li>
                        @endforelse
                    </ul>
                </x-admin.section>
            @endunless
        </div>

        <div class="space-y-5 xl:sticky xl:top-20 xl:self-start">
            <div class="rounded-xl border border-[var(--color-admin-border)] bg-gradient-to-br from-[#111] to-[#2a2a2a] p-5 text-white">
                <p class="text-[10px] font-semibold uppercase tracking-[0.28em] text-[var(--color-gold)]">SEO score</p>
                <p class="mt-2 text-4xl font-semibold" data-seo-score>{{ $seoScore !== null ? $seoScore : '—' }}</p>
                <p class="mt-1 text-sm text-white/60">Readability: <span data-readability-score>{{ $seo?->readability_score ?? '—' }}</span></p>
                <ul class="mt-4 max-h-64 space-y-2 overflow-y-auto text-xs" data-seo-checks>
                    @forelse($checks as $check)
                        <li class="{{ ($check['pass'] ?? false) ? 'text-emerald-300' : 'text-amber-200' }}">
                            {{ ($check['pass'] ?? false) ? '✓' : '!' }} {{ $check['message'] ?? $check['label'] }}
                        </li>
                    @empty
                        <li class="text-white/50">Save or recalculate to score this post.</li>
                    @endforelse
                </ul>
            </div>
            @unless($isCreate)
                <x-admin.section title="Danger zone">
                    <button type="submit" form="trash-form" class="admin-btn w-full justify-center" onclick="return confirm('Move this post to trash?')">
                        <i data-lucide="trash-2" class="h-3.5 w-3.5"></i> Move to trash
                    </button>
                </x-admin.section>
            @endunless
        </div>
    </div>

    <x-admin.sticky-save form="post-form" hint="Slug changes create a 301 redirect. Highest-quality SEO wins with focus keyphrase + length checks." />
</x-admin.page>
</form>

@unless($isCreate)
    <form id="duplicate-form" method="post" action="{{ route('admin.posts.duplicate', $post) }}" class="hidden">@csrf</form>
    <form id="trash-form" method="post" action="{{ route('admin.posts.destroy', $post) }}" class="hidden">@csrf @method('DELETE')</form>
@endunless

<script>
(() => {
  const form = document.querySelector('[data-post-editor]');
  if (!form) return;
  const csrf = form.querySelector('input[name="_token"]')?.value;
  const analyzeUrl = form.dataset.analyzeUrl;

  const syncPreview = () => {
    const title = form.querySelector('[data-seo-title-input]')?.value || form.querySelector('[data-title-input]')?.value || 'Post title';
    const desc = form.querySelector('[data-seo-desc-input]')?.value || form.querySelector('[data-excerpt-input]')?.value || '';
    const handle = form.querySelector('[data-handle-input]')?.value || 'post-handle';
    const set = (sel, val) => { const el = document.querySelector(sel); if (el) el.textContent = val; };
    set('[data-seo-title-preview]', title);
    set('[data-seo-desc-preview]', desc.slice(0, 160));
    set('[data-seo-url-preview]', {{ Js::from(url('/blogs/news')) }} + '/' + handle);
    set('[data-og-title-preview]', form.querySelector('[data-og-title-input]')?.value || title);
    set('[data-og-desc-preview]', form.querySelector('[data-og-desc-input]')?.value || desc);
    set('[data-tw-title-preview]', form.querySelector('[data-tw-title-input]')?.value || title);
    set('[data-tw-desc-preview]', form.querySelector('[data-tw-desc-input]')?.value || desc);
  };

  form.querySelectorAll('input, textarea').forEach((el) => el.addEventListener('input', syncPreview));
  syncPreview();

  document.querySelectorAll('[data-seo-tab]').forEach((btn) => {
    btn.addEventListener('click', () => {
      document.querySelectorAll('[data-seo-tab]').forEach((b) => b.classList.remove('is-active'));
      btn.classList.add('is-active');
      const key = btn.dataset.seoTab;
      document.querySelectorAll('[data-seo-panel]').forEach((panel) => {
        panel.classList.toggle('hidden', panel.dataset.seoPanel !== key);
      });
    });
  });

  const analyzeBtn = document.querySelector('[data-analyze-btn]');
  analyzeBtn?.addEventListener('click', async () => {
    if (!analyzeUrl) return;
    analyzeBtn.disabled = true;
    try {
      const res = await fetch(analyzeUrl, {
        method: 'POST',
        headers: { 'Accept': 'application/json', 'X-CSRF-TOKEN': csrf },
      });
      const data = await res.json();
      document.querySelector('[data-seo-score]').textContent = data.seo_score ?? '—';
      document.querySelector('[data-readability-score]').textContent = data.readability_score ?? '—';
      const list = document.querySelector('[data-seo-checks]');
      if (list && data.analysis?.checks) {
        list.innerHTML = Object.values(data.analysis.checks).map((c) =>
          `<li class="${c.pass ? 'text-emerald-300' : 'text-amber-200'}">${c.pass ? '✓' : '!'} ${c.message}</li>`
        ).join('');
      }
    } catch { /* ignore */ }
    analyzeBtn.disabled = false;
  });
})();
</script>
@endsection