@extends('nexus.layouts.app')

@section('page-title', $mode === 'new' ? 'New Post' : 'Edit: ' . $slug)
@section('sys-mode', 'BLOG')

@php
    $fm = old() ?: $frontmatter;
    $get = fn($k, $d = '') => old($k, $fm[$k] ?? $d);
    $kwRaw = $get('keywords', []);
    $keywordsStr = is_array($kwRaw) ? implode(', ', $kwRaw) : $kwRaw;

    $field = "width: 100%; padding: 9px 11px; background: #0a0a0a; border: 1px solid #2a2a2a; color: #eaeaea; font-family: 'IBM Plex Mono', monospace; font-size: 12px; border-radius: 2px; box-sizing: border-box; outline: none; transition: border-color 0.15s;";
    $label = "display: block; font-family: 'IBM Plex Mono', monospace; font-size: 10px; color: #7a7a7a; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 6px;";
    $panel = "background: #111; border-top: 1px solid #2a2a2a; padding: 20px 24px; margin-bottom: 16px;";
    $sectionH = "font-family: 'IBM Plex Mono', monospace; font-size: 10px; color: #7a7a7a; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; margin: 0 0 16px;";
    $req = '<span style="color: #dc2626;">*</span>';
@endphp

@section('head')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/codemirror.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/theme/material-darker.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/codemirror.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/mode/markdown/markdown.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/mode/yaml/yaml.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/mode/yaml-frontmatter/yaml-frontmatter.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/addon/edit/continuelist.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/12.0.2/marked.min.js"></script>
<style>
    .CodeMirror { height: auto; min-height: 500px; border: 1px solid #2a2a2a; border-radius: 2px; font-family: 'IBM Plex Mono', monospace; font-size: 12px; line-height: 1.65; background: #0a0a0a !important; }
    .CodeMirror-scroll { max-height: 700px; }
    .CodeMirror-gutters { background: #0a0a0a !important; border-right: 1px solid #1e1e1e !important; }
    .CodeMirror-linenumber { color: #555 !important; }
    .cm-header { color: #e8842a !important; font-weight: 700; }
    .cm-strong { color: #eaeaea !important; }
    .cm-em { color: #cbd5e1 !important; }
    .cm-link, .cm-url { color: #4ade80 !important; }
    .cm-comment, .cm-meta { color: #7a7a7a !important; }
    .cm-quote { color: #94a3b8 !important; }
    .cm-formatting { color: #555 !important; }
    .cm-def, .cm-atom { color: #e8842a !important; }
    .cm-string { color: #a5f3fc !important; }
    .CodeMirror-cursor { border-left-color: #e8842a !important; }
    .CodeMirror-selected { background: rgba(232,132,42,0.15) !important; }
    .CodeMirror-vscrollbar::-webkit-scrollbar, .CodeMirror-hscrollbar::-webkit-scrollbar { width: 6px; height: 6px; }
    .CodeMirror-vscrollbar::-webkit-scrollbar-track, .CodeMirror-hscrollbar::-webkit-scrollbar-track { background: #0a0a0a; }
    .CodeMirror-vscrollbar::-webkit-scrollbar-thumb, .CodeMirror-hscrollbar::-webkit-scrollbar-thumb { background: #3a3a3a; border-radius: 3px; }
    .CodeMirror-vscrollbar::-webkit-scrollbar-thumb:hover, .CodeMirror-hscrollbar::-webkit-scrollbar-thumb:hover { background: #e8842a; }
    .nblog-preview { display: none; min-height: 500px; max-height: 700px; overflow-y: auto; padding: 24px; background: #0a0a0a; border: 1px solid #2a2a2a; border-radius: 2px; color: #eaeaea; font-family: 'Inter', -apple-system, sans-serif; font-size: 14px; line-height: 1.7; scrollbar-width: thin; scrollbar-color: #3a3a3a #0a0a0a; }
    .nblog-preview::-webkit-scrollbar { width: 6px; }
    .nblog-preview::-webkit-scrollbar-track { background: #0a0a0a; }
    .nblog-preview::-webkit-scrollbar-thumb { background: #3a3a3a; border-radius: 3px; }
    .nblog-preview::-webkit-scrollbar-thumb:hover { background: #e8842a; }
    .nblog-preview h1, .nblog-preview h2, .nblog-preview h3 { color: #ffffff; font-family: 'Bebas Neue', sans-serif; letter-spacing: 1px; margin: 1.5em 0 0.5em; }
    .nblog-preview h2 { font-size: 26px; }
    .nblog-preview h3 { font-size: 20px; color: #e8842a; }
    .nblog-preview p { margin: 0 0 1em; color: #cbd5e1; }
    .nblog-preview a { color: #e8842a; }
    .nblog-preview strong { color: #ffffff; }
    .nblog-preview code { background: #1e1e1e; padding: 2px 6px; border-radius: 2px; font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: #a5f3fc; }
    .nblog-preview pre { background: #1e1e1e; padding: 12px; border-radius: 2px; overflow-x: auto; }
    .nblog-preview pre code { background: none; padding: 0; }
    .nblog-preview blockquote { border-left: 2px solid #e8842a; margin: 1em 0; padding: 0.5em 1em; color: #94a3b8; font-style: italic; }
    .nblog-preview ul, .nblog-preview ol { padding-left: 1.5em; color: #cbd5e1; }
    .nblog-preview .directive-block { background: rgba(232,132,42,0.06); border-left: 2px solid #e8842a; padding: 12px 16px; margin: 1em 0; font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: #7a7a7a; letter-spacing: 1px; }
    .nblog-preview .directive-block strong { color: #e8842a; letter-spacing: 2px; text-transform: uppercase; }
    html { scroll-padding-top: 120px; }
    .page-header { scroll-margin-top: 120px; }
    .nblog-back { transition: color 0.15s; }
    .nblog-back:hover { color: #e8842a !important; }
    .nblog-dirty-dot { display: none; width: 8px; height: 8px; border-radius: 50%; background: #e8842a; margin-left: 8px; vertical-align: middle; }
    .nblog-dirty .nblog-dirty-dot { display: inline-block; }
    .nblog-directive-preview { display: none; margin-top: 8px; padding: 12px; background: #0a0a0a; border: 1px solid #2a2a2a; border-radius: 2px; font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: #cbd5e1; white-space: pre; overflow-x: auto; }
    .nblog-directive-actions { display: none; margin-top: 8px; gap: 6px; }
    .nblog-directive-actions button { background: #0a0a0a; border: 1px solid #2a2a2a; color: #eaeaea; padding: 6px 12px; font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; cursor: pointer; border-radius: 2px; }
    .nblog-directive-actions button.primary { background: #e8842a; color: #0a0a0a; border-color: #e8842a; }
    .nblog-open .nblog-directive-preview, .nblog-open .nblog-directive-actions { display: block; }
    .nblog-open .nblog-directive-actions { display: flex; }

    .nblog-mobile-bar { display: none; }
    .nblog-drawer-close { display: none; }
    .nblog-drawer-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 998; }
    .nblog-drawer-backdrop.open { display: block; }

    @media (max-width: 1024px) {
        .nblog-grid { grid-template-columns: 1fr !important; }
        .nblog-tree, .nblog-meta {
            position: fixed !important;
            top: 0; bottom: 0;
            width: 85vw; max-width: 360px;
            z-index: 999;
            max-height: none !important;
            overflow-y: auto;
            transition: transform 0.25s ease;
            padding: 20px !important;
            background: #0a0a0a !important;
            border-top: none !important;
        }
        .nblog-tree { left: 0; transform: translateX(-105%); border-right: 1px solid #2a2a2a; }
        .nblog-meta { right: 0; transform: translateX(105%); border-left: 1px solid #2a2a2a; }
        .nblog-tree.open, .nblog-meta.open { transform: translateX(0); }
        .nblog-mobile-bar {
            display: flex; gap: 8px; margin-bottom: 16px;
        }
        .nblog-mobile-bar button {
            flex: 1; background: #111; border: 1px solid #2a2a2a; color: #eaeaea;
            padding: 10px; font-family: 'IBM Plex Mono', monospace; font-size: 11px;
            letter-spacing: 2px; text-transform: uppercase; cursor: pointer; border-radius: 2px;
        }
        .nblog-drawer-close {
            display: block;
            position: absolute; top: 12px; right: 12px;
            background: none; border: none; color: #7a7a7a; font-size: 20px;
            cursor: pointer; padding: 4px 10px;
        }
    }

    .nblog-toolbar { display: flex; gap: 4px; padding: 8px; background: #111; border: 1px solid #2a2a2a; border-bottom: none; border-radius: 2px 2px 0 0; flex-wrap: wrap; align-items: center; }
    .nblog-toolbar button, .nblog-toolbar select { background: #0a0a0a; border: 1px solid #2a2a2a; color: #eaeaea; padding: 5px 10px; font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; cursor: pointer; border-radius: 2px; }
    .nblog-toolbar button:hover, .nblog-toolbar select:hover { border-color: #e8842a; color: #e8842a; }
    .nblog-toolbar .sep { width: 1px; height: 20px; background: #2a2a2a; margin: 0 4px; }

    .nblog-statusbar { display: flex; justify-content: space-between; padding: 8px 12px; background: #111; border: 1px solid #2a2a2a; border-top: none; border-radius: 0 0 2px 2px; font-family: 'IBM Plex Mono', monospace; font-size: 10px; color: #7a7a7a; letter-spacing: 1px; }
    .nblog-statusbar strong { color: #eaeaea; font-weight: 500; }

    .nblog-scroll::-webkit-scrollbar { width: 6px; height: 6px; }
    .nblog-scroll::-webkit-scrollbar-track { background: #0a0a0a; }
    .nblog-scroll::-webkit-scrollbar-thumb { background: #3a3a3a; border-radius: 3px; }
    .nblog-scroll::-webkit-scrollbar-thumb:hover { background: #e8842a; }
    .nblog-scroll { scrollbar-width: thin; scrollbar-color: #3a3a3a #0a0a0a; }
    input:focus, textarea:focus, select:focus { border-color: #e8842a !important; }
    textarea { scrollbar-width: thin; scrollbar-color: #3a3a3a #0a0a0a; }
    textarea::-webkit-scrollbar { width: 6px; }
    textarea::-webkit-scrollbar-track { background: #0a0a0a; }
    textarea::-webkit-scrollbar-thumb { background: #3a3a3a; border-radius: 3px; }
    textarea::-webkit-scrollbar-thumb:hover { background: #e8842a; }
</style>
@endsection

@section('content')
<div class="page-header">
    <div>
        <a href="{{ route('nexus.blog.index') }}" class="nblog-back" style="color: #7a7a7a; text-decoration: none; font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; display: inline-block; margin-bottom: 8px;">← Back to Posts</a>
        <h1 id="nblog-h1">{{ $mode === 'new' ? 'NEW' : 'EDIT' }} <span style="color: #e8842a;">POST</span><span class="nblog-dirty-dot" title="Unsaved changes"></span></h1>
        @if($mode === 'edit')
            <p class="page-header-sub" style="font-family: 'IBM Plex Mono', monospace;">{{ $slug }}</p>
        @endif
    </div>
    @if($mode === 'edit')
        <div class="page-header-right">
            <a href="{{ $publicBase . $slug }}" target="_blank" rel="noopener" style="color: #7a7a7a; text-decoration: none; font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: 2px; text-transform: uppercase;">View Live →</a>
        </div>
    @endif
</div>

@if(session('status'))
    <div style="background: rgba(34,197,94,0.08); border-left: 2px solid #22c55e; color: #4ade80; padding: 10px 14px; margin: 16px 0; font-family: 'IBM Plex Mono', monospace; font-size: 12px;">
        {{ session('status') }}
    </div>
@endif

@if($errors->any())
    <div style="background: rgba(220,38,38,0.08); border-left: 2px solid #dc2626; color: #fca5a5; padding: 12px 14px; margin: 16px 0; font-family: 'IBM Plex Mono', monospace; font-size: 12px;">
        <strong style="color: #dc2626; letter-spacing: 2px;">FIX ERRORS:</strong>
        <ul style="margin: 8px 0 0 20px;">
            @foreach($errors->all() as $e) <li>{{ $e }}</li> @endforeach
        </ul>
    </div>
@endif

<form method="POST" action="{{ route('nexus.blog.publish') }}" style="margin-top: 20px;">
    @csrf
    <input type="hidden" name="mode" value="{{ $mode }}">
    <input type="hidden" name="original_slug" value="{{ $slug }}">

    <div class="nblog-mobile-bar">
        <button type="button" id="nblog-open-tree">☰ Posts</button>
        <button type="button" id="nblog-open-meta">Meta ⚙</button>
    </div>
    <div class="nblog-drawer-backdrop" id="nblog-backdrop"></div>
    <div class="nblog-grid" style="display: grid; grid-template-columns: 240px 1fr 340px; gap: 20px;">

        {{-- FILE TREE --}}
        <div class="nblog-tree" style="background: #111; border-top: 1px solid #2a2a2a; padding: 16px; max-height: 90vh; overflow-y: auto; position: sticky; top: 100px; scrollbar-width: thin; scrollbar-color: #3a3a3a #0a0a0a;"><button type="button" class="nblog-drawer-close" data-close="tree">✕</button>
            <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid #2a2a2a;">
                <span style="font-family: 'IBM Plex Mono', monospace; font-size: 10px; color: #7a7a7a; letter-spacing: 2px; text-transform: uppercase;">Posts</span>
                <a href="{{ route('nexus.blog.create') }}" title="New post" style="color: #e8842a; text-decoration: none; font-family: 'IBM Plex Mono', monospace; font-size: 14px; font-weight: 700; line-height: 1;">+</a>
            </div>
            @foreach($allPosts as $p)
                <a href="{{ route('nexus.blog.edit', ['slug' => $p['slug']]) }}"
                   style="display: block; padding: 10px 8px; margin-bottom: 2px; text-decoration: none; border-left: 2px solid {{ $p['slug'] === $slug ? '#e8842a' : 'transparent' }}; background: {{ $p['slug'] === $slug ? 'rgba(232,132,42,0.08)' : 'transparent' }}; transition: background 0.15s;"
                   onmouseover="this.style.background='{{ $p['slug'] === $slug ? 'rgba(232,132,42,0.12)' : '#1a1a1a' }}'"
                   onmouseout="this.style.background='{{ $p['slug'] === $slug ? 'rgba(232,132,42,0.08)' : 'transparent' }}'">
                    <div style="color: {{ $p['slug'] === $slug ? '#eaeaea' : '#cbd5e1' }}; font-family: 'Inter', sans-serif; font-size: 12px; font-weight: {{ $p['slug'] === $slug ? 600 : 400 }}; line-height: 1.4; margin-bottom: 3px;">{{ \Illuminate\Support\Str::limit($p['title'], 48) }}</div>
                    <div style="color: #555; font-family: 'IBM Plex Mono', monospace; font-size: 9px; letter-spacing: 1px; text-transform: uppercase;">{{ $p['category'] ?: '—' }}</div>
                </a>
            @endforeach
            @if(empty($allPosts))
                <div style="color: #555; font-family: 'IBM Plex Mono', monospace; font-size: 11px; padding: 12px 0;">No posts yet</div>
            @endif
        </div>

        <div>
            <div style="{{ $panel }}">
                <h3 style="{{ $sectionH }}">Content</h3>

                <div style="margin-bottom: 16px;">
                    <label style="{{ $label }}">Title {!! $req !!}</label>
                    <input type="text" name="title" value="{{ $get('title') }}" required maxlength="200" style="{{ $field }} font-family: 'Inter', sans-serif; font-size: 14px;">
                </div>

                <div style="margin-bottom: 16px;">
                    <label style="{{ $label }}">Slug {!! $req !!}</label>
                    <input type="text" name="slug" value="{{ $get('slug', $slug) }}" required pattern="[a-z0-9\-]+" maxlength="120" style="{{ $field }}">
                    <div style="color: #555; font-size: 10px; margin-top: 6px; font-family: 'IBM Plex Mono', monospace; letter-spacing: 1px;">lowercase, hyphens only · renaming moves the file</div>
                </div>

                <div style="margin-bottom: 16px;">
                    <label style="{{ $label }}">Excerpt {!! $req !!}</label>
                    <textarea name="excerpt" required maxlength="400" rows="3" style="{{ $field }} resize: vertical;">{{ $get('excerpt') }}</textarea>
                </div>

                <div>
                    <label style="{{ $label }}">Body (Markdown) {!! $req !!}</label>
                    <div class="nblog-toolbar">
                        <button type="button" data-cm-action="bold" title="Bold">B</button>
                        <button type="button" data-cm-action="italic" title="Italic">I</button>
                        <div class="sep"></div>
                        <button type="button" data-cm-action="h2" title="Heading 2">H2</button>
                        <button type="button" data-cm-action="h3" title="Heading 3">H3</button>
                        <div class="sep"></div>
                        <button type="button" data-cm-action="link" title="Link">Link</button>
                        <button type="button" data-cm-action="code" title="Code Block">Code</button>
                        <button type="button" data-cm-action="quote" title="Quote">Quote</button>
                        <button type="button" data-cm-action="ul" title="List">List</button>
                        <div class="sep"></div>
                        <button type="button" id="nblog-preview-btn" title="Preview">Preview</button>
                        <div class="sep"></div>
                        <div id="nblog-directive-wrap" style="display: flex; flex-direction: column; align-items: stretch; gap: 0;">
                            <select id="nblog-directive">
                                <option value="">+ Directive</option>
                                <option value="stat-grid">stat-grid</option>
                                <option value="callout">callout</option>
                                <option value="cta">cta</option>
                                <option value="quote-block">quote</option>
                                <option value="steps">steps</option>
                                <option value="faq">faq</option>
                                <option value="chart">chart</option>
                                <option value="pilot-card">pilot-card</option>
                                <option value="comparison-table">comparison-table</option>
                            </select>
                        </div>
                    </div>
                    <div id="nblog-directive-preview" class="nblog-directive-preview"></div>
                    <div id="nblog-directive-actions" class="nblog-directive-actions">
                        <button type="button" id="nblog-directive-insert" class="primary">Insert</button>
                        <button type="button" id="nblog-directive-cancel">Cancel</button>
                    </div>
                    <textarea id="nblog-body" name="body" required style="display: none;">{{ old('body', $body) }}</textarea>
                    <div id="nblog-editor"></div>
                    <div id="nblog-preview" class="nblog-preview"></div>
                    <div class="nblog-statusbar">
                        <span><strong id="nblog-words">0</strong> words · <strong id="nblog-read">0 min</strong> read</span>
                        <span>Ln <strong id="nblog-ln">1</strong>, Col <strong id="nblog-col">1</strong></span>
                    </div>
                </div>

                <script>
                (function() {
                    var ta = document.getElementById('nblog-body');
                    var cm = CodeMirror(document.getElementById('nblog-editor'), {
                        value: ta.value,
                        mode: { name: 'yaml-frontmatter', base: 'markdown' },
                        theme: 'material-darker',
                        lineNumbers: true,
                        lineWrapping: true,
                        indentUnit: 2,
                        tabSize: 2,
                        extraKeys: { 'Enter': 'newlineAndIndentContinueMarkdownList' }
                    });

                    var wordsEl = document.getElementById('nblog-words');
                    var readEl  = document.getElementById('nblog-read');
                    var lnEl    = document.getElementById('nblog-ln');
                    var colEl   = document.getElementById('nblog-col');

                    function updateStats() {
                        var v = cm.getValue();
                        ta.value = v;
                        var words = (v.match(/\S+/g) || []).length;
                        wordsEl.textContent = words.toLocaleString();
                        readEl.textContent = Math.max(1, Math.ceil(words / 200)) + ' min';
                    }
                    cm.on('change', updateStats);
                    cm.on('cursorActivity', function() {
                        var c = cm.getCursor();
                        lnEl.textContent = c.line + 1;
                        colEl.textContent = c.ch + 1;
                    });
                    updateStats();

                    // Toolbar actions
                    var actions = {
                        bold: function() { wrap('**', '**'); },
                        italic: function() { wrap('*', '*'); },
                        h2: function() { prefixLine('## '); },
                        h3: function() { prefixLine('### '); },
                        link: function() { wrap('[', '](url)'); },
                        code: function() { wrap('\n```\n', '\n```\n'); },
                        quote: function() { prefixLine('> '); },
                        ul: function() { prefixLine('- '); }
                    };
                    function wrap(pre, post) {
                        var sel = cm.getSelection();
                        if (sel.startsWith(pre) && sel.endsWith(post)) {
                            cm.replaceSelection(sel.slice(pre.length, sel.length - post.length));
                        } else {
                            cm.replaceSelection(pre + sel + post);
                        }
                        cm.focus();
                    }
                    function prefixLine(pre) {
                        var c = cm.getCursor();
                        cm.replaceRange(pre, { line: c.line, ch: 0 });
                        cm.focus();
                    }
                    document.querySelectorAll('[data-cm-action]').forEach(function(btn) {
                        btn.addEventListener('click', function() {
                            var a = btn.getAttribute('data-cm-action');
                            if (actions[a]) actions[a]();
                        });
                    });

                    // Directive snippets
                    var directives = {
                        'stat-grid': ':::stat-grid\n- label: Metric name\n  value: "42%"\n  note: optional context\n- label: Another\n  value: "$1.2M"\n:::\n',
                        'callout': ':::callout kind=info\nYour message here.\n:::\n',
                        'cta': ':::cta\ntitle: Ready to start?\nbody: Short pitch.\nbutton_text: Get Started\nbutton_url: /register\n:::\n',
                        'quote-block': ':::quote author="Name" role="Role"\nQuoted text.\n:::\n',
                        'steps': ':::steps\n- title: Step one\n  body: What happens here.\n- title: Step two\n  body: Next thing.\n:::\n',
                        'faq': ':::faq\n- q: Question?\n  a: Answer.\n- q: Another?\n  a: Another answer.\n:::\n',
                        'chart': ':::chart kind=line\ntitle: Chart title\nlabels: [Jan, Feb, Mar]\nseries:\n  - name: Series A\n    data: [10, 20, 30]\n:::\n',
                        'pilot-card': ':::pilot-card\nname: Pilot Name\nwin_rate: "95%"\nfollowers: 12\n:::\n',
                        'comparison-table': ':::comparison-table\nheaders: [Feature, A, B]\nrows:\n  - [Speed, Fast, Slow]\n  - [Cost, Low, High]\n:::\n'
                    };
                    var directiveSel = document.getElementById('nblog-directive');
                    var directiveWrap = document.getElementById('nblog-directive-wrap');
                    var directivePrev = document.getElementById('nblog-directive-preview');
                    var directiveIns  = document.getElementById('nblog-directive-insert');
                    var directiveCan  = document.getElementById('nblog-directive-cancel');
                    var pendingSnippet = null;
                    directiveSel.addEventListener('change', function() {
                        var k = directiveSel.value;
                        if (k && directives[k]) {
                            pendingSnippet = directives[k];
                            directivePrev.textContent = pendingSnippet;
                            directiveWrap.classList.add('nblog-open');
                        }
                    });
                    directiveIns.addEventListener('click', function() {
                        if (pendingSnippet) {
                            cm.replaceRange('\n' + pendingSnippet, cm.getCursor());
                            cm.focus();
                        }
                        directiveSel.value = '';
                        pendingSnippet = null;
                        directiveWrap.classList.remove('nblog-open');
                    });
                    directiveCan.addEventListener('click', function() {
                        directiveSel.value = '';
                        pendingSnippet = null;
                        directiveWrap.classList.remove('nblog-open');
                    });

                    // Dirty tracking + unsaved warning + autosave
                    var initialValue = cm.getValue();
                    var h1 = document.getElementById('nblog-h1');
                    var slug = @json($slug ?: 'new');
                    var storageKey = 'nblog:draft:' + slug;
                    var dirty = false;

                    // Restore autosave if newer
                    try {
                        var saved = localStorage.getItem(storageKey);
                        if (saved) {
                            var data = JSON.parse(saved);
                            if (data.value && data.value !== initialValue && confirm('Autosaved draft found (' + new Date(data.ts).toLocaleString() + '). Restore?')) {
                                cm.setValue(data.value);
                                initialValue = data.value;
                            }
                        }
                    } catch (e) {}

                    cm.on('change', function() {
                        var cur = cm.getValue();
                        if (cur !== initialValue) {
                            if (!dirty) { dirty = true; h1.classList.add('nblog-dirty'); }
                        } else if (dirty) {
                            dirty = false; h1.classList.remove('nblog-dirty');
                        }
                    });

                    // Autosave every 5s if dirty
                    setInterval(function() {
                        if (dirty) {
                            try { localStorage.setItem(storageKey, JSON.stringify({ value: cm.getValue(), ts: Date.now() })); } catch (e) {}
                        }
                    }, 5000);

                    window.addEventListener('beforeunload', function(e) {
                        if (dirty) { e.preventDefault(); e.returnValue = ''; return ''; }
                    });

                    // Publish button loading state + clear autosave on submit
                    var form = document.querySelector('form');
                    var submitBtn = form.querySelector('button[type=submit]');
                    var originalBtnText = submitBtn.textContent;
                    form.addEventListener('submit', function() {
                        dirty = false;
                        try { localStorage.removeItem(storageKey); } catch (e) {}
                        submitBtn.disabled = true;
                        submitBtn.style.opacity = '0.6';
                        submitBtn.style.cursor = 'wait';
                        submitBtn.textContent = 'Publishing…';
                    });

                    // Preview toggle
                    var previewBtn  = document.getElementById('nblog-preview-btn');
                    var previewPane = document.getElementById('nblog-preview');
                    var editorEl    = document.getElementById('nblog-editor');
                    var previewing  = false;
                    previewBtn.addEventListener('click', function() {
                        previewing = !previewing;
                        if (previewing) {
                            var md = cm.getValue();
                            // Strip :::directive blocks and replace with placeholder
                            md = md.replace(/:::([a-z\-]+)([^\n]*)\n([\s\S]*?):::/g, function(_, name, attrs, body) {
                                return '<div class="directive-block"><strong>' + name + '</strong>' + (attrs.trim() ? ' ' + attrs.trim() : '') + '<pre style="margin: 8px 0 0; color: #94a3b8; font-size: 11px;">' + body.trim().replace(/</g, '&lt;') + '</pre></div>';
                            });
                            previewPane.innerHTML = marked.parse(md);
                            editorEl.style.display = 'none';
                            previewPane.style.display = 'block';
                            previewBtn.style.background = '#e8842a';
                            previewBtn.style.color = '#0a0a0a';
                        } else {
                            editorEl.style.display = '';
                            previewPane.style.display = 'none';
                            previewBtn.style.background = '';
                            previewBtn.style.color = '';
                        }
                    });

                    // Ensure textarea synced on submit
                    form.addEventListener('submit', function() { ta.value = cm.getValue(); }, true);
                    // Mobile drawer toggles — wait for full DOM so .nblog-meta below is parsed
                    document.addEventListener('DOMContentLoaded', function() {
                        var tree = document.querySelector('.nblog-tree');
                        var meta = document.querySelector('.nblog-meta');
                        var backdrop = document.getElementById('nblog-backdrop');
                        var openTree = document.getElementById('nblog-open-tree');
                        var openMeta = document.getElementById('nblog-open-meta');
                        function closeDrawers() {
                            if (tree) tree.classList.remove('open');
                            if (meta) meta.classList.remove('open');
                            if (backdrop) backdrop.classList.remove('open');
                        }
                        if (openTree && tree && backdrop) openTree.addEventListener('click', function() {
                            tree.classList.add('open'); backdrop.classList.add('open');
                        });
                        if (openMeta && meta && backdrop) openMeta.addEventListener('click', function() {
                            meta.classList.add('open'); backdrop.classList.add('open');
                        });
                        if (backdrop) backdrop.addEventListener('click', closeDrawers);
                        document.querySelectorAll('[data-close]').forEach(function(btn) {
                            btn.addEventListener('click', closeDrawers);
                        });
                    });
                })();
                </script>
            </div>
        </div>

        <div class="nblog-meta">
            <button type="button" class="nblog-drawer-close" data-close="meta">✕</button>
            <div style="{{ $panel }}">
                <h3 style="{{ $sectionH }}">Publish</h3>
                <button type="submit" style="width: 100%; background: #e8842a; color: #0a0a0a; padding: 12px; border: none; font-family: 'IBM Plex Mono', monospace; font-size: 12px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; cursor: pointer; border-radius: 2px;">
                    {{ $mode === 'new' ? 'Publish Post' : 'Update Post' }}
                </button>
                <div style="color: #555; font-size: 10px; margin-top: 12px; font-family: 'IBM Plex Mono', monospace; line-height: 1.6; letter-spacing: 0.5px;">Writes <span style="color: #7a7a7a;">resources/blog/posts/{slug}.md</span> and clears view cache.</div>
            </div>

            <div style="{{ $panel }}">
                <h3 style="{{ $sectionH }}">Metadata</h3>

                <div style="margin-bottom: 14px;">
                    <label style="{{ $label }}">Author {!! $req !!}</label>
                    <select name="author" required style="{{ $field }}">
                        <option value="">— pick —</option>
                        @foreach($authors as $key => $name)
                            <option value="{{ $key }}" {{ $get('author') === $key ? 'selected' : '' }}>{{ $name }} ({{ $key }})</option>
                        @endforeach
                    </select>
                </div>

                <div style="margin-bottom: 14px;">
                    <label style="{{ $label }}">Category {!! $req !!}</label>
                    <select name="category" required style="{{ $field }}">
                        <option value="">— pick —</option>
                        @foreach($categories as $key => $name)
                            <option value="{{ $key }}" {{ $get('category') === $key ? 'selected' : '' }}>{{ $name }}</option>
                        @endforeach
                    </select>
                </div>

                <div>
                    <label style="{{ $label }}">Published Date {!! $req !!}</label>
                    <input type="date" name="published_at" value="{{ $get('published_at', now()->toDateString()) }}" required style="{{ $field }} color-scheme: dark;">
                </div>
            </div>

            <div style="{{ $panel }}">
                <h3 style="{{ $sectionH }}">SEO</h3>

                <div style="margin-bottom: 14px;">
                    <label style="{{ $label }}">Target Keyword</label>
                    <input type="text" name="target_keyword" value="{{ $get('target_keyword') }}" maxlength="120" style="{{ $field }}">
                </div>

                <div style="margin-bottom: 14px;">
                    <label style="{{ $label }}">Meta Description {!! $req !!}</label>
                    <textarea name="meta_description" required maxlength="200" rows="3" style="{{ $field }} resize: vertical;">{{ $get('meta_description') }}</textarea>
                </div>

                <div>
                    <label style="{{ $label }}">Keywords</label>
                    <textarea name="keywords" rows="3" style="{{ $field }} resize: vertical;" placeholder="comma, separated, values">{{ $keywordsStr }}</textarea>
                </div>
            </div>

            <div style="{{ $panel }}">
                <h3 style="{{ $sectionH }}">Images</h3>

                <div style="margin-bottom: 14px;">
                    <label style="{{ $label }}">Featured Image Path</label>
                    <input type="text" name="featured_image" value="{{ $get('featured_image') }}" maxlength="200" placeholder="/blog-assets/{slug}/hero.png" style="{{ $field }}">
                    <div style="color: #555; font-size: 10px; margin-top: 6px; font-family: 'IBM Plex Mono', monospace; letter-spacing: 0.5px;">leave blank to auto-use category blueprint</div>
                </div>

                <div>
                    <label style="{{ $label }}">OG Image Path</label>
                    <input type="text" name="og_image" value="{{ $get('og_image') }}" maxlength="200" placeholder="/images/og-default.png" style="{{ $field }}">
                </div>
            </div>
        </div>
    </div>
</form>
@endsection