@php
    /** @var \App\Models\DocumentBrandingVersion|null $active */
    /** @var \App\Models\DocumentBrandingVersion|null $draft */
    use App\Support\Navigation\WorkspaceEmbed;

    $cfg = (array) ($draft?->configuration_json ?? []);
    $wmOpacity = $cfg['watermark_opacity'] ?? 0.05;
    $wmScale = $cfg['watermark_scale'] ?? 'medium';
    $wmText = $cfg['watermark_text'] ?? '';
    $brandingEmbedded = WorkspaceEmbed::inWorkspaceContext();
    $brandingTurboFrame = WorkspaceEmbed::formTurboFrame();
    $headerLabels = [
        'system' => 'System generated',
        'uploaded_banner' => 'Uploaded banner',
        'logo_compact' => 'Compact logo',
    ];
    $footerLabels = [
        'system' => 'System generated',
        'uploaded_artwork' => 'Uploaded artwork',
    ];
    $wmLabels = [
        'none' => 'None',
        'logo' => 'Logo',
        'confidential' => 'Confidential',
        'draft' => 'Draft',
        'copy' => 'Copy',
        'custom_text' => 'Custom text',
    ];
    $headerMode = old('header_mode', $draft->header_mode ?? 'system');
    $footerMode = old('footer_mode', $draft->footer_mode ?? 'system');
    $watermarkMode = old('watermark_mode', $draft->watermark_mode ?? 'none');
    $hasHeaderAsset = is_array($draft->header_asset_json ?? null) && ! empty($draft->header_asset_json['path']);
    $hasFooterAsset = is_array($draft->footer_asset_json ?? null) && ! empty($draft->footer_asset_json['path']);
@endphp
<x-loan-layout>
    <x-loan.page :title="$title" :subtitle="$subtitle">
        <x-slot name="actions">
            <a href="{{ route('loan.system.setup') }}" class="inline-flex rounded-lg border border-slate-200 bg-white px-4 py-2 text-sm font-semibold text-slate-700 hover:bg-slate-50">System setup</a>
            <a href="{{ route('loan.system.setup.company') }}" class="inline-flex rounded-lg border border-slate-200 bg-white px-4 py-2 text-sm font-semibold text-slate-700 hover:bg-slate-50">Company settings</a>
        </x-slot>

        @include('loan.accounting.partials.flash')

        @if (isset($errors) && $errors->any())
            <div class="mb-4 rounded-lg border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-800" role="alert">
                <div class="mb-1 font-semibold">Could not complete that action</div>
                <ul class="list-disc pl-5 space-y-1">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <div id="document-branding-busy" class="mb-4 hidden rounded-lg border border-sky-200 bg-sky-50 px-4 py-3 text-sm text-sky-900" role="status" aria-live="polite">
            <span class="inline-flex items-center gap-2 font-semibold">
                <span class="inline-block h-3.5 w-3.5 animate-spin rounded-full border-2 border-sky-600 border-t-transparent"></span>
                <span id="document-branding-busy-text">Working…</span>
            </span>
        </div>

        <div class="mb-4 rounded-xl border border-slate-200 bg-slate-50 px-4 py-3 text-xs text-slate-600">
            <strong class="text-slate-800">How to use:</strong>
            @if ($canManage)
                Upload header/footer/stamp artwork (header and footer modes switch automatically) → save colours/text → preview → activate when satisfied.
            @else
                You can review branding settings
                @if ($canPreview)
                    and generate a preview PDF
                @endif
                . Changes require manage permission.
            @endif
            Preview always uses the draft; live loan PDFs use the active version only.
            Disbursed or finalized application PDFs keep the branding that was active when they were issued.
        </div>

        @if ($headerMode === 'uploaded_banner' && ! $hasHeaderAsset)
            <div class="mb-4 rounded-lg border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-900">Header mode is “Uploaded banner” but no header file is on this draft. Upload artwork or switch mode to System generated.</div>
        @endif
        @if ($footerMode === 'uploaded_artwork' && ! $hasFooterAsset)
            <div class="mb-4 rounded-lg border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-900">Footer mode is “Uploaded artwork” but no footer file is on this draft. Upload artwork or switch mode to System generated.</div>
        @endif

        <div class="mb-4 grid grid-cols-2 gap-2 rounded-xl border border-slate-200 bg-white p-3 text-xs shadow-sm md:grid-cols-4 lg:grid-cols-7">
            <div>
                <div class="font-semibold uppercase tracking-wide text-slate-500">Active</div>
                <div class="mt-0.5 text-sm font-semibold text-slate-800">{{ $active ? 'v'.$active->version_number : 'None' }}</div>
            </div>
            <div>
                <div class="font-semibold uppercase tracking-wide text-slate-500">Draft</div>
                <div class="mt-0.5 text-sm font-semibold text-slate-800">{{ $draft ? 'v'.$draft->version_number : '—' }}</div>
            </div>
            <div>
                <div class="font-semibold uppercase tracking-wide text-slate-500">Last activated</div>
                <div class="mt-0.5 text-sm font-semibold text-slate-800">{{ $active?->activated_at?->format('d-M-Y H:i') ?? '—' }}</div>
            </div>
            <div>
                <div class="font-semibold uppercase tracking-wide text-slate-500">Activated by</div>
                <div class="mt-0.5 text-sm font-semibold text-slate-800">{{ $active?->activatedByUser?->name ?? '—' }}</div>
            </div>
            <div>
                <div class="font-semibold uppercase tracking-wide text-slate-500">Header</div>
                <div class="mt-0.5 text-sm font-semibold text-slate-800">{{ $headerLabels[$headerMode] ?? $headerMode }}</div>
            </div>
            <div>
                <div class="font-semibold uppercase tracking-wide text-slate-500">Footer</div>
                <div class="mt-0.5 text-sm font-semibold text-slate-800">{{ $footerLabels[$footerMode] ?? $footerMode }}</div>
            </div>
            <div>
                <div class="font-semibold uppercase tracking-wide text-slate-500">Watermark</div>
                <div class="mt-0.5 text-sm font-semibold text-slate-800">{{ $wmLabels[$watermarkMode] ?? $watermarkMode }}</div>
            </div>
        </div>

        <div class="mb-4 rounded-xl border border-slate-200 bg-white p-5 shadow-sm">
            <div class="mb-3 flex items-center justify-between gap-3">
                <h2 class="text-sm font-semibold text-slate-800">Institution identity</h2>
                <a href="{{ route('loan.system.setup.company') }}" class="text-xs font-semibold text-[#2f4f4f] hover:underline">Edit in Company Settings</a>
            </div>
            <p class="mb-3 text-xs text-slate-500">Logo and legal identity are owned by Company Settings. Document branding does not duplicate logo upload.</p>
            <div class="grid gap-3 text-sm md:grid-cols-2">
                <div><span class="text-slate-500">Name</span><div class="font-medium text-slate-800">{{ $institution['display_name'] ?? $institution['name'] ?? '—' }}</div></div>
                <div><span class="text-slate-500">Legal / company</span><div class="font-medium text-slate-800">{{ $institution['name'] ?? '—' }}</div></div>
                <div class="md:col-span-2"><span class="text-slate-500">Address</span><div class="font-medium text-slate-800">{{ $institution['address'] ?: '—' }}</div></div>
                <div><span class="text-slate-500">Phone</span><div class="font-medium text-slate-800">{{ $institution['phone'] ?: '—' }}</div></div>
                <div><span class="text-slate-500">Email</span><div class="font-medium text-slate-800">{{ $institution['email'] ?: '—' }}</div></div>
                <div><span class="text-slate-500">Website</span><div class="font-medium text-slate-800">{{ $institution['website'] ?: '—' }}</div></div>
                <div>
                    <span class="text-slate-500">Company logo</span>
                    <div class="mt-1">
                        @if (! empty($institution['logo_url']))
                            <img src="{{ $institution['logo_url'] }}" alt="Company logo" class="h-12 max-w-[160px] object-contain rounded border border-slate-200 bg-slate-50 p-1">
                        @else
                            <span class="text-slate-400">No logo uploaded</span>
                        @endif
                    </div>
                </div>
            </div>
        </div>

        <form method="post" action="{{ route('loan.system.setup.document_branding.draft') }}" class="space-y-4 document-branding-busy-form" id="document-branding-form" data-busy-label="Saving draft…" @if($brandingEmbedded) data-turbo-frame="{{ $brandingTurboFrame }}" @endif>
            @csrf
            <x-loan.workspace-embed-field />
            <div class="grid gap-4 lg:grid-cols-2">
                <div class="rounded-xl border border-slate-200 bg-white p-5 shadow-sm">
                    <h2 class="mb-3 text-sm font-semibold text-slate-800">Header configuration</h2>
                    <label class="mb-1 block text-xs font-semibold text-slate-600">Header mode</label>
                    <select name="header_mode" class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm" @disabled(! $canManage)>
                        @foreach ($headerModes as $mode)
                            <option value="{{ $mode }}" @selected($headerMode === $mode)>{{ $headerLabels[$mode] ?? $mode }}</option>
                        @endforeach
                    </select>
                    <p class="mt-2 text-[11px] text-slate-500">Choose “Uploaded banner” only after a header image is uploaded (upload does this for you).</p>
                </div>

                <div class="rounded-xl border border-slate-200 bg-white p-5 shadow-sm">
                    <h2 class="mb-3 text-sm font-semibold text-slate-800">Footer configuration</h2>
                    <label class="mb-1 block text-xs font-semibold text-slate-600">Footer mode</label>
                    <select name="footer_mode" class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm" @disabled(! $canManage)>
                        @foreach ($footerModes as $mode)
                            <option value="{{ $mode }}" @selected($footerMode === $mode)>{{ $footerLabels[$mode] ?? $mode }}</option>
                        @endforeach
                    </select>
                </div>

                <div class="rounded-xl border border-slate-200 bg-white p-5 shadow-sm">
                    <h2 class="mb-3 text-sm font-semibold text-slate-800">Watermark</h2>
                    <label class="mb-1 block text-xs font-semibold text-slate-600">Mode</label>
                    <select name="watermark_mode" class="mb-3 w-full rounded-lg border border-slate-300 px-3 py-2 text-sm" @disabled(! $canManage)>
                        @foreach ($watermarkModes as $mode)
                            <option value="{{ $mode }}" @selected($watermarkMode === $mode)>{{ $wmLabels[$mode] ?? $mode }}</option>
                        @endforeach
                    </select>
                    <div class="mb-3 grid grid-cols-2 gap-3">
                        <div>
                            <label class="mb-1 block text-xs font-semibold text-slate-600">Opacity</label>
                            <select name="watermark_opacity" class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm" @disabled(! $canManage)>
                                @foreach ($opacities as $opacity)
                                    <option value="{{ $opacity }}" @selected((float) old('watermark_opacity', $wmOpacity) === (float) $opacity)>{{ number_format((float) $opacity * 100, 0) }}%</option>
                                @endforeach
                            </select>
                        </div>
                        <div>
                            <label class="mb-1 block text-xs font-semibold text-slate-600">Scale</label>
                            <select name="watermark_scale" class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm" @disabled(! $canManage)>
                                @foreach ($scales as $scale)
                                    <option value="{{ $scale }}" @selected(old('watermark_scale', $wmScale) === $scale)>{{ ucfirst($scale) }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <label class="mb-1 block text-xs font-semibold text-slate-600">Custom text</label>
                    <input type="text" name="watermark_text" maxlength="40" value="{{ old('watermark_text', $wmText) }}" class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm" placeholder="Only when mode is Custom text" @disabled(! $canManage)>
                </div>

                <div class="space-y-4">
                    <div class="rounded-xl border border-slate-200 bg-white p-5 shadow-sm">
                        <h2 class="mb-3 text-sm font-semibold text-slate-800">Brand colours</h2>
                        <div class="grid grid-cols-2 gap-3">
                            <div>
                                <label class="mb-1 block text-xs font-semibold text-slate-600">Primary</label>
                                <div class="flex gap-2">
                                    <input type="color" value="{{ old('primary_color', $draft->primary_color ?? '#1E3A8A') }}" class="h-10 w-12 rounded border border-slate-300" oninput="this.nextElementSibling.value=this.value" @disabled(! $canManage)>
                                    <input type="text" name="primary_color" maxlength="7" pattern="#[0-9A-Fa-f]{6}" value="{{ old('primary_color', $draft->primary_color ?? '#1E3A8A') }}" class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm font-mono" @disabled(! $canManage)>
                                </div>
                            </div>
                            <div>
                                <label class="mb-1 block text-xs font-semibold text-slate-600">Secondary</label>
                                <div class="flex gap-2">
                                    <input type="color" value="{{ old('secondary_color', $draft->secondary_color ?? '#475569') }}" class="h-10 w-12 rounded border border-slate-300" oninput="this.nextElementSibling.value=this.value" @disabled(! $canManage)>
                                    <input type="text" name="secondary_color" maxlength="7" pattern="#[0-9A-Fa-f]{6}" value="{{ old('secondary_color', $draft->secondary_color ?? '#475569') }}" class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm font-mono" @disabled(! $canManage)>
                                </div>
                            </div>
                        </div>
                        <p class="mt-2 text-[11px] text-slate-500">Primary must be dark enough for white backgrounds (avoid near-white / pastel).</p>
                    </div>

                    <div class="rounded-xl border border-slate-200 bg-white p-5 shadow-sm">
                        <h2 class="mb-3 text-sm font-semibold text-slate-800">Text</h2>
                        <label class="mb-1 block text-xs font-semibold text-slate-600">Slogan (optional)</label>
                        <input type="text" name="slogan" maxlength="120" value="{{ old('slogan', $draft->slogan) }}" class="mb-3 w-full rounded-lg border border-slate-300 px-3 py-2 text-sm" @disabled(! $canManage)>
                        <label class="mb-1 block text-xs font-semibold text-slate-600">Disclaimer (optional)</label>
                        <textarea name="disclaimer_text" maxlength="500" rows="3" class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm" @disabled(! $canManage)>{{ old('disclaimer_text', $draft->disclaimer_text) }}</textarea>
                    </div>
                </div>
            </div>
        </form>

        <div class="mt-4 grid gap-4 lg:grid-cols-4">
            @include('loan.system.setup.partials.document-branding-asset', [
                'role' => 'header',
                'label' => 'Header banner artwork',
                'asset' => $draft->header_asset_json ?? null,
                'canManage' => $canManage,
                'hint' => 'Recommended ~1400×160 px. Used when header mode is Uploaded banner.',
            ])
            @include('loan.system.setup.partials.document-branding-asset', [
                'role' => 'footer',
                'label' => 'Footer artwork',
                'asset' => $draft->footer_asset_json ?? null,
                'canManage' => $canManage,
                'hint' => 'Recommended width ≥1200 px. Used when footer mode is Uploaded artwork.',
            ])
            @include('loan.system.setup.partials.document-branding-asset', [
                'role' => 'watermark',
                'label' => 'Watermark image',
                'asset' => $draft->watermark_asset_json ?? null,
                'canManage' => $canManage,
                'hint' => 'Optional for Logo watermark mode. Otherwise the company logo is used.',
            ])
            @include('loan.system.setup.partials.document-branding-asset', [
                'role' => 'stamp',
                'label' => 'HR stamp',
                'asset' => $draft->stamp_asset_json ?? null,
                'canManage' => $canManage,
                'hint' => 'Printed on payslips under Human Resource Manager. The stamp date is confirmed when HR opens a payroll period.',
            ])
        </div>

        <div class="mt-4 flex flex-wrap items-center gap-2 rounded-xl border border-slate-200 bg-slate-50 p-4">
            @if ($canManage)
                <button type="submit" form="document-branding-form" class="rounded-lg bg-[#2f4f4f] px-4 py-2.5 text-sm font-semibold text-white hover:bg-[#264040] document-branding-busy-btn" data-busy-label="Saving draft…">Save Draft</button>
            @endif
            @if ($canPreview)
                <button type="button" id="document-branding-preview-btn" class="rounded-lg border border-slate-300 bg-white px-4 py-2.5 text-sm font-semibold text-slate-700 hover:bg-slate-50 document-branding-busy-btn">Generate Preview PDF</button>
            @endif
            @if ($canManage && $draft)
                <button type="button" id="document-branding-activate-btn" class="rounded-lg border border-amber-300 bg-amber-50 px-4 py-2.5 text-sm font-semibold text-amber-900 hover:bg-amber-100 document-branding-busy-btn" data-busy-label="Activating branding…"
                    data-swal-title="Activate branding?"
                    data-swal-confirm="Activate draft branding v{{ $draft->version_number }}?&#10;&#10;New loan documents will use this version.&#10;Disbursed or finalized documents keep their original branding.">
                    Activate Branding (draft v{{ $draft->version_number }})
                </button>
            @endif
            <p class="w-full text-xs text-slate-500">Save draft → preview → activate. Preview opens in a new browser tab. Pending and approved (not yet disbursed) application PDFs pick up the active version on download.</p>
        </div>

        @if ($canPreview)
            <form id="document-branding-preview-form" method="post" action="{{ route('loan.system.setup.document_branding.preview') }}" class="hidden" data-turbo="false">
                @csrf
            </form>
        @endif
        @if ($canManage && $draft)
            <form id="document-branding-activate-form" method="post" action="{{ route('loan.system.setup.document_branding.activate') }}" class="hidden document-branding-busy-form" data-busy-label="Activating branding…" @if($brandingEmbedded) data-turbo-frame="{{ $brandingTurboFrame }}" @endif>
                @csrf
                <x-loan.workspace-embed-field />
                <input type="hidden" name="version_id" value="{{ $draft->id }}">
            </form>
        @endif

        <script>
            (function () {
                var banner = document.getElementById('document-branding-busy');
                var bannerText = document.getElementById('document-branding-busy-text');

                function setBusy(on, label) {
                    if (!banner || !bannerText) return;
                    banner.classList.toggle('hidden', !on);
                    if (label) bannerText.textContent = label;
                    document.querySelectorAll('.document-branding-busy-btn').forEach(function (btn) {
                        btn.disabled = on;
                        btn.classList.toggle('opacity-60', on);
                        btn.classList.toggle('cursor-wait', on);
                    });
                }

                function showBrandingNotice(message, variant) {
                    if (typeof window.showSwalToast === 'function' && variant !== 'error') {
                        window.showSwalToast({ title: message, variant: variant || 'success' });
                        return;
                    }
                    if (typeof window.swalAlert === 'function') {
                        window.swalAlert(message, {
                            icon: variant === 'error' ? 'error' : 'success',
                            title: variant === 'error' ? 'Could not activate' : 'Branding activated',
                        });
                        return;
                    }
                    alert(message);
                }

                function reloadBrandingPage(url) {
                    if (window.Turbo && url) {
                        window.Turbo.visit(url, { frame: 'loan-workspace-inner' });
                        return;
                    }
                    window.location.href = url || window.location.href;
                }

                function decodeConfirmMessage(raw) {
                    return String(raw || '').replace(/&#10;/g, '\n');
                }

                // Defer disabling until after the browser queues the real form submit.
                document.querySelectorAll('.document-branding-busy-form').forEach(function (form) {
                    form.addEventListener('submit', function () {
                        var label = form.getAttribute('data-busy-label') || 'Working…';
                        window.setTimeout(function () { setBusy(true, label); }, 0);
                    });
                });

                document.addEventListener('turbo:frame-load', function (event) {
                    if (!event.target || event.target.id !== 'loan-workspace-inner') {
                        return;
                    }
                    setBusy(false);
                    if (typeof window.__runSwalFlash === 'function') {
                        window.__runSwalFlash(event.target);
                    }
                });

                var activateBtn = document.getElementById('document-branding-activate-btn');
                var activateForm = document.getElementById('document-branding-activate-form');
                if (activateBtn && activateForm) {
                    activateBtn.addEventListener('click', function () {
                        var msg = decodeConfirmMessage(activateBtn.getAttribute('data-swal-confirm') || 'Activate this branding draft?');
                        var title = activateBtn.getAttribute('data-swal-title') || 'Are you sure?';

                        var runActivate = function () {
                            var csrf = activateForm.querySelector('input[name="_token"]');
                            if (!csrf) {
                                showBrandingNotice('Activation form is missing a security token. Refresh the page and try again.', 'error');
                                return;
                            }

                            setBusy(true, 'Activating branding…');

                            fetch(activateForm.action, {
                                method: 'POST',
                                headers: {
                                    'X-CSRF-TOKEN': csrf.value,
                                    'X-Requested-With': 'XMLHttpRequest',
                                    'Accept': 'application/json',
                                },
                                body: new FormData(activateForm),
                                credentials: 'same-origin',
                            }).then(function (res) {
                                return res.json().catch(function () {
                                    return {};
                                }).then(function (data) {
                                    if (!res.ok || !data.ok) {
                                        throw new Error((data && data.message) || ('Activation failed (' + res.status + ')'));
                                    }
                                    return data;
                                });
                            }).then(function (data) {
                                showBrandingNotice(data.message || 'Branding activated.', 'success');
                                reloadBrandingPage(data.redirect);
                            }).catch(function (err) {
                                showBrandingNotice(err && err.message ? err.message : 'Activation failed.', 'error');
                            }).finally(function () {
                                setBusy(false);
                            });
                        };

                        if (typeof window.swalConfirm === 'function') {
                            window.swalConfirm({
                                title: title,
                                text: msg,
                                confirmButtonText: activateBtn.getAttribute('data-swal-confirm-text') || 'Yes, continue',
                                cancelButtonText: activateBtn.getAttribute('data-swal-cancel-text') || 'Cancel',
                            }).then(function (confirmed) {
                                if (confirmed) {
                                    runActivate();
                                }
                            });
                            return;
                        }

                        if (window.confirm(msg)) {
                            runActivate();
                        }
                    });
                }

                var previewBtn = document.getElementById('document-branding-preview-btn');
                var previewForm = document.getElementById('document-branding-preview-form');
                if (!previewBtn || !previewForm) return;

                previewBtn.addEventListener('click', function () {
                    var csrf = previewForm.querySelector('input[name="_token"]');
                    if (!csrf) {
                        alert('Preview form is missing a security token. Refresh the page and try again.');
                        return;
                    }

                    setBusy(true, 'Generating preview PDF…');

                    fetch(previewForm.action, {
                        method: 'POST',
                        headers: {
                            'X-CSRF-TOKEN': csrf.value,
                            'X-Requested-With': 'XMLHttpRequest',
                            'Accept': 'application/pdf',
                        },
                        body: new FormData(previewForm),
                        credentials: 'same-origin',
                    }).then(function (res) {
                        var type = (res.headers.get('content-type') || '').toLowerCase();
                        if (!res.ok) {
                            if (type.indexOf('application/json') !== -1) {
                                return res.json().then(function (data) {
                                    throw new Error((data && data.message) || ('Preview failed (' + res.status + ')'));
                                });
                            }
                            throw new Error('Preview failed (' + res.status + '). Check permissions or try again.');
                        }
                        if (type.indexOf('application/pdf') === -1) {
                            throw new Error('Server did not return a PDF. The request may have been blocked or timed out.');
                        }
                        return res.blob();
                    }).then(function (blob) {
                        var url = URL.createObjectURL(blob);
                        var win = window.open(url, '_blank');
                        if (!win) {
                            // Popup blocked — fall back to download link.
                            var a = document.createElement('a');
                            a.href = url;
                            a.download = 'document-branding-preview.pdf';
                            document.body.appendChild(a);
                            a.click();
                            a.remove();
                            alert('Preview ready. If no tab opened, check your downloads (popup may be blocked).');
                        }
                        window.setTimeout(function () { URL.revokeObjectURL(url); }, 120000);
                    }).catch(function (err) {
                        alert(err && err.message ? err.message : 'Preview could not be generated.');
                    }).finally(function () {
                        setBusy(false);
                    });
                });
            })();
        </script>
    </x-loan.page>
</x-loan-layout>