@extends('layouts.app')

@section('content')
    <div class="mb-6">
        <a href="{{ route('dashboard.index') }}" class="text-brand hover:text-brand-hover">&larr; Back to Dashboard</a>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
        <!-- Left Column: Form & Editor -->
        <div class="bg-white shadow sm:rounded-lg">
            <div class="px-4 py-5 sm:p-6">
                <h3 class="text-lg leading-6 font-medium text-gray-900 mb-4">Create New Email Campaign</h3>

                <form action="{{ route('dashboard.store') }}" method="POST" id="campaignForm">
                    @csrf

                    <div class="mb-4">
                        <label for="subject" class="block text-sm font-medium text-gray-700">Email Subject</label>
                        <input type="text" name="subject" id="subject"
                            class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-brand focus:border-brand sm:text-sm"
                            required>
                        @error('subject') <span class="text-red-500 text-xs">{{ $message }}</span> @enderror
                    </div>

                    <div class="mb-4">
                        <label for="editor" class="block text-sm font-medium text-gray-700 mb-2">Email Body</label>
                        <textarea id="editor" name="body_html" class="w-full"></textarea>
                        <p id="body_error" class="text-red-500 text-xs hidden mt-1">Email body cannot be empty.</p>
                        @error('body_html') <span class="text-red-500 text-xs">{{ $message }}</span> @enderror
                    </div>

                    <div class="mb-6 bg-gray-50 p-4 rounded-lg border border-gray-200">
                        <h4 class="text-sm font-bold text-gray-800 mb-3">Email Styling</h4>

                        <div class="mb-4">
                            <label for="bg_color" class="block text-xs font-medium text-gray-700">Global Background
                                Color</label>
                            <div class="flex items-center mt-1">
                                <input type="color" name="bg_color" id="bg_color" value="#ffffff"
                                    class="h-8 w-14 border border-gray-300 rounded cursor-pointer">
                                <span class="ml-2 text-xs text-gray-500">Pick a background color for the entire email
                                    canvas.</span>
                            </div>
                        </div>
                    </div>

                    <div class="mb-6">
                        <label class="block text-sm font-medium text-gray-700 mb-2">Select Campaign Groups</label>
                        <div class="max-h-48 overflow-y-auto border border-gray-300 rounded-md p-3 bg-gray-50">
                            @forelse ($groups as $group)
                                <div class="flex items-center mb-2">
                                    <input id="group_{{ $group->id }}" name="groups[]" value="{{ $group->id }}" type="checkbox"
                                        class="h-4 w-4 text-brand focus:ring-brand border-gray-300 rounded">
                                    <label for="group_{{ $group->id }}" class="ml-2 block text-sm text-gray-900">
                                        {{ $group->name }} <span
                                            class="text-xs text-gray-500">({{ $group->contacts()->count() }} contacts)</span>
                                    </label>
                                </div>
                            @empty
                                <div class="text-sm text-gray-500">No groups available. <a href="{{ route('contacts.index') }}"
                                        class="text-brand hover:underline">Add contacts
                                        first</a>.</div>
                            @endforelse
                        </div>
                        @error('groups') <span class="text-red-500 text-xs">{{ $message }}</span> @enderror
                    </div>

                    <div class="flex justify-end">
                        <button type="submit" id="btnSubmit"
                            class="bg-brand hover:bg-brand-hover text-white font-bold py-2 px-4 rounded shadow">
                            Blast Email
                        </button>
                    </div>
                </form>
            </div>
        </div>

        <!-- Right Column: Realtime Preview -->
        <div>
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-lg font-medium text-gray-900">Live Preview</h3>
                <div class="bg-gray-200 p-1 rounded-lg flex space-x-1">
                    <button type="button" id="btnDesktop"
                        class="bg-white text-gray-800 text-xs px-3 py-1 rounded shadow-sm font-medium">Desktop</button>
                    <button type="button" id="btnMobile"
                        class="text-gray-500 hover:text-gray-800 text-xs px-3 py-1 rounded font-medium">Mobile</button>
                </div>
            </div>

            <div class="bg-gray-200 rounded-lg p-4 flex justify-center h-full min-h-[500px]">
                <!-- Email Mockup Container -->
                <div id="previewContainer"
                    class="bg-white rounded-md shadow-md w-full overflow-hidden flex flex-col transition-all duration-300">
                    <!-- Gmail-like Header -->
                    <div class="border-b border-gray-200 px-6 py-4">
                        <h2 id="previewSubject" class="text-xl text-gray-800 font-normal truncate">(No Subject)</h2>
                        <div class="flex items-center mt-3 text-sm text-gray-600">
                            <div
                                class="w-8 h-8 rounded-full bg-brand text-white flex items-center justify-center font-bold mr-3">
                                M</div>
                            <div>
                                <p class="font-bold text-gray-800">Marketing Team <span
                                        class="text-xs font-normal text-gray-500">&lt;noreply@scuto.id&gt;</span></p>
                                <p class="text-xs text-gray-500">to Recipients</p>
                            </div>
                        </div>
                    </div>
                    <!-- Email Content -->
                    <div class="px-0 py-0 flex-grow bg-gray-100 relative rounded-b-lg overflow-hidden border-t border-gray-200">
                        <iframe id="previewIframe" class="w-full border-none absolute inset-0 h-full" style="min-height: 500px;" srcdoc=""></iframe>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @push('scripts')
        <script>
            const emailTemplate = {!! json_encode(view('emails.template', ['body_html' => '[[BODY_PLACEHOLDER]]', 'bg_color' => '[[BG_COLOR_PLACEHOLDER]]'])->render()) !!};
        </script>
        <script>
            document.addEventListener('DOMContentLoaded', function () {
                // Elements
                const subjectInput = document.getElementById('subject');
                const previewSubject = document.getElementById('previewSubject');
                const btnDesktop = document.getElementById('btnDesktop');
                const btnMobile = document.getElementById('btnMobile');
                const previewContainer = document.getElementById('previewContainer');
                const form = document.getElementById('campaignForm');
                const bodyError = document.getElementById('body_error');
                const previewIframe = document.getElementById('previewIframe');
                const bgColorInput = document.getElementById('bg_color');

                // Sync Subject
                subjectInput.addEventListener('input', function () {
                    previewSubject.textContent = this.value || '(No Subject)';
                });

                // Toggle Preview
                btnDesktop.addEventListener('click', () => {
                    previewContainer.classList.remove('max-w-[375px]');
                    previewContainer.classList.add('w-full');
                    btnDesktop.classList.add('bg-white', 'shadow-sm', 'text-gray-800');
                    btnDesktop.classList.remove('text-gray-500');
                    btnMobile.classList.remove('bg-white', 'shadow-sm', 'text-gray-800');
                    btnMobile.classList.add('text-gray-500');
                });

                btnMobile.addEventListener('click', () => {
                    previewContainer.classList.remove('w-full');
                    previewContainer.classList.add('max-w-[375px]');
                    btnMobile.classList.add('bg-white', 'shadow-sm', 'text-gray-800');
                    btnMobile.classList.remove('text-gray-500');
                    btnDesktop.classList.remove('bg-white', 'shadow-sm', 'text-gray-800');
                    btnDesktop.classList.add('text-gray-500');
                });

                // Form Submit Validation
                form.addEventListener('submit', function (e) {
                    const content = tinymce.get('editor').getContent();
                    if (content.trim() === '') {
                        e.preventDefault();
                        bodyError.classList.remove('hidden');
                    } else {
                        bodyError.classList.add('hidden');
                    }
                });
            });
        </script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/3.0.5/purify.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/6.8.3/tinymce.min.js"></script>
        <script>
            tinymce.init({
                selector: '#editor',
                plugins: 'image link media table lists code help wordcount preview',
                toolbar: 'undo redo | blocks | bold italic forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | cta_button section_box | removeformat | help',
                menubar: false,
                toolbar_mode: 'wrap',
                height: 500,
                content_style: "@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300..900;1,300..900&display=swap'); body { font-family:'Montserrat',Helvetica,Arial,sans-serif; font-size:16px; color:#374151; }",
                relative_urls: false,
                remove_script_host: false,
                convert_urls: true,

                // Real-time preview update
                setup: function (editor) {
                    const updatePreview = function () {
                        const content = editor.getContent();
                        const cleanContent = window.DOMPurify ? DOMPurify.sanitize(content, { ADD_ATTR: ['target', 'style', 'bgcolor', 'border', 'cellspacing', 'cellpadding', 'width', 'align', 'valign'], ADD_TAGS: ['table', 'tr', 'td', 'tbody'] }) : content;
                        const bgColor = document.getElementById('bg_color').value || '#f4f4f5';
                        
                        let template = emailTemplate.replace('[[BODY_PLACEHOLDER]]', cleanContent || '<p style="color: #9ca3af; font-style: italic; text-align: center; margin-top: 2rem;">Email content will appear here...</p>');
                        template = template.replace(/\[\[BG_COLOR_PLACEHOLDER\]\]/g, bgColor);
                        
                        document.getElementById('previewIframe').srcdoc = template;
                    };

                    editor.on('init', updatePreview);
                    editor.on('input change undo redo', updatePreview);
                    document.getElementById('bg_color').addEventListener('input', updatePreview);

                    // Custom CTA Button Plugin
                    editor.ui.registry.addButton('cta_button', {
                        text: '📢 Insert CTA',
                        tooltip: 'Insert a Call-to-Action Button',
                        onAction: function () {
                            editor.windowManager.open({
                                title: 'Insert CTA Button',
                                body: {
                                    type: 'panel',
                                    items: [
                                        { type: 'input', name: 'text', label: 'Button Text', placeholder: 'e.g. Click Here' },
                                        { type: 'input', name: 'url', label: 'Button Link', placeholder: 'https://...' },
                                        { type: 'selectbox', name: 'align', label: 'Button Alignment', items: [ {text: 'Center', value: 'center'}, {text: 'Left', value: 'left'}, {text: 'Right', value: 'right'} ] },
                                        { type: 'colorinput', name: 'bg_color', label: 'Background Color' },
                                        { type: 'colorinput', name: 'text_color', label: 'Text Color' }
                                    ]
                                },
                                initialData: {
                                    text: 'Click Here',
                                    align: 'center',
                                    bg_color: '#ff5900',
                                    text_color: '#ffffff'
                                },
                                buttons: [
                                    { type: 'cancel', text: 'Cancel' },
                                    { type: 'submit', text: 'Insert', primary: true }
                                ],
                                onSubmit: function (api) {
                                    const data = api.getData();
                                    const btnText = data.text || 'Click Here';
                                    const btnUrl = data.url || '#';
                                    const btnAlign = data.align || 'center';
                                    const btnBg = data.bg_color || '#000000';
                                    const btnTextCol = data.text_color || '#ffffff';

                                    // Button HTML (Outer table width=100% to easily control alignment via td)
                                    const buttonHtml = `
                                        <table width="100%" border="0" cellspacing="0" cellpadding="0" style="margin: 1.5em 0;">
                                            <tr>
                                            <td align="${btnAlign}">
                                                <table border="0" cellspacing="0" cellpadding="0">
                                                <tr>
                                                    <td align="center" style="border-radius: 4px;" bgcolor="${btnBg}">
                                                    <a href="${btnUrl}" target="_blank" style="font-size: 16px; font-family: 'Montserrat', Helvetica, Arial, sans-serif; color: ${btnTextCol}; text-decoration: none; border-radius: 4px; padding: 12px 24px; border: 1px solid ${btnBg}; display: inline-block; font-weight: bold;">${btnText}</a>
                                                    </td>
                                                </tr>
                                                </table>
                                            </td>
                                            </tr>
                                        </table><p><br></p>`;

                                    editor.insertContent(buttonHtml);
                                    api.close();
                                }
                            });
                        }
                    });

                    // Custom Section Box Plugin
                    editor.ui.registry.addButton('section_box', {
                        text: '🔲 Insert Box',
                        tooltip: 'Insert a colored background box/section',
                        onAction: function () {
                            editor.windowManager.open({
                                title: 'Insert Background Box',
                                body: {
                                    type: 'panel',
                                    items: [
                                        { type: 'selectbox', name: 'align', label: 'Text Alignment', items: [ {text: 'Left', value: 'left'}, {text: 'Center', value: 'center'}, {text: 'Right', value: 'right'}, {text: 'Justify', value: 'justify'} ] },
                                        { type: 'colorinput', name: 'bg_color', label: 'Background Color' },
                                        { type: 'colorinput', name: 'text_color', label: 'Text Color' }
                                    ]
                                },
                                initialData: {
                                    align: 'left',
                                    bg_color: '#f4f4f5',
                                    text_color: '#000000'
                                },
                                buttons: [
                                    { type: 'cancel', text: 'Cancel' },
                                    { type: 'submit', text: 'Insert Box', primary: true }
                                ],
                                onSubmit: function (api) {
                                    const data = api.getData();
                                    const textAlign = data.align || 'left';
                                    const bgCol = data.bg_color || '#f4f4f5';
                                    const textCol = data.text_color || '#000000';

                                    const boxHtml = `
                                        <table width="100%" border="0" cellspacing="0" cellpadding="10" style="margin: 1.5em 0;">
                                            <tr>
                                            <td align="${textAlign}" bgcolor="${bgCol}" style="border-radius: 8px; color: ${textCol}; text-align: ${textAlign};">
                                                <p><em>Ketik isi section Anda di sini...</em></p>
                                            </td>
                                            </tr>
                                        </table><p><br></p>`;

                                    editor.insertContent(boxHtml);
                                    api.close();
                                }
                            });
                        }
                    });
                },

                // Image Upload Handler
                images_upload_url: '{{ route('upload.image') }}',
                images_upload_credentials: true,
                automatic_uploads: true,
                images_upload_handler: function (blobInfo, progress) {
                    return new Promise((resolve, reject) => {
                        const xhr = new XMLHttpRequest();
                        xhr.withCredentials = false;
                        xhr.open('POST', '{{ route('upload.image') }}');
                        xhr.setRequestHeader('X-CSRF-TOKEN', '{{ csrf_token() }}');

                        xhr.upload.onprogress = (e) => {
                            progress(e.loaded / e.total * 100);
                        };

                        xhr.onload = () => {
                            if (xhr.status === 403) {
                                reject({ message: 'HTTP Error: ' + xhr.status, remove: true });
                                return;
                            }

                            if (xhr.status < 200 || xhr.status >= 300) {
                                reject('HTTP Error: ' + xhr.status);
                                return;
                            }

                            const json = JSON.parse(xhr.responseText);

                            if (!json || typeof json.location != 'string') {
                                reject('Invalid JSON: ' + xhr.responseText);
                                return;
                            }

                            resolve(json.location);
                        };

                        xhr.onerror = () => {
                            reject('Image upload failed due to a XHR Transport error. Code: ' + xhr.status);
                        };

                        const formData = new FormData();
                        formData.append('file', blobInfo.blob(), blobInfo.filename());

                        xhr.send(formData);
                    });
                }
            });
        </script>
    @endpush
@endsection