@extends('admin.layout')
@section('title', 'Edit Page — '.$page->title)

@section('content')
<div class="flex items-center justify-between gap-4 mb-6">
    <div>
        <h1 class="text-xl font-bold text-[#0a0a0b]">{{ $page->title }}</h1>
        @if ($page->is_published)
            <span class="inline-flex items-center gap-1.5 text-xs font-semibold text-emerald-600 mt-1"><span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span> Published</span>
        @else
            <span class="inline-flex items-center gap-1.5 text-xs font-semibold text-neutral-400 mt-1"><span class="w-1.5 h-1.5 rounded-full bg-neutral-300"></span> Draft — not visible to visitors</span>
        @endif
    </div>
    <form method="POST" action="{{ route('admin.pages.publish', $page) }}">
        @csrf
        <button type="submit" class="text-sm font-semibold px-6 py-3 rounded-full transition-colors duration-150 {{ $page->is_published ? 'border border-neutral-300 text-neutral-700 hover:bg-neutral-50' : 'bg-[#0a0a0b] text-white hover:bg-[#222]' }}">
            {{ $page->is_published ? 'Unpublish' : 'Publish' }}
        </button>
    </form>
</div>

@if ($page->is_reserved)
    <div class="bg-amber-50 border border-amber-200 text-amber-800 text-sm rounded-2xl px-5 py-4 mb-6">
        <strong>Built-in page.</strong>
        @if ($page->is_published)
            You're editing the live version of this page — visitors currently see the blocks below. Click "Unpublish" above any time to instantly go back to the default design.
        @else
            The blocks below have been pre-filled to match the current live design, but the page itself is <strong>not published yet</strong> — visitors still see the normal default page. Edit the blocks, use "Preview" below to check how it looks, then click "Publish" above when you're happy with it.
        @endif
    </div>
@endif

@php
    $reservedUrls = ['home' => '/', 'models' => '/models', 'promotions' => '/promotions', 'news' => '/news', 'faq' => '/faq'];
    $liveUrl = $page->is_reserved ? ($reservedUrls[$page->slug] ?? '/') : route('pages.show', $page);
@endphp
<div class="flex items-center gap-4 mb-6 -mt-2">
    @if (!$page->isVisual())
        <a href="{{ route('admin.pages.preview', $page) }}" target="_blank" class="inline-block text-sm text-neutral-500 hover:text-[#0a0a0b]">Preview →</a>
    @endif
    @if ($page->is_published)
        <a href="{{ $liveUrl }}" target="_blank" class="inline-block text-sm text-neutral-500 hover:text-[#0a0a0b]">View live page →</a>
    @endif
</div>

@if ($page->isVisual())
    <div class="bg-white rounded-2xl border border-black/[0.06] p-8 text-center">
        <p class="text-[#0a0a0b] font-semibold text-[15px] mb-2">Visual Drag &amp; Drop Page (legacy)</p>
        <p class="text-neutral-500 text-sm mb-6">Design this page freely — drag, drop, and style any element, no fixed sections.</p>
        <a href="{{ route('admin.pages.design', $page) }}" class="inline-block bg-[#0a0a0b] text-white text-sm font-semibold px-6 py-3 rounded-full hover:bg-[#222]">Open Visual Designer →</a>
    </div>
@elseif ($page->isCanvas())
    <div class="bg-white rounded-2xl border border-black/[0.06] p-8 text-center">
        <p class="text-[#0a0a0b] font-semibold text-[15px] mb-2">Freeform Canvas Page</p>
        <p class="text-neutral-500 text-sm mb-6">Draw your layout — drag any element anywhere, resize it by hand, and it becomes real code on the page.</p>
        <a href="{{ route('admin.pages.canvas', $page) }}" class="inline-block bg-[#0a0a0b] text-white text-sm font-semibold px-6 py-3 rounded-full hover:bg-[#222]">Open Freeform Canvas →</a>
    </div>
@else
    @if ($page->blocks->isNotEmpty())
        <div class="bg-blue-50 border border-blue-200 text-blue-900 text-sm rounded-2xl px-5 py-4 mb-6 flex items-center justify-between gap-4">
            <div>
                <strong>Want full freeform control?</strong> Switch this page to the drag-anywhere canvas — your current blocks are laid out for you at their current height so nothing jumps, then you can drag anything into place.
            </div>
            <form method="POST" action="{{ route('admin.pages.canvas.convert', $page) }}" onsubmit="return confirm('Switch to the freeform canvas? Your blocks stay saved in the database and are not deleted, but the live page will start using the canvas layout instead.');">
                @csrf
                <button type="submit" class="whitespace-nowrap bg-blue-600 text-white text-sm font-semibold px-5 py-2.5 rounded-full hover:bg-blue-700">Switch to Canvas →</button>
            </form>
        </div>
    @endif
    @php
        $blockTypes = \App\Models\PageBlock::types();
        $createUrl = route('admin.pages.blocks.create', $page);

        // A little Blade partial-in-place: the "+" you hover between any two
        // blocks (and before the first / after the last) — exactly like the
        // WordPress block editor's inserter. Clicking it opens a small menu
        // of block types; picking one creates it at that exact position.
        $inserter = function (int $position, bool $prominent = false) use ($blockTypes, $createUrl) {
            return view('admin.pages.blocks._inserter', [
                'position' => $position,
                'prominent' => $prominent,
                'blockTypes' => $blockTypes,
                'createUrl' => $createUrl,
            ])->render();
        };
    @endphp

    <div class="grid lg:grid-cols-4 gap-6 items-start">
        {{-- CANVAS: a live preview of the real page, edited in place — click
             any text to type directly into it, drag a block's ⠿ handle to
             reorder it, or hover between blocks for a "+" to insert a new
             one right there. --}}
        <div class="lg:col-span-3">
            <p class="text-neutral-400 text-xs mb-3">This is what the page actually looks like. Click any text to edit it, drag the ⠿ handle to reorder a block, or hover between blocks for a "+" to add one there.</p>
            <div id="canvas" class="bg-white rounded-2xl border border-black/[0.06] overflow-hidden">
                {!! $inserter(0, $page->blocks->isEmpty()) !!}
                @foreach ($page->blocks as $block)
                    <div class="canvas-block group relative border-b border-black/[0.06] last:border-b-0" data-block-id="{{ $block->id }}">
                        <div class="pointer-events-none absolute inset-0 z-10 border-2 border-transparent group-hover:border-blue-400 group-hover:pointer-events-none"></div>
                        <div class="absolute top-2 right-2 z-20 hidden group-hover:flex items-center gap-1 bg-white rounded-full shadow-md border border-black/[0.06] px-1.5 py-1">
                            <span class="drag-handle cursor-grab active:cursor-grabbing px-1.5 text-neutral-400 hover:text-[#0a0a0b] select-none" draggable="true" title="Drag to reorder">⠿</span>
                            <span class="text-neutral-200">|</span>
                            <a href="{{ route('admin.pages.blocks.edit', [$page, $block]) }}" class="px-1.5 text-neutral-500 hover:text-[#0a0a0b] text-xs font-semibold">Edit</a>
                            <form method="POST" action="{{ route('admin.pages.blocks.destroy', [$page, $block]) }}" onsubmit="return confirm('Delete this block?');" class="contents">
                                @csrf @method('DELETE')
                                <button type="submit" class="px-1.5 text-neutral-400 hover:text-red-600 text-xs font-semibold">Delete</button>
                            </form>
                        </div>
                        <div class="absolute top-2 left-2 z-20 hidden group-hover:block bg-black/70 text-white text-[11px] font-semibold px-2 py-1 rounded-full">
                            {{ \App\Models\PageBlock::types()[$block->type] ?? $block->type }}
                        </div>
                        <div class="canvas-block-content">
                            @include('blocks.'.$block->type, ['data' => $block->data, 'adminEditable' => true])
                        </div>
                    </div>
                    {!! $inserter($loop->iteration) !!}
                @endforeach
            </div>
        </div>

        {{-- TOOLS PANEL --}}
        <div class="lg:col-span-1 space-y-4 lg:sticky lg:top-6">
            <details class="bg-white rounded-2xl border border-black/[0.06] p-5" open>
                <summary class="text-[#0a0a0b] font-semibold text-sm cursor-pointer">Page Settings</summary>
                <form method="POST" action="{{ route('admin.pages.update', $page) }}" class="space-y-4 mt-4">
                    @csrf
                    @method('PUT')
                    @include('admin.pages._form')
                    <button type="submit" class="w-full bg-[#0a0a0b] text-white text-sm font-semibold px-6 py-3 rounded-full hover:bg-[#222]">Save Page Settings</button>
                </form>
            </details>
        </div>
    </div>

    <div id="drop-indicator" class="h-1.5 mx-4 my-1 rounded-full bg-blue-500 hidden"></div>

    <form id="reorder-form" method="POST" action="{{ route('admin.pages.blocks.reorder', $page) }}" class="hidden">
        @csrf
    </form>

    <style>
        /* The rendered block markup underneath is real page HTML — links,
           details/summary toggles, etc. We don't want any of that to be
           clickable/navigable while editing, EXCEPT the specific text nodes
           we've marked contenteditable, which need clicks and typing. */
        .canvas-block-content { pointer-events: none; }
        .canvas-block-content [contenteditable="true"] {
            pointer-events: auto;
            cursor: text;
            border-radius: 4px;
            outline: 2px solid transparent;
            outline-offset: 2px;
            transition: outline-color 0.15s;
        }
        .canvas-block-content [contenteditable="true"]:hover {
            outline-color: rgba(59, 130, 246, 0.35);
        }
        .canvas-block-content [contenteditable="true"]:focus {
            outline-color: #3b82f6;
            background-color: rgba(59, 130, 246, 0.06);
        }
    </style>

    <script>
    (function () {
        const canvas = document.getElementById('canvas');
        const indicator = document.getElementById('drop-indicator');
        const reorderUrl = @json(route('admin.pages.blocks.reorder', $page));
        const fieldUrlTemplate = @json(route('admin.pages.blocks.field', [$page, '__BLOCK__']));
        const csrfToken = document.querySelector('meta[name="csrf-token"]').content;

        // --- Inline "click the text, type" editing -----------------------
        // Any element the block partial marked contenteditable is real
        // content sitting inside real markup (often a link or FAQ
        // <summary>). Stop that markup's normal click behavior (navigating,
        // toggling) so editing it doesn't also fire it, but let the click
        // still land on the text to place a cursor.
        canvas.addEventListener('click', function (e) {
            const editable = e.target.closest('[contenteditable="true"]');
            if (!editable) return;
            if (e.target.closest('a, summary')) {
                e.preventDefault();
            }
        }, true);

        function saveField(el) {
            const blockEl = el.closest('.canvas-block');
            if (!blockEl) return;
            const blockId = blockEl.dataset.blockId;
            const field = el.dataset.field;
            const value = el.dataset.oneline ? el.textContent.trim() : el.innerText;

            el.dataset.saving = '1';
            fetch(fieldUrlTemplate.replace('__BLOCK__', blockId), {
                method: 'PATCH',
                headers: {
                    'X-CSRF-TOKEN': csrfToken,
                    'X-Requested-With': 'XMLHttpRequest',
                    'Content-Type': 'application/json',
                    'Accept': 'application/json',
                },
                body: JSON.stringify({ field: field, value: value }),
            }).finally(() => { delete el.dataset.saving; });
        }

        canvas.addEventListener('focusout', function (e) {
            const editable = e.target.closest && e.target.closest('[contenteditable="true"]');
            if (!editable) return;
            saveField(editable);
        }, true);

        canvas.addEventListener('keydown', function (e) {
            const editable = e.target.closest && e.target.closest('[contenteditable="true"]');
            if (!editable) return;
            // Single-line fields (headline, tagline, button labels, ...):
            // Enter saves and blurs instead of inserting a line break.
            if (e.key === 'Enter' && editable.dataset.oneline) {
                e.preventDefault();
                editable.blur();
            }
        });

        // --- "+" inserter: click to reveal the block-type menu ------------
        document.querySelectorAll('.inserter-btn').forEach((btn) => {
            btn.addEventListener('click', function (e) {
                e.stopPropagation();
                const menu = btn.closest('.inserter').querySelector('.inserter-menu');
                document.querySelectorAll('.inserter-menu').forEach((m) => { if (m !== menu) m.classList.add('hidden'); });
                menu.classList.toggle('hidden');
            });
        });
        document.addEventListener('click', function () {
            document.querySelectorAll('.inserter-menu').forEach((m) => m.classList.add('hidden'));
        });

        function blockElements() {
            return Array.from(canvas.querySelectorAll(':scope > .canvas-block'));
        }

        function elementAfter(y) {
            const els = blockElements().filter((el) => el !== dragging);
            let closest = null;
            let closestOffset = Number.NEGATIVE_INFINITY;
            els.forEach((el) => {
                const box = el.getBoundingClientRect();
                const offset = y - box.top - box.height / 2;
                if (offset < 0 && offset > closestOffset) {
                    closestOffset = offset;
                    closest = el;
                }
            });
            return closest;
        }

        function showIndicatorAt(y) {
            indicator.classList.remove('hidden');
            const after = elementAfter(y);
            if (after) {
                canvas.insertBefore(indicator, after);
            } else {
                canvas.appendChild(indicator);
            }
        }

        function indicatorPosition() {
            // Count real blocks (not the indicator itself) before the indicator's spot.
            let count = 0;
            for (const child of canvas.children) {
                if (child === indicator) break;
                if (child.classList.contains('canvas-block')) count++;
            }
            return count;
        }

        function hideIndicator() {
            indicator.classList.add('hidden');
            if (indicator.parentElement === canvas) canvas.removeChild(indicator);
        }

        let dragging = null; // the .canvas-block currently being reordered, if any

        // Existing blocks: drag by the ⠿ handle.
        canvas.addEventListener('dragstart', function (e) {
            const handle = e.target.closest('.drag-handle');
            if (!handle) return;
            const block = handle.closest('.canvas-block');
            dragging = block;
            block.style.opacity = '0.4';
            e.dataTransfer.effectAllowed = 'move';
            e.dataTransfer.setData('text/plain', JSON.stringify({ kind: 'move', id: block.dataset.blockId }));
        });
        canvas.addEventListener('dragend', function () {
            if (dragging) dragging.style.opacity = '';
            dragging = null;
            hideIndicator();
        });

        canvas.addEventListener('dragover', function (e) {
            if (!dragging) return; // reordering existing blocks is the only drag left
            e.preventDefault();
            e.dataTransfer.dropEffect = 'move';
            showIndicatorAt(e.clientY);
        });

        canvas.addEventListener('dragleave', function (e) {
            if (!canvas.contains(e.relatedTarget)) hideIndicator();
        });

        canvas.addEventListener('drop', function (e) {
            e.preventDefault();
            if (!dragging) return;
            const raw = e.dataTransfer.getData('text/plain');
            const position = indicatorPosition();
            hideIndicator();
            if (!raw) return;

            let payload;
            try { payload = JSON.parse(raw); } catch (err) { return; }
            if (payload.kind !== 'move') return;

            const ids = blockElements().map((el) => el.dataset.blockId).filter((id) => id !== payload.id);
            ids.splice(position, 0, payload.id);

            fetch(reorderUrl, {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': csrfToken,
                    'X-Requested-With': 'XMLHttpRequest',
                    'Content-Type': 'application/json',
                    'Accept': 'application/json',
                },
                body: JSON.stringify({ order: ids }),
            }).then(() => window.location.reload());
        });
    })();
    </script>
@endif
@endsection