<?php
$cp = $settings['captcha_provider'] ?? 'none';
$service = $cp === 'turnstile' ? 'turnstile' : ($cp === 'none' ? 'off' : 'recaptcha');
$recaptchaVersion = in_array($cp, ['v2', 'v3'], true) ? $cp : 'v2';
$captchaTheme = $settings['captcha_theme'] ?? 'light';
$providers = [
    'off'       => ['icon' => 'fa-solid fa-ban',          'color' => 'text-gray-400',   'title' => 'Off',                 'desc' => 'No protection'],
    'recaptcha' => ['icon' => 'fa-brands fa-google',       'color' => 'text-blue-500',   'title' => 'Google reCAPTCHA',    'desc' => 'Checkbox or invisible'],
    'turnstile' => ['icon' => 'fa-brands fa-cloudflare',   'color' => 'text-orange-500', 'title' => 'Cloudflare Turnstile','desc' => 'Privacy-first, no puzzles'],
];
?>
<form method="POST" action="/admin/settings" id="captchaForm">
    <?= Router::csrfField() ?>
    <input type="hidden" name="_tab" value="security">
    <input type="hidden" name="_sub" value="captcha">
    <input type="hidden" name="captcha_provider" id="captchaProviderInput" value="<?= htmlspecialchars($cp) ?>">

    <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
        <div class="px-6 py-5 border-b border-gray-100">
            <h3 class="text-base font-semibold text-gray-900">Spam &amp; bot protection</h3>
            <p class="text-sm text-gray-500 mt-0.5">Add a CAPTCHA to your registration, comment and contact forms to keep bots and spam out. Pick a provider below.</p>
        </div>

        <div class="p-6 space-y-6">
            
            <div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
                <?php foreach ($providers as $key => $pv): $sel = $service === $key; ?>
                <button type="button" data-service="<?= $key ?>" onclick="captchaSelect('<?= $key ?>')"
                        class="cap-card text-left rounded-xl border-2 p-4 transition-all focus:outline-none <?= $sel ? 'border-primary-500 bg-primary-50/40 ring-1 ring-primary-200' : 'border-gray-200 hover:border-gray-300 bg-white' ?>">
                    <div class="flex items-center justify-between mb-2.5">
                        <i class="<?= $pv['icon'] ?> text-xl <?= $pv['color'] ?>"></i>
                        <span class="cap-check w-5 h-5 rounded-full flex items-center justify-center <?= $sel ? 'bg-primary-600 text-white' : 'bg-gray-100 text-transparent' ?>"><i class="fa-solid fa-check" style="font-size:10px"></i></span>
                    </div>
                    <div class="font-semibold text-sm text-gray-900"><?= $pv['title'] ?></div>
                    <div class="text-xs text-gray-500 mt-0.5"><?= $pv['desc'] ?></div>
                </button>
                <?php endforeach; ?>
            </div>

            
            <div data-cap-config="recaptcha" class="space-y-4 <?= $service === 'recaptcha' ? '' : 'hidden' ?>">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">reCAPTCHA type</label>
                    <div class="flex flex-wrap gap-3">
                        <?php foreach (['v2' => 'v2 — Checkbox', 'v3' => 'v3 — Invisible (score)'] as $vv => $vl): ?>
                        <label class="cap-ver flex items-center gap-2 px-4 py-2 rounded-lg border-2 cursor-pointer text-sm transition-all <?= $recaptchaVersion === $vv ? 'border-primary-300 bg-primary-50/40 text-primary-700' : 'border-gray-200 text-gray-600 hover:border-gray-300' ?>">
                            <input type="radio" name="recaptcha_version" value="<?= $vv ?>" class="w-4 h-4 text-primary-600 focus:ring-primary-500" onchange="captchaUpdate()" <?= $recaptchaVersion === $vv ? 'checked' : '' ?>>
                            <?= $vl ?>
                        </label>
                        <?php endforeach; ?>
                    </div>
                </div>
                <p class="text-xs text-gray-500">Create a site in the <a href="https://www.google.com/recaptcha/admin" target="_blank" rel="noopener" class="text-primary-600 hover:underline font-medium">Google reCAPTCHA console</a> with the matching type, then paste the keys below.</p>
            </div>

            
            <div data-cap-config="turnstile" class="<?= $service === 'turnstile' ? '' : 'hidden' ?>">
                <div class="flex gap-3 rounded-lg bg-orange-50 border border-orange-100 p-3.5">
                    <i class="fa-brands fa-cloudflare text-orange-500 text-lg mt-0.5"></i>
                    <p class="text-xs text-orange-900 leading-relaxed">Turnstile is <strong>free, privacy-friendly and shows no puzzles</strong> — most users pass invisibly. Create a widget in your <a href="https://dash.cloudflare.com/?to=/:account/turnstile" target="_blank" rel="noopener" class="font-semibold underline">Cloudflare dashboard &rarr; Turnstile</a>, add your domain to it, then paste the keys below.</p>
                </div>
            </div>

            
            <div data-cap-keys class="space-y-5 <?= $service === 'off' ? 'hidden' : '' ?>">
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Site key</label>
                        <input type="text" name="captcha_site_key" value="<?= htmlspecialchars($settings['captcha_site_key'] ?? '') ?>" class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm font-mono focus:ring-2 focus:ring-primary-500 focus:border-primary-500 outline-none" placeholder="Public site key" autocomplete="off">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Secret key</label>
                        <input type="password" name="captcha_secret_key" value="<?= htmlspecialchars($settings['captcha_secret_key'] ?? '') ?>" class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm font-mono focus:ring-2 focus:ring-primary-500 focus:border-primary-500 outline-none" placeholder="Server secret key" autocomplete="off">
                    </div>
                </div>

                <div class="border-t border-gray-100 pt-5">
                    <label class="block text-sm font-medium text-gray-700 mb-2">Widget theme</label>
                    <div class="flex flex-wrap gap-3">
                        <label class="flex items-center gap-2 px-4 py-2 rounded-lg border cursor-pointer text-sm <?= $captchaTheme === 'light' ? 'border-primary-200 bg-primary-50/50 text-primary-700' : 'border-gray-200 text-gray-600' ?>">
                            <input type="radio" name="captcha_theme" value="light" class="w-4 h-4 text-primary-600 focus:ring-primary-500" <?= $captchaTheme === 'light' ? 'checked' : '' ?>>
                            <i class="fa-solid fa-sun text-amber-400"></i> Light
                        </label>
                        <label class="flex items-center gap-2 px-4 py-2 rounded-lg border cursor-pointer text-sm <?= $captchaTheme === 'dark' ? 'border-primary-200 bg-primary-50/50 text-primary-700' : 'border-gray-200 text-gray-600' ?>">
                            <input type="radio" name="captcha_theme" value="dark" class="w-4 h-4 text-primary-600 focus:ring-primary-500" <?= $captchaTheme === 'dark' ? 'checked' : '' ?>>
                            <i class="fa-solid fa-moon text-indigo-400"></i> Dark
                        </label>
                    </div>
                </div>

                <div class="border-t border-gray-100 pt-5">
                    <label class="block text-sm font-medium text-gray-700 mb-3">Protect these forms</label>
                    <div class="flex flex-wrap gap-x-6 gap-y-3">
                        <?php foreach (['register' => 'Registration', 'comment' => 'Comments', 'contact' => 'Contact form'] as $act => $lbl): ?>
                        <label class="flex items-center gap-2 cursor-pointer">
                            <input type="checkbox" name="captcha_on_<?= $act ?>" value="1" class="w-4 h-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500" <?= ($settings['captcha_on_' . $act] ?? '1') === '1' ? 'checked' : '' ?>>
                            <span class="text-sm text-gray-700"><?= $lbl ?></span>
                        </label>
                        <?php endforeach; ?>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="mt-6">
        <button type="submit" class="inline-flex items-center px-5 py-2.5 bg-primary-600 text-white text-sm font-medium rounded-lg hover:bg-primary-700 transition-colors"><i class="fa-solid fa-floppy-disk mr-2"></i> Save changes</button>
    </div>
</form>

<script>
(function () {
    var capService = '<?= $service ?>';
    function setCard(c, on) {
        ['border-primary-500', 'bg-primary-50/40', 'ring-1', 'ring-primary-200'].forEach(function (k) { c.classList.toggle(k, on); });
        ['border-gray-200', 'hover:border-gray-300', 'bg-white'].forEach(function (k) { c.classList.toggle(k, !on); });
        var chk = c.querySelector('.cap-check');
        ['bg-primary-600', 'text-white'].forEach(function (k) { chk.classList.toggle(k, on); });
        ['bg-gray-100', 'text-transparent'].forEach(function (k) { chk.classList.toggle(k, !on); });
    }
    window.captchaSelect = function (service) {
        capService = service;
        document.querySelectorAll('.cap-card').forEach(function (c) { setCard(c, c.dataset.service === service); });
        document.querySelectorAll('[data-cap-config]').forEach(function (el) { el.classList.toggle('hidden', el.dataset.capConfig !== service); });
        document.querySelector('[data-cap-keys]').classList.toggle('hidden', service === 'off');
        window.captchaUpdate();
    };
    window.captchaUpdate = function () {
        var provider = 'none';
        if (capService === 'recaptcha') { var v = document.querySelector('[name=recaptcha_version]:checked'); provider = v ? v.value : 'v2'; }
        else if (capService === 'turnstile') { provider = 'turnstile'; }
        document.getElementById('captchaProviderInput').value = provider;
        document.querySelectorAll('.cap-ver').forEach(function (l) {
            var on = l.querySelector('input').checked;
            ['border-primary-300', 'bg-primary-50/40', 'text-primary-700'].forEach(function (k) { l.classList.toggle(k, on); });
            ['border-gray-200', 'text-gray-600', 'hover:border-gray-300'].forEach(function (k) { l.classList.toggle(k, !on); });
        });
    };
})();
</script>
