@extends('admin.layout')

@section('title', 'Protection CAPTCHA')

@section('content')
<div class="max-w-3xl mx-auto">
    <h1 class="text-2xl font-bold text-slate-900 mb-2">Protection CAPTCHA</h1>
    <p class="text-slate-600 mb-6">Choisissez <strong>Cloudflare Turnstile</strong> ou <strong>Google reCAPTCHA</strong> (v2 case à cocher ou v3 score). Les clés se créent sur le tableau de bord du fournisseur.</p>

    @if(session('success'))
        <div class="mb-6 p-4 bg-emerald-50 border border-emerald-200 text-emerald-800 rounded-xl">{{ session('success') }}</div>
    @endif

    @if(!$ready)
        <div class="mb-6 p-4 bg-amber-50 border border-amber-200 text-amber-900 rounded-xl text-sm">
            Renseignez la <strong>clé du site</strong> et la <strong>clé secrète</strong> pour activer le captcha sur les formulaires cochés.
        </div>
    @endif

    <form method="POST" action="{{ route('admin.captcha-protection.settings.store') }}" class="bg-white rounded-2xl border border-slate-200 shadow-sm p-6 space-y-6">
        @csrf
        <div>
            <label class="block text-sm font-medium text-slate-700 mb-2">Fournisseur</label>
            <select name="captcha_provider" class="w-full border border-slate-200 rounded-xl px-4 py-2.5 focus:ring-2 focus:ring-primary-500">
                <option value="cloudflare" @selected(old('captcha_provider', $values['captcha_provider']) === 'cloudflare')>Cloudflare Turnstile</option>
                <option value="google" @selected(old('captcha_provider', $values['captcha_provider']) === 'google')>Google reCAPTCHA</option>
            </select>
        </div>

        <div>
            <label class="block text-sm font-medium text-slate-700 mb-2">Clé du site (publique)</label>
            <input type="text" name="captcha_site_key" value="{{ old('captcha_site_key', $values['captcha_site_key']) }}" class="w-full border border-slate-200 rounded-xl px-4 py-2.5 font-mono text-sm" placeholder="0x4AAA... ou 6Lc...">
        </div>
        <div>
            <label class="block text-sm font-medium text-slate-700 mb-2">Clé secrète</label>
            <input type="password" name="captcha_secret_key" value="{{ old('captcha_secret_key', $values['captcha_secret_key']) }}" class="w-full border border-slate-200 rounded-xl px-4 py-2.5 font-mono text-sm" autocomplete="new-password" placeholder="Laisser vide pour ne pas modifier">
            <p class="text-xs text-slate-500 mt-1">Si vous laissez vide à l’enregistrement, l’ancienne clé est conservée (sauf première saisie).</p>
        </div>

        <div class="border-t border-slate-100 pt-6">
            <p class="text-sm font-medium text-slate-700 mb-3">Google reCAPTCHA — type</p>
            <label class="flex items-center gap-2 mb-2">
                <input type="radio" name="captcha_google_type" value="v2" @checked(old('captcha_google_type', $values['captcha_google_type']) === 'v2') class="rounded border-slate-300 text-primary-500">
                <span>v2 — case « Je ne suis pas un robot »</span>
            </label>
            <label class="flex items-center gap-2">
                <input type="radio" name="captcha_google_type" value="v3" @checked(old('captcha_google_type', $values['captcha_google_type']) === 'v3') class="rounded border-slate-300 text-primary-500">
                <span>v3 — invisible (score de confiance)</span>
            </label>
        </div>

        <div>
            <label class="block text-sm font-medium text-slate-700 mb-2">Seuil score reCAPTCHA v3 (0 à 1)</label>
            <input type="number" step="0.1" min="0" max="1" name="captcha_score_threshold" value="{{ old('captcha_score_threshold', $values['captcha_score_threshold']) }}" class="w-40 border border-slate-200 rounded-xl px-4 py-2.5">
            <p class="text-xs text-slate-500 mt-1">Plus bas = plus strict. Recommandé : 0,5.</p>
        </div>

        <div class="border-t border-slate-100 pt-6 space-y-3">
            <p class="text-sm font-medium text-slate-700 mb-2">Formulaires protégés</p>
            <label class="flex items-center gap-2">
                <input type="checkbox" name="captcha_on_contact" value="1" @checked(old('captcha_on_contact', $values['captcha_on_contact'])) class="rounded border-slate-300 text-primary-500">
                <span>Contact (page avec bloc contact)</span>
            </label>
            <label class="flex items-center gap-2">
                <input type="checkbox" name="captcha_on_reservation" value="1" @checked(old('captcha_on_reservation', $values['captcha_on_reservation'])) class="rounded border-slate-300 text-primary-500">
                <span>Réservation</span>
            </label>
            <label class="flex items-center gap-2">
                <input type="checkbox" name="captcha_on_newsletter" value="1" @checked(old('captcha_on_newsletter', $values['captcha_on_newsletter'])) class="rounded border-slate-300 text-primary-500">
                <span>Newsletter</span>
            </label>
            <label class="flex items-center gap-2">
                <input type="checkbox" name="captcha_on_checkout" value="1" @checked(old('captcha_on_checkout', $values['captcha_on_checkout'])) class="rounded border-slate-300 text-primary-500">
                <span>Commande boutique (checkout)</span>
            </label>
        </div>

        <div class="flex gap-3 pt-4">
            <button type="submit" class="px-6 py-2.5 rounded-xl text-white font-medium" style="background: linear-gradient(135deg, {{ $adminPrimary ?? '#6366f1' }}, {{ $adminSecondary ?? '#8b5cf6' }});">Enregistrer</button>
        </div>
    </form>

    <div class="mt-8 p-4 bg-slate-50 rounded-xl text-sm text-slate-600 space-y-2">
        <p><strong>Turnstile :</strong> <a href="https://dash.cloudflare.com/?to=/:account/turnstile" class="text-primary-600 underline" target="_blank" rel="noopener">Cloudflare Dashboard → Turnstile</a></p>
        <p><strong>Google :</strong> <a href="https://www.google.com/recaptcha/admin" class="text-primary-600 underline" target="_blank" rel="noopener">Console reCAPTCHA</a> — type v2 « Case à cocher » ou v3.</p>
    </div>
</div>
@endsection
