@extends('backend.layouts.app')

@section('title', $rule ? 'Edit Theme Rule' : 'Create Theme Rule')

@push('styles')
    <style>
        #editor-modal { display: none; position: fixed; inset: 0; z-index: 9999999; background: rgba(0,0,0,0.5); backdrop-filter: blur(4px); }
        #editor-modal.open { display: flex !important; align-items: center; justify-content: center; }
        #editor-modal .modal-inner { width: 90vw; height: 85vh; background: #1e1e1e; border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 25px 60px rgba(0,0,0,0.5); }
        #editor-modal .modal-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; background: #252526; border-bottom: 1px solid #3c3c3c; }
        #editor-modal .modal-toolbar span { color: #ccc; font-size: 13px; font-weight: 600; }
        #editor-modal .modal-body { flex: 1; overflow: hidden; }
        #editor-trigger { cursor: pointer; min-height: 120px; border: 2px dashed #d1d5db; border-radius: 10px; display: flex; align-items: center; justify-content: center; transition: all .2s; }
        #editor-trigger:hover { border-color: #3b82f6; background: #f0f7ff; }
        #editor-trigger.has-content { border-style: solid; border-color: #d1d5db; background: #1e1e1e; min-height: 200px; }
        #editor-trigger .preview-code { width: 100%; height: 200px; overflow: auto; padding: 14px; font-family: 'Fira Code', 'Cascadia Code', monospace; font-size: 13px; line-height: 1.6; color: #d4d4d4; white-space: pre-wrap; word-break: break-all; }
        .param-row { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
        .param-row > * { flex: 1; }
        .param-row .remove-param { flex: 0 0 auto; }
    </style>
@endpush

@section('content')
    @php
        $pageTitle = $rule ? 'Edit Theme Rule' : 'Create Theme Rule';
        $indexRoute = 'theme-rule.index';
        $indexLabel = 'Theme Rules';
    @endphp
    @include('backend.layouts.partials._page_header')

    <form action="{{ $rule ? route('theme-rule.update', $rule->rule_id) : route('theme-rule.store') }}" method="POST">
        @csrf
        @if($rule) @method('PUT') @endif

        <div class="space-y-6">
            <div class="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
                <div class="px-5 py-4 sm:px-6 sm:py-5">
                    <h3 class="text-base font-medium text-gray-800 dark:text-white/90">Rule Information</h3>
                </div>
                <div class="border-t border-gray-100 p-5 sm:p-6 dark:border-gray-800">

                    <div class="mb-6">
                        <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">Name <span class="text-error-500">*</span></label>
                        <input type="text" name="rule_name" value="{{ old('rule_name', $rule->rule_name ?? '') }}" required maxlength="250"
                            class="dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 h-11 w-full rounded-lg border border-gray-300 bg-transparent px-4 py-2.5 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30">
                        @error('rule_name')
                            <p class="text-theme-xs text-error-500 mt-1.5">{{ $message }}</p>
                        @enderror
                    </div>

                    <div class="mb-6">
                        <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">Description</label>
                        <input type="text" name="rule_description" value="{{ old('rule_description', $rule->rule_description ?? '') }}" maxlength="500"
                            class="dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 h-11 w-full rounded-lg border border-gray-300 bg-transparent px-4 py-2.5 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30">
                        @error('rule_description')
                            <p class="text-theme-xs text-error-500 mt-1.5">{{ $message }}</p>
                        @enderror
                    </div>

                    <div class="mb-6">
                        <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">Status</label>
                        <label class="inline-flex items-center gap-2 cursor-pointer">
                            <input type="checkbox" name="rule_status" value="1" {{ old('rule_status', $rule->rule_status ?? true) ? 'checked' : '' }}
                                class="rounded border-gray-300 text-brand-500 focus:ring-brand-500">
                            <span class="text-sm text-gray-700 dark:text-gray-400">Active</span>
                        </label>
                    </div>

                    <div class="mb-6">
                        <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">CSS Template <span class="text-error-500">*</span></label>
                        <p class="mb-2 text-xs text-gray-500">Use <code>@{{param_name}}</code> as placeholders. These will be replaced with actual values from theme settings.</p>
                        <div id="editor-trigger" onclick="openEditor()">
                            <div class="text-center text-gray-400">
                                <svg width="32" height="32" fill="none" stroke="currentColor" viewBox="0 0 24 24" class="mx-auto mb-2"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"/></svg>
                                <p class="text-sm font-medium">Click to open code editor</p>
                            </div>
                        </div>
                        <textarea name="rule_content" id="rule_content" class="hidden">{{ old('rule_content', $rule->rule_content ?? '') }}</textarea>
                        @error('rule_content')
                            <p class="text-theme-xs text-error-500 mt-1.5">{{ $message }}</p>
                        @enderror
                    </div>

                    <div class="mb-6">
                        <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">Parameters</label>
                        <p class="mb-3 text-xs text-gray-500">Define the parameters used in your CSS template as <code>@{{param_name}}</code> placeholders.</p>

                        <div id="params-container">
                            @php
                                $existingParams = $rule ? ($rule->rule_params ?? []) : [];
                                $oldNames = old('param_name', []);
                                $oldDefaults = old('param_default', []);
                                $oldTypes = old('param_type', []);
                                $hasOld = !empty($oldNames);
                            @endphp

                            @if($hasOld)
                                @foreach($oldNames as $i => $name)
                                    <div class="param-row">
                                        <input type="text" name="param_name[]" value="{{ $name }}" placeholder="Parameter name"
                                            class="dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 h-10 w-full rounded-lg border border-gray-300 bg-transparent px-3 py-2 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90">
                                        <input type="text" name="param_default[]" value="{{ $oldDefaults[$i] ?? '' }}" placeholder="Default value"
                                            class="dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 h-10 w-full rounded-lg border border-gray-300 bg-transparent px-3 py-2 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90">
                                        <select name="param_type[]"
                                            class="dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 h-10 w-full rounded-lg border border-gray-300 bg-transparent px-3 py-2 text-sm text-gray-800 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90">
                                            <option value="text" {{ ($oldTypes[$i] ?? '') == 'text' ? 'selected' : '' }}>Text</option>
                                            <option value="colorpicker" {{ ($oldTypes[$i] ?? '') == 'colorpicker' ? 'selected' : '' }}>Color</option>
                                            <option value="unit" {{ ($oldTypes[$i] ?? '') == 'unit' ? 'selected' : '' }}>Unit (px/rem/%)</option>
                                        </select>
                                        <button type="button" class="remove-param inline-flex items-center justify-center rounded-lg bg-error-50 p-2 text-error-500 hover:bg-error-100 dark:bg-error-500/10 dark:text-error-400" title="Remove">
                                            <svg class="fill-current" width="16" height="16" viewBox="0 0 20 20"><path fill-rule="evenodd" clip-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"/></svg>
                                        </button>
                                    </div>
                                @endforeach
                            @elseif(count($existingParams) > 0)
                                @foreach($existingParams as $param)
                                    <div class="param-row">
                                        <input type="text" name="param_name[]" value="{{ $param['param_name'] ?? '' }}" placeholder="Parameter name"
                                            class="dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 h-10 w-full rounded-lg border border-gray-300 bg-transparent px-3 py-2 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90">
                                        <input type="text" name="param_default[]" value="{{ $param['param_default'] ?? '' }}" placeholder="Default value"
                                            class="dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 h-10 w-full rounded-lg border border-gray-300 bg-transparent px-3 py-2 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90">
                                        <select name="param_type[]"
                                            class="dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 h-10 w-full rounded-lg border border-gray-300 bg-transparent px-3 py-2 text-sm text-gray-800 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90">
                                            <option value="text" {{ ($param['param_type'] ?? '') == 'text' ? 'selected' : '' }}>Text</option>
                                            <option value="colorpicker" {{ ($param['param_type'] ?? '') == 'colorpicker' ? 'selected' : '' }}>Color</option>
                                            <option value="unit" {{ ($param['param_type'] ?? '') == 'unit' ? 'selected' : '' }}>Unit (px/rem/%)</option>
                                        </select>
                                        <button type="button" class="remove-param inline-flex items-center justify-center rounded-lg bg-error-50 p-2 text-error-500 hover:bg-error-100 dark:bg-error-500/10 dark:text-error-400" title="Remove">
                                            <svg class="fill-current" width="16" height="16" viewBox="0 0 20 20"><path fill-rule="evenodd" clip-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"/></svg>
                                        </button>
                                    </div>
                                @endforeach
                            @endif
                        </div>

                        <button type="button" id="add-param"
                            class="mt-3 inline-flex items-center gap-2 rounded-lg border border-dashed border-gray-300 px-4 py-2 text-sm text-gray-500 hover:border-gray-400 hover:text-gray-700 dark:border-gray-700 dark:text-gray-400 dark:hover:text-gray-300">
                            <svg class="fill-current" width="16" height="16" viewBox="0 0 20 20"><path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z"/></svg>
                            Add Parameter
                        </button>
                    </div>

                </div>
            </div>

            <div class="flex justify-end gap-3">
                <a href="{{ route('theme-rule.index') }}"
                    class="rounded-lg border border-gray-300 px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 dark:border-gray-700 dark:text-gray-300">Cancel</a>
                <button type="submit"
                    class="rounded-lg bg-brand-500 px-4 py-2 text-sm text-white hover:bg-brand-600">Save</button>
            </div>
        </div>
    </form>
@endsection

{{-- Editor Modal --}}
<div id="editor-modal" style="display:none">
    <div class="modal-inner">
        <div class="modal-toolbar">
            <span>Monaco Editor — CSS</span>
            <div style="display:flex;gap:8px;">
                <button type="button" onclick="formatCode()" style="padding:6px 12px;background:#3c3c3c;color:#ccc;border:none;border-radius:6px;font-size:12px;cursor:pointer;">Format</button>
                <button type="button" onclick="saveAndClose()" style="padding:6px 16px;background:#10b981;color:#fff;border:none;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;">Save</button>
                <button type="button" onclick="closeEditor()" style="padding:6px 16px;background:#6b7280;color:#fff;border:none;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;">Close</button>
            </div>
        </div>
        <div class="modal-body">
            <div id="modal-editor" style="width:100%;height:100%;"></div>
        </div>
    </div>
</div>

@push('scripts')
    <script src="{{ asset('vendor/monaco-editor/min/vs/loader.js') }}"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            var input = document.getElementById('rule_content');
            var trigger = document.getElementById('editor-trigger');
            var modalEditor = null;

            require.config({ paths: { vs: '/vendor/monaco-editor/min/vs' } });

            function updatePreview() {
                var val = input.value;
                if (val && val.trim()) {
                    trigger.classList.add('has-content');
                    trigger.innerHTML = '<div class="preview-code">' + escapeHtml(val.substring(0, 1500)) + (val.length > 1500 ? '\n...' : '') + '</div>';
                } else {
                    trigger.classList.remove('has-content');
                    trigger.innerHTML = '<div class="text-center text-gray-400"><svg width="32" height="32" fill="none" stroke="currentColor" viewBox="0 0 24 24" class="mx-auto mb-2"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"/></svg><p class="text-sm font-medium">Click to open code editor</p></div>';
                }
            }

            function escapeHtml(str) {
                return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
            }

            updatePreview();

            window.openEditor = function() {
                document.getElementById('editor-modal').classList.add('open');
                document.body.style.overflow = 'hidden';

                require(['vs/editor/editor.main'], function () {
                    if (!modalEditor) {
                        modalEditor = monaco.editor.create(document.getElementById('modal-editor'), {
                            value: input.value,
                            language: 'css',
                            theme: 'vs-dark',
                            automaticLayout: true,
                            fontSize: 13,
                            minimap: { enabled: false },
                            scrollBeyondLastLine: false,
                        });
                    } else {
                        modalEditor.setValue(input.value);
                    }
                    setTimeout(function() { modalEditor.focus(); }, 100);
                });
            };

            window.closeEditor = function() {
                if (modalEditor) {
                    input.value = modalEditor.getValue();
                }
                document.getElementById('editor-modal').classList.remove('open');
                document.body.style.overflow = '';
                updatePreview();
            };

            window.formatCode = function() {
                if (modalEditor) {
                    modalEditor.getAction('editor.action.formatDocument').run();
                }
            };

            window.saveAndClose = function() {
                if (modalEditor) {
                    input.value = modalEditor.getValue();
                }

                var form = document.querySelector('form');
                var formData = new FormData(form);
                formData.set('rule_content', input.value);

                fetch(form.action, {
                    method: 'POST',
                    body: formData,
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                        'Accept': 'application/json',
                    },
                })
                .then(function(res) { return res.json(); })
                .then(function(data) {
                    showToast(data.message || 'Rule saved successfully!');
                })
                .catch(function() {
                    showToast('Failed to save. Please try again.', true);
                });
            };

            function showToast(message, isError) {
                var existing = document.getElementById('editor-toast');
                if (existing) existing.remove();

                var toast = document.createElement('div');
                toast.id = 'editor-toast';
                toast.style.cssText = 'position:fixed;top:20px;right:20px;z-index:99999999;padding:12px 20px;border-radius:8px;font-size:13px;font-weight:600;color:#fff;box-shadow:0 4px 12px rgba(0,0,0,0.3);animation:slideIn .3s ease;transition:opacity .3s;';
                toast.style.background = isError ? '#ef4444' : '#10b981';
                toast.textContent = message;
                document.body.appendChild(toast);

                setTimeout(function() {
                    toast.style.opacity = '0';
                    setTimeout(function() { toast.remove(); }, 300);
                }, 2500);
            }

            document.addEventListener('keydown', function(e) {
                if (e.key === 'Escape' && document.getElementById('editor-modal').classList.contains('open')) {
                    closeEditor();
                }
                if ((e.ctrlKey || e.metaKey) && e.key === 's' && document.getElementById('editor-modal').classList.contains('open')) {
                    e.preventDefault();
                    saveAndClose();
                }
            });

            document.getElementById('editor-modal').addEventListener('click', function(e) {
                if (e.target === this) {
                    closeEditor();
                }
            });

            document.querySelector('form').addEventListener('submit', function () {
                if (modalEditor) {
                    input.value = modalEditor.getValue();
                }
            });

            document.getElementById('add-param').addEventListener('click', function () {
                var container = document.getElementById('params-container');
                var row = document.createElement('div');
                row.className = 'param-row';
                row.innerHTML = `
                    <input type="text" name="param_name[]" value="" placeholder="Parameter name"
                        class="dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 h-10 w-full rounded-lg border border-gray-300 bg-transparent px-3 py-2 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90">
                    <input type="text" name="param_default[]" value="" placeholder="Default value"
                        class="dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 h-10 w-full rounded-lg border border-gray-300 bg-transparent px-3 py-2 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90">
                    <select name="param_type[]"
                        class="dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 h-10 w-full rounded-lg border border-gray-300 bg-transparent px-3 py-2 text-sm text-gray-800 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90">
                        <option value="text">Text</option>
                        <option value="colorpicker">Color</option>
                        <option value="unit">Unit (px/rem/%)</option>
                    </select>
                    <button type="button" class="remove-param inline-flex items-center justify-center rounded-lg bg-error-50 p-2 text-error-500 hover:bg-error-100 dark:bg-error-500/10 dark:text-error-400" title="Remove">
                        <svg class="fill-current" width="16" height="16" viewBox="0 0 20 20"><path fill-rule="evenodd" clip-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"/></svg>
                    </button>
                `;
                container.appendChild(row);
                attachRemoveHandler(row.querySelector('.remove-param'));
            });

            function attachRemoveHandler(btn) {
                btn.addEventListener('click', function () {
                    this.closest('.param-row').remove();
                });
            }

            document.querySelectorAll('.remove-param').forEach(attachRemoveHandler);
        });
    </script>
@endpush