@extends('layouts.app')
@section('title', __('Edit template').' — '.$template->name)
@section('page-title', $template->name)
@section('page-subtitle', $template->key)

@push('head')
    {{-- Quill (WYSIWYG) --}}
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.snow.css">
    <style>
        .ql-editor { min-height: 320px; font-size: 14px; }
        .ql-toolbar.ql-snow, .ql-container.ql-snow { border-color: rgb(226 232 240); }
        .dark .ql-toolbar.ql-snow, .dark .ql-container.ql-snow { border-color: rgb(51 65 85); }
        .dark .ql-toolbar .ql-stroke { stroke: rgb(203 213 225); }
        .dark .ql-toolbar .ql-fill   { fill:   rgb(203 213 225); }
        .dark .ql-toolbar .ql-picker-label { color: rgb(203 213 225); }
        .dark .ql-editor { background: rgb(15 23 42); color: rgb(226 232 240); }
        .dark .ql-snow .ql-picker-options { background: rgb(15 23 42); color: rgb(226 232 240); }
        [dir="rtl"] .ql-editor { text-align: right; }
    </style>
@endpush

@section('content')
@include('super-admin._nav')

@php
    $localeNames = ['en' => 'English', 'fr' => 'Français', 'nl' => 'Nederlands', 'de' => 'Deutsch', 'ar' => 'العربية'];
@endphp

<div x-data="emailTemplateEditor({
        locales: @js($locales),
        localeNames: @js($localeNames),
        rtlLocales: ['ar'],
        initialSubject: @js((object) ($template->subject ?? [])),
        initialBody:    @js((object) ($template->body ?? [])),
        urls: {
            translate: '{{ route('super-admin.email-templates.translate', $template) }}',
            preview:   '{{ route('super-admin.email-templates.preview', $template) }}',
        },
        csrf: '{{ csrf_token() }}',
     })"
     x-init="boot()"
     class="space-y-6">

    <div class="flex flex-wrap items-center gap-3">
        <a href="{{ route('super-admin.email-templates.index') }}" class="text-sm text-brand-600 hover:underline inline-flex items-center gap-1">
            <x-icon name="arrow-right" class="w-4 h-4 rotate-180 rtl:rotate-0"/> {{ __('Back to templates') }}
        </a>
        <button type="button" @click="openPreview()" class="ms-auto btn-secondary">
            <x-icon name="mail" class="w-4 h-4"/> {{ __('Preview') }}
        </button>
    </div>

    <form method="POST" action="{{ route('super-admin.email-templates.update', $template) }}" class="space-y-6"
          @submit="syncEditorsToInputs()">
        @csrf @method('PATCH')

        {{-- Locale tabs --}}
        <div class="card overflow-hidden">
            <div class="flex border-b border-slate-200/70 dark:border-slate-800 overflow-x-auto">
                @foreach($locales as $loc)
                    <button type="button" @click="tab='{{ $loc }}'"
                            :class="tab==='{{ $loc }}' ? 'text-brand-700 border-brand-500' : 'text-slate-500 border-transparent hover:text-slate-700 dark:hover:text-slate-200'"
                            class="px-5 py-3 text-sm font-semibold uppercase tracking-wider border-b-2 transition whitespace-nowrap">
                        {{ $loc }}
                        <span class="ms-1.5 inline-block w-1.5 h-1.5 rounded-full"
                              :class="isFilled('{{ $loc }}') ? 'bg-emerald-500' : 'bg-slate-300'"></span>
                    </button>
                @endforeach
                <label class="ms-auto flex items-center gap-2 px-5 text-sm shrink-0">
                    <input type="hidden" name="is_active" value="0">
                    <input type="checkbox" name="is_active" value="1" class="w-4 h-4 accent-brand-600"
                           @checked(old('is_active', $template->is_active))>
                    {{ __('Active') }}
                </label>
            </div>

            @foreach($locales as $loc)
                <div x-show="tab==='{{ $loc }}'" x-cloak class="p-6 space-y-4"
                     dir="{{ in_array($loc, ['ar']) ? 'rtl' : 'ltr' }}">

                    {{-- Translate-from picker --}}
                    <div class="flex flex-wrap items-center gap-2 -mt-1 mb-1">
                        <span class="text-xs uppercase tracking-wider text-slate-500">{{ __('AI translate') }}:</span>
                        @foreach($locales as $src)
                            @if($src !== $loc)
                                <button type="button"
                                        @click="translateFrom('{{ $src }}', '{{ $loc }}')"
                                        :disabled="translating==='{{ $loc }}' || !hasContent('{{ $src }}')"
                                        :class="(translating==='{{ $loc }}' || !hasContent('{{ $src }}')) ? 'opacity-50 cursor-not-allowed' : 'hover:bg-brand-50 dark:hover:bg-brand-900/30 hover:border-brand-300'"
                                        class="text-xs px-2 py-1 rounded-md border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 inline-flex items-center gap-1.5 transition">
                                    <x-icon name="globe" class="w-3.5 h-3.5"/>
                                    <span>{{ __('From') }} {{ strtoupper($src) }}</span>
                                </button>
                            @endif
                        @endforeach
                        <span x-show="translating==='{{ $loc }}'" class="text-xs text-brand-600 inline-flex items-center gap-1.5">
                            <svg class="animate-spin w-3.5 h-3.5" viewBox="0 0 24 24" fill="none">
                                <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" class="opacity-25"></circle>
                                <path d="M4 12a8 8 0 018-8" stroke="currentColor" stroke-width="4" class="opacity-75"></path>
                            </svg>
                            {{ __('Translating…') }}
                        </span>
                    </div>

                    <div>
                        <label class="form-label">{{ __('Subject') }} ({{ strtoupper($loc) }})</label>
                        <input type="text"
                               name="subject_{{ $loc }}"
                               class="form-input"
                               x-model="subjects['{{ $loc }}']"
                               value="{{ old("subject_$loc", ($template->subject ?? [])[$loc] ?? '') }}">
                    </div>

                    <div>
                        <label class="form-label">{{ __('Body (HTML)') }} ({{ strtoupper($loc) }})</label>
                        {{-- Quill mounts here --}}
                        <div class="email-quill rounded-lg overflow-hidden"
                             data-locale="{{ $loc }}"
                             dir="{{ in_array($loc, ['ar']) ? 'rtl' : 'ltr' }}"></div>
                        {{-- Hidden field that gets synced from Quill on input + submit --}}
                        <textarea name="body_{{ $loc }}"
                                  class="hidden"
                                  data-body-input="{{ $loc }}">{{ old("body_$loc", ($template->body ?? [])[$loc] ?? '') }}</textarea>
                    </div>
                </div>
            @endforeach
        </div>

        {{-- Errors --}}
        @if($errors->any())
            <div class="card card-pad border-rose-200 bg-rose-50 dark:bg-rose-900/20 text-rose-700 dark:text-rose-300">
                <ul class="text-sm space-y-1">
                    @foreach($errors->all() as $err)<li>• {{ $err }}</li>@endforeach
                </ul>
            </div>
        @endif

        {{-- Translate / preview status messages --}}
        <div x-show="flash" x-cloak x-transition
             class="card card-pad border-emerald-200 bg-emerald-50 dark:bg-emerald-900/20 text-emerald-700 dark:text-emerald-300 text-sm"
             x-text="flash"></div>
        <div x-show="error" x-cloak x-transition
             class="card card-pad border-rose-200 bg-rose-50 dark:bg-rose-900/20 text-rose-700 dark:text-rose-300 text-sm"
             x-text="error"></div>

        <div class="flex justify-end">
            <button class="btn-primary"><x-icon name="check" class="w-4 h-4"/> {{ __('Save') }}</button>
        </div>
    </form>

    {{-- Variables --}}
    <section class="card card-pad">
        <h2 class="text-base font-semibold mb-3">{{ __('Available variables') }}</h2>
        <p class="text-sm text-slate-500 mb-3">{{ __('Use these placeholders in subject and body — they will be replaced when the email is sent.') }}</p>
        <div class="flex flex-wrap gap-2">
            @foreach(($template->variables ?? []) as $v)
                @php $tag = '{{ '.$v.' }}'; @endphp
                <code class="px-2.5 py-1 rounded-md bg-slate-100 dark:bg-slate-800 text-sm font-mono text-brand-700 dark:text-brand-300">{{ $tag }}</code>
            @endforeach
            @if(empty($template->variables))
                <span class="text-sm text-slate-500">{{ __('No variables declared.') }}</span>
            @endif
        </div>
    </section>

    {{-- Send test --}}
    <form method="POST" action="{{ route('super-admin.email-templates.test', $template) }}"
          class="card card-pad flex flex-col sm:flex-row items-end gap-3">
        @csrf
        <div class="flex-1 w-full">
            <label class="form-label">{{ __('Send test to') }}</label>
            <input type="email" name="to" required class="form-input" placeholder="you@example.com">
            @error('to')<p class="form-error">{{ $message }}</p>@enderror
        </div>
        <div class="w-full sm:w-40">
            <label class="form-label">{{ __('Locale') }}</label>
            <select name="locale" class="form-select">
                @foreach($locales as $loc)
                    <option value="{{ $loc }}">{{ strtoupper($loc) }}</option>
                @endforeach
            </select>
        </div>
        <button class="btn-secondary"><x-icon name="mail" class="w-4 h-4"/> {{ __('Send test email') }}</button>
    </form>

    {{-- Preview modal --}}
    <div x-show="previewOpen" x-cloak x-transition.opacity
         class="fixed inset-0 z-50 bg-slate-900/70 backdrop-blur-sm flex items-center justify-center p-4"
         @keydown.escape.window="previewOpen = false">
        <div class="bg-white dark:bg-slate-900 rounded-2xl shadow-2xl w-full max-w-3xl max-h-[90vh] flex flex-col"
             @click.outside="previewOpen = false">
            <div class="flex items-center gap-3 px-6 py-4 border-b border-slate-200 dark:border-slate-800">
                <h3 class="font-semibold">{{ __('Email preview') }}</h3>
                <select x-model="previewLocale" @change="loadPreview()"
                        class="form-select py-1 text-sm w-auto ms-2">
                    @foreach($locales as $loc)
                        <option value="{{ $loc }}">{{ strtoupper($loc) }} — {{ $localeNames[$loc] ?? $loc }}</option>
                    @endforeach
                </select>
                <button type="button" @click="previewOpen = false" class="ms-auto text-slate-400 hover:text-slate-700 dark:hover:text-slate-200">
                    <span class="text-2xl leading-none">&times;</span>
                </button>
            </div>

            <div class="flex-1 overflow-y-auto" :dir="rtlLocales.includes(previewLocale) ? 'rtl' : 'ltr'">
                <template x-if="previewLoading">
                    <div class="p-12 text-center text-slate-500">{{ __('Loading…') }}</div>
                </template>
                <template x-if="!previewLoading">
                    <div>
                        <div class="px-6 py-3 bg-slate-50 dark:bg-slate-800/60 border-b border-slate-200 dark:border-slate-800 text-sm">
                            <span class="text-slate-500">{{ __('Subject') }}:</span>
                            <span class="font-medium ms-2" x-text="previewSubject"></span>
                        </div>
                        <iframe x-ref="previewFrame" class="w-full" style="height:60vh;border:0;background:white"></iframe>
                    </div>
                </template>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.js"></script>
<script>
    function emailTemplateEditor(cfg) {
        return {
            locales: cfg.locales,
            localeNames: cfg.localeNames,
            rtlLocales: cfg.rtlLocales,
            tab: cfg.locales[0],
            subjects: {},
            bodies: {},
            quills: {},
            translating: null,
            flash: '',
            error: '',
            previewOpen: false,
            previewLocale: cfg.locales[0],
            previewSubject: '',
            previewLoading: false,

            boot() {
                // Seed reactive copies of the initial subject/body maps
                this.subjects = {};
                this.bodies = {};
                this.locales.forEach(l => {
                    this.subjects[l] = (cfg.initialSubject && cfg.initialSubject[l]) || '';
                    this.bodies[l]   = (cfg.initialBody   && cfg.initialBody[l])   || '';
                });

                // Mount one Quill instance per locale
                this.$nextTick(() => {
                    document.querySelectorAll('.email-quill[data-locale]').forEach(el => {
                        const loc = el.dataset.locale;
                        const ta  = document.querySelector('[data-body-input="' + loc + '"]');
                        const q = new Quill(el, {
                            theme: 'snow',
                            modules: {
                                toolbar: [
                                    [{ header: [1, 2, 3, false] }],
                                    ['bold', 'italic', 'underline', 'strike'],
                                    [{ color: [] }, { background: [] }],
                                    [{ list: 'ordered' }, { list: 'bullet' }],
                                    [{ align: [] }],
                                    ['link', 'blockquote', 'code-block'],
                                    ['clean'],
                                ],
                            },
                        });
                        // Initial content from textarea/old() value
                        if (ta && ta.value) {
                            q.clipboard.dangerouslyPasteHTML(ta.value);
                        }
                        // Sync Quill -> hidden textarea + reactive state
                        q.on('text-change', () => {
                            const html = q.root.innerHTML;
                            if (ta) ta.value = html;
                            this.bodies[loc] = html;
                        });
                        this.quills[loc] = q;
                    });
                });
            },

            // Final pre-submit sync (covers any race)
            syncEditorsToInputs() {
                Object.entries(this.quills).forEach(([loc, q]) => {
                    const ta = document.querySelector('[data-body-input="' + loc + '"]');
                    if (ta) ta.value = q.root.innerHTML;
                });
            },

            isFilled(loc) {
                return !!(this.subjects[loc] && this.subjects[loc].trim())
                    && !!(this.bodies[loc] && this.bodies[loc].replace(/<[^>]+>/g, '').trim());
            },

            hasContent(loc) {
                return !!(this.subjects[loc] && this.subjects[loc].trim())
                    || !!(this.bodies[loc] && this.bodies[loc].replace(/<[^>]+>/g, '').trim());
            },

            async translateFrom(from, to) {
                this.error = '';
                this.flash = '';
                if (!this.hasContent(from)) {
                    this.error = 'Source ' + from.toUpperCase() + ' is empty.';
                    return;
                }
                if (this.bodies[to] && this.bodies[to].replace(/<[^>]+>/g, '').trim()) {
                    if (!confirm('Replace existing ' + to.toUpperCase() + ' content?')) return;
                }
                this.translating = to;
                try {
                    const res = await fetch(cfg.urls.translate, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'Accept': 'application/json',
                            'X-CSRF-TOKEN': cfg.csrf,
                        },
                        body: JSON.stringify({
                            from, to,
                            subject: this.subjects[from] || '',
                            body:    this.bodies[from]   || '',
                        }),
                    });
                    const data = await res.json();
                    if (!res.ok) throw new Error(data.error || 'Translation failed');
                    // Apply
                    if (typeof data.subject === 'string') this.subjects[to] = data.subject;
                    if (typeof data.body === 'string') {
                        this.bodies[to] = data.body;
                        if (this.quills[to]) this.quills[to].clipboard.dangerouslyPasteHTML(data.body);
                        const ta = document.querySelector('[data-body-input="' + to + '"]');
                        if (ta) ta.value = data.body;
                    }
                    this.flash = 'Translated ' + from.toUpperCase() + ' → ' + to.toUpperCase() + '. Review and save.';
                } catch (e) {
                    this.error = e.message || String(e);
                } finally {
                    this.translating = null;
                }
            },

            async openPreview() {
                this.previewOpen = true;
                this.previewLocale = this.tab;
                await this.loadPreview();
            },

            async loadPreview() {
                this.previewLoading = true;
                this.previewSubject = '';
                try {
                    this.syncEditorsToInputs();
                    const fd = new FormData();
                    fd.append('_token', cfg.csrf);
                    fd.append('locale', this.previewLocale);
                    fd.append('subject', this.subjects[this.previewLocale] || '');
                    fd.append('body',    this.bodies[this.previewLocale]   || '');
                    const res = await fetch(cfg.urls.preview, {
                        method: 'POST',
                        body: fd,
                        headers: { 'Accept': 'application/json' },
                    });
                    const data = await res.json();
                    if (!res.ok) throw new Error(data.error || 'Preview failed');
                    this.previewSubject = data.subject || '';
                    this.$nextTick(() => {
                        const frame = this.$refs.previewFrame;
                        if (!frame) return;
                        const doc = frame.contentDocument || frame.contentWindow.document;
                        const dir = this.rtlLocales.includes(this.previewLocale) ? 'rtl' : 'ltr';
                        doc.open();
                        doc.write(
                            '<!doctype html><html dir="' + dir + '"><head><meta charset="utf-8">' +
                            '<style>body{font-family:system-ui,Segoe UI,Inter,sans-serif;padding:24px;color:#0f172a;background:#fff;line-height:1.55}img{max-width:100%}</style>' +
                            '</head><body>' + (data.body || '') + '</body></html>'
                        );
                        doc.close();
                    });
                } catch (e) {
                    this.previewSubject = '';
                    const frame = this.$refs.previewFrame;
                    if (frame) {
                        const doc = frame.contentDocument || frame.contentWindow.document;
                        doc.open();
                        doc.write('<pre style="color:#b91c1c;padding:16px">' + (e.message || String(e)) + '</pre>');
                        doc.close();
                    }
                } finally {
                    this.previewLoading = false;
                }
            },
        };
    }

    // Expose for x-data="emailTemplateEditor(...)"
    window.emailTemplateEditor = emailTemplateEditor;
</script>
@endpush

@endsection