<?= $this->extend('layouts/dashboard') ?>

<?= $this->section('content') ?>
<?php
$modes = [
    'private' => [
        'title' => lang('Backoffice.privacyModePrivate'),
        'body' => lang('Backoffice.privacyModePrivateBody'),
    ],
    'standard' => [
        'title' => lang('Backoffice.privacyModeStandard'),
        'body' => lang('Backoffice.privacyModeStandardBody'),
    ],
    'transparent' => [
        'title' => lang('Backoffice.privacyModeTransparent'),
        'body' => lang('Backoffice.privacyModeTransparentBody'),
    ],
];

$toggles = [
    'show_public_reference' => lang('Backoffice.privacyFieldReference'),
    'show_organization_name' => lang('Backoffice.privacyFieldOrganization'),
    'show_facility_name' => lang('Backoffice.privacyFieldFacility'),
    'show_energy' => lang('Backoffice.privacyFieldEnergy'),
    'show_period' => lang('Backoffice.privacyFieldPeriod'),
    'show_blockchain' => lang('Backoffice.privacyFieldBlockchain'),
    'show_hashes' => lang('Backoffice.privacyFieldHashes'),
    'show_rule_name' => lang('Backoffice.privacyFieldRule'),
];

$selectedMode = old('visibility_mode', $settings['visibility_mode'] ?? 'standard');
?>
<section class="grid gap-4 xl:grid-cols-[minmax(0,1.15fr)_minmax(320px,0.85fr)]">
    <article class="rounded-[30px] border border-white/10 bg-gradient-to-br from-slate-900 via-slate-950 to-cyan-500/10 p-6 shadow-glow">
        <div class="inline-flex rounded-full border border-cyan-400/25 bg-cyan-400/10 px-3 py-1 text-xs font-semibold uppercase tracking-[0.24em] text-cyan-100"><?= esc(lang('Backoffice.privacySettingsBadge')) ?></div>
        <h1 class="mt-4 text-3xl font-semibold tracking-tight text-white"><?= esc(lang('Backoffice.privacySettingsHeading')) ?></h1>
        <p class="mt-4 max-w-2xl text-sm leading-7 text-slate-300"><?= esc(lang('Backoffice.privacySettingsIntro')) ?></p>

        <form method="post" action="<?= site_url('privacy-settings') ?>" class="mt-6 space-y-6">
            <?= csrf_field() ?>

            <div>
                <div class="text-sm font-semibold text-white"><?= esc(lang('Backoffice.privacySettingsModeLabel')) ?></div>
                <div id="privacyModeSelector" class="mt-3 grid gap-3 md:grid-cols-3">
                    <?php foreach ($modes as $value => $mode): ?>
                        <label class="privacy-mode-card block cursor-pointer rounded-[24px] border px-4 py-4 transition hover:-translate-y-0.5 <?= $selectedMode === $value ? 'is-active border-cyan-300/35 bg-cyan-400/12 shadow-glow' : 'border-white/10 bg-white/5 hover:border-cyan-300/25 hover:bg-white/8' ?>">
                            <input type="radio" name="visibility_mode" value="<?= esc($value) ?>" class="privacy-mode-input sr-only" <?= $selectedMode === $value ? 'checked' : '' ?> <?= ! $canManage ? 'disabled' : '' ?>>
                            <div class="flex items-start justify-between gap-3">
                                <div>
                                    <div class="text-sm font-semibold text-white"><?= esc($mode['title']) ?></div>
                                    <p class="mt-2 text-sm leading-6 <?= $selectedMode === $value ? 'text-cyan-50/90' : 'text-slate-400' ?>"><?= esc($mode['body']) ?></p>
                                </div>
                                <span class="privacy-mode-badge inline-flex h-9 min-w-9 items-center justify-center rounded-full border text-sm font-semibold <?= $selectedMode === $value ? 'border-cyan-300/35 bg-cyan-300/15 text-cyan-50' : 'border-white/10 bg-slate-950/50 text-slate-400' ?>">
                                    <?= $selectedMode === $value ? '&#10003;' : '&#9675;' ?>
                                </span>
                            </div>
                        </label>
                    <?php endforeach; ?>
                </div>
            </div>

            <div>
                <div class="text-sm font-semibold text-white"><?= esc(lang('Backoffice.privacySettingsFieldsLabel')) ?></div>
                <div id="privacyFieldsSelector" class="mt-3 grid gap-3 md:grid-cols-2">
                    <?php foreach ($toggles as $field => $label): ?>
                        <?php $checked = old($field) !== null ? (bool) old($field) : ! empty($settings[$field]); ?>
                        <label class="privacy-toggle-card flex items-center justify-between gap-4 rounded-2xl border px-4 py-4 text-sm transition <?= $checked ? 'is-active border-emerald-400/25 bg-emerald-400/10 text-white' : 'border-white/10 bg-slate-950/60 text-slate-200 hover:border-emerald-400/20 hover:bg-white/5' ?>">
                            <span class="font-medium"><?= esc($label) ?></span>
                            <span class="flex items-center gap-3">
                                <span class="privacy-toggle-state inline-flex h-8 min-w-8 items-center justify-center rounded-full border text-sm font-semibold <?= $checked ? 'border-emerald-300/30 bg-emerald-300/15 text-emerald-50' : 'border-white/10 bg-slate-950/60 text-slate-500' ?>">
                                    <?= $checked ? '&#10003;' : '&#10005;' ?>
                                </span>
                                <input type="checkbox" name="<?= esc($field) ?>" value="1" class="privacy-toggle-input h-5 w-5 rounded border-white/20 bg-white/5 text-emerald-400 focus:ring-emerald-400" <?= $checked ? 'checked' : '' ?> <?= ! $canManage ? 'disabled' : '' ?>>
                            </span>
                        </label>
                    <?php endforeach; ?>
                </div>
            </div>

            <?php if ($canManage): ?>
                <div class="flex flex-wrap gap-3">
                    <button type="submit" class="inline-flex min-h-12 items-center justify-center rounded-full bg-gradient-to-r from-emerald-400 to-cyan-400 px-5 py-3 text-sm font-semibold text-slate-950 transition hover:opacity-90"><?= esc(lang('Backoffice.savePrivacySettings')) ?></button>
                    <a href="<?= site_url('audit') ?>" class="inline-flex min-h-12 items-center justify-center rounded-full border border-white/10 bg-white/5 px-5 py-3 text-sm font-semibold text-slate-100 transition hover:bg-white/10"><?= esc(lang('Backoffice.openPublicPortal')) ?></a>
                </div>
            <?php else: ?>
                <div class="rounded-2xl border border-amber-300/20 bg-amber-300/10 px-4 py-4 text-sm text-amber-100"><?= esc(lang('Backoffice.privacySettingsReadOnly')) ?></div>
            <?php endif; ?>
        </form>
    </article>

    <aside class="rounded-[30px] border border-white/10 bg-white/5 p-6 backdrop-blur">
        <div class="text-xs uppercase tracking-[0.24em] text-slate-400"><?= esc(lang('Backoffice.nextStep')) ?></div>
        <h2 class="mt-3 text-2xl font-semibold tracking-tight text-white"><?= esc(lang('Backoffice.privacyPreviewTitle')) ?></h2>
        <p class="mt-3 text-sm leading-7 text-slate-300"><?= esc(lang('Backoffice.privacyPreviewIntro')) ?></p>

        <div class="mt-6 space-y-3">
            <div class="rounded-2xl border border-white/10 bg-slate-950/60 p-4">
                <div class="text-[11px] uppercase tracking-[0.22em] text-slate-500"><?= esc(lang('Backoffice.privacyPreviewMode')) ?></div>
                <div class="mt-2 text-lg font-semibold text-white"><?= esc($modes[$settings['visibility_mode'] ?? 'standard']['title'] ?? lang('Backoffice.privacyModeStandard')) ?></div>
            </div>
            <div class="rounded-2xl border border-white/10 bg-slate-950/60 p-4">
                <div class="text-sm font-semibold text-white"><?= esc(lang('Backoffice.privacyPreviewVisible')) ?></div>
                <p class="mt-2 text-sm leading-6 text-slate-400"><?= esc(lang('Backoffice.privacyPreviewVisibleBody')) ?></p>
            </div>
            <div class="rounded-2xl border border-white/10 bg-slate-950/60 p-4">
                <div class="text-sm font-semibold text-white"><?= esc(lang('Backoffice.privacyPreviewSensitive')) ?></div>
                <p class="mt-2 text-sm leading-6 text-slate-400"><?= esc(lang('Backoffice.privacyPreviewSensitiveBody')) ?></p>
            </div>
        </div>
    </aside>
</section>
<script>
    (() => {
        const modeSelector = document.getElementById('privacyModeSelector');
        const fieldsSelector = document.getElementById('privacyFieldsSelector');

        if (modeSelector) {
            const modeCards = Array.from(modeSelector.querySelectorAll('.privacy-mode-card'));

            const paintModes = () => {
                modeCards.forEach((card) => {
                    const input = card.querySelector('.privacy-mode-input');
                    const badge = card.querySelector('.privacy-mode-badge');
                    const paragraph = card.querySelector('p');
                    if (!input || !badge || !paragraph) {
                        return;
                    }

                    const active = input.checked;
                    card.classList.toggle('is-active', active);
                    card.classList.toggle('border-cyan-300/35', active);
                    card.classList.toggle('bg-cyan-400/12', active);
                    card.classList.toggle('shadow-glow', active);
                    card.classList.toggle('border-white/10', !active);
                    card.classList.toggle('bg-white/5', !active);
                    badge.innerHTML = active ? '&#10003;' : '&#9675;';
                    badge.classList.toggle('border-cyan-300/35', active);
                    badge.classList.toggle('bg-cyan-300/15', active);
                    badge.classList.toggle('text-cyan-50', active);
                    badge.classList.toggle('border-white/10', !active);
                    badge.classList.toggle('bg-slate-950/50', !active);
                    badge.classList.toggle('text-slate-400', !active);
                    paragraph.classList.toggle('text-cyan-50/90', active);
                    paragraph.classList.toggle('text-slate-400', !active);
                });
            };

            modeCards.forEach((card) => {
                const input = card.querySelector('.privacy-mode-input');
                if (!input) {
                    return;
                }

                input.addEventListener('change', paintModes);
            });

            paintModes();
        }

        if (fieldsSelector) {
            const toggleCards = Array.from(fieldsSelector.querySelectorAll('.privacy-toggle-card'));

            const paintToggles = () => {
                toggleCards.forEach((card) => {
                    const input = card.querySelector('.privacy-toggle-input');
                    const state = card.querySelector('.privacy-toggle-state');
                    if (!input || !state) {
                        return;
                    }

                    const active = input.checked;
                    card.classList.toggle('is-active', active);
                    card.classList.toggle('border-emerald-400/25', active);
                    card.classList.toggle('bg-emerald-400/10', active);
                    card.classList.toggle('text-white', active);
                    card.classList.toggle('border-white/10', !active);
                    card.classList.toggle('bg-slate-950/60', !active);
                    card.classList.toggle('text-slate-200', !active);
                    state.innerHTML = active ? '&#10003;' : '&#10005;';
                    state.classList.toggle('text-emerald-100', active);
                    state.classList.toggle('text-slate-500', !active);
                    state.classList.toggle('border-emerald-300/30', active);
                    state.classList.toggle('bg-emerald-300/15', active);
                    state.classList.toggle('text-emerald-50', active);
                    state.classList.toggle('border-white/10', !active);
                    state.classList.toggle('bg-slate-950/60', !active);
                });
            };

            toggleCards.forEach((card) => {
                const input = card.querySelector('.privacy-toggle-input');
                if (!input) {
                    return;
                }

                input.addEventListener('change', paintToggles);
            });

            paintToggles();
        }
    })();
</script>
<?= $this->endSection() ?>
