@extends('layouts.app')

@section('content')
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
    <h1 class="h2">Edit Page: {{ $page->title }}</h1>
    <a href="{{ route('website.customizer', $website) }}" target="_blank" class="btn btn-outline-secondary">
        <i class="bi bi-gear"></i> Theme Settings
    </a>
</div>

<div class="row">
    <div class="col-md-12">
        @if($page->isBuilderPage())
        <div class="alert alert-info mb-3">
            <i class="bi bi-info-circle"></i>
            <strong>Visual Builder Page:</strong> This page was created with the visual builder.
            <br>
            <small>Continue using the Visual Builder to maintain your design, or switch to Text Editor if needed.</small>
        </div>
        @endif

        <div class="card">
            <div class="card-body">
                <form action="{{ route('pages.update', [$website, $page]) }}" method="POST" id="page-edit-form">
                    @csrf
                    @method('PUT')
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="title" class="form-label">Page Title</label>
                                <input type="text" class="form-control @error('title') is-invalid @enderror"
                                       id="title" name="title" value="{{ old('title', $page->title) }}" required>
                                @error('title')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="slug" class="form-label">Slug</label>
                                <input type="text" class="form-control @error('slug') is-invalid @enderror"
                                       id="slug" name="slug" value="{{ old('slug', $page->slug) }}" required>
                                @error('slug')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <div class="mb-3">
                        <label for="content" class="form-label">Content</label>
                        <div id="editorjs" style="border:1px solid #e9ecef; border-radius:6px; min-height:200px; background:#fff;"></div>
                        <input type="hidden" name="content" id="content">
                        @error('content')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="mb-3">
                        <label for="template" class="form-label">Page Template</label>
                        <select class="form-select" id="template" name="template">
                            <option value="default" {{ old('template', $page->template) == 'default' ? 'selected' : '' }}>Default (Theme Layout)</option>
                            <option value="blank" {{ old('template', $page->template) == 'blank' ? 'selected' : '' }}>Blank (Builder Only)</option>
                        </select>
                    </div>

                    <div class="mb-3">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="is_home" name="is_home" value="1"
                                   {{ old('is_home', $page->is_home) ? 'checked' : '' }}>
                            <label class="form-check-label" for="is_home">
                                Set as Home Page
                            </label>
                        </div>
                    </div>

                    <div class="d-flex justify-content-between">
                        <div>
                            <a href="{{ route('pages.index', $website) }}" class="btn btn-secondary">Back</a>
                        </div>
                        <div>
                            <a href="{{ route('pages.builder-v2', [$website, $page]) }}" class="btn btn-info text-white me-2">
                                <i class="bi bi-magic"></i> Visual Builder
                            </a>
                            <button type="submit" class="btn btn-primary">Update Page</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Editor.js scripts: CORE FIRST, then plugins -->
<script src="https://cdn.jsdelivr.net/npm/@editorjs/editorjs@latest"></script>
<script src="https://cdn.jsdelivr.net/npm/@editorjs/header@latest"></script>
<script src="https://cdn.jsdelivr.net/npm/@editorjs/list@latest"></script>
<script src="https://cdn.jsdelivr.net/npm/@editorjs/quote@latest"></script>
<script src="https://cdn.jsdelivr.net/npm/@editorjs/image@latest"></script>
<script>
    // Function to convert HTML to Editor.js format
    function convertHtmlToEditorJS(html) {
        if (!html || html.trim() === '') {
            return {};
        }

        const parser = new DOMParser();
        const doc = parser.parseFromString(html, 'text/html');
        const blocks = [];

        // Get all direct children of body
        const elements = doc.body.children;

        for (let element of elements) {
            const tagName = element.tagName.toLowerCase();

            if (tagName.match(/^h[1-6]$/)) {
                // Header blocks
                const level = parseInt(tagName.charAt(1));
                blocks.push({
                    type: 'header',
                    data: {
                        text: element.textContent.trim(),
                        level: level
                    }
                });
            } else if (tagName === 'p') {
                // Paragraph blocks
                const text = element.textContent.trim();
                if (text) {
                    blocks.push({
                        type: 'paragraph',
                        data: {
                            text: text
                        }
                    });
                }
            } else if (tagName === 'ul' || tagName === 'ol') {
                // List blocks
                const items = Array.from(element.children).map(li => li.textContent.trim());
                if (items.length > 0) {
                    blocks.push({
                        type: 'list',
                        data: {
                            style: tagName === 'ul' ? 'unordered' : 'ordered',
                            items: items
                        }
                    });
                }
            } else if (tagName === 'blockquote') {
                // Quote blocks
                blocks.push({
                    type: 'quote',
                    data: {
                        text: element.textContent.trim(),
                        caption: ''
                    }
                });
            } else if (tagName === 'img') {
                // Image blocks
                blocks.push({
                    type: 'image',
                    data: {
                        file: {
                            url: element.src
                        },
                        caption: element.alt || '',
                        withBorder: false,
                        stretched: false,
                        withBackground: false
                    }
                });
            } else {
                // Fallback to paragraph for other elements
                const text = element.textContent.trim();
                if (text) {
                    blocks.push({
                        type: 'paragraph',
                        data: {
                            text: text
                        }
                    });
                }
            }
        }

        return {
            time: Date.now(),
            blocks: blocks,
            version: "2.28.2"
        };
    }

    // Parse existing content or use empty data
    let initialData = {};
    @if(old('content'))
        try {
            initialData = JSON.parse(@json(old('content')));
        } catch(e) {
            initialData = {};
        }
    @elseif($page->content)
        try {
            initialData = JSON.parse(@json($page->content));
        } catch(e) {
            initialData = {};
        }
    @elseif($page->grapesjs_html)
        // Convert legacy HTML to Editor.js format
        initialData = convertHtmlToEditorJS(@json($page->grapesjs_html));
    @endif

    const editor = new EditorJS({
        holder: 'editorjs',
        tools: {
            header: {
                class: window.Header,
                inlineToolbar: true
            },
            list: {
                class: window.List,
                inlineToolbar: true
            },
            quote: {
                class: window.Quote,
                inlineToolbar: true
            },
            image: {
                class: window.ImageTool,
                config: {
                    endpoints: {
                        byFile: '/upload-image', // You can implement this endpoint
                        byUrl: '/fetch-image',   // You can implement this endpoint
                    }
                }
            }
            // paragraph tool removed (default is built-in)
        },
        data: initialData,
        minHeight: 200,
        placeholder: 'Start writing your page content...'
    });

    document.getElementById('page-edit-form').addEventListener('submit', function (e) {
        e.preventDefault();
        editor.save().then((outputData) => {
            document.getElementById('content').value = JSON.stringify(outputData);
            e.target.submit();
        }).catch((error) => {
            alert('Saving failed: ' + error);
        });
    });
</script>
@endsection