@extends('layouts.app-sidebar')

@section('content')
<div class="max-w-4xl mx-auto">
    {{-- Page Header --}}
    <x-page-header
        title="Chat Moderation"
        subtitle="Configure spam protection rules to auto-timeout violators"
        :backRoute="route('dashboard')"
        backLabel="Back to Dashboard"
    />

    {{-- Success/Error Messages --}}
    @if(session('success'))
    <x-alert variant="success" class="mb-6" dismissible>
        {{ session('success') }}
    </x-alert>
    @endif

    @if(session('error'))
    <x-alert variant="error" class="mb-6" dismissible>
        {{ session('error') }}
    </x-alert>
    @endif

    <form method="POST" action="{{ route('dashboard.spam-protection.update') }}" class="space-y-6">
        @csrf

        {{-- Warning Banner --}}
        <x-alert variant="warning" title="Timeout Actions">
            <span class="font-medium">Rules below are disabled by default.</span>
            When enabled, users who break these rules will be automatically timed out from chat.
        </x-alert>

        {{-- CAPS Spam Card --}}
        <x-card padding="p-0">
            {{-- Card Header --}}
            <div class="px-5 sm:px-6 py-4 sm:py-5 border-b border-db-border">
                <div class="flex items-center justify-between gap-4">
                    <div class="flex items-center gap-3 sm:gap-4">
                        <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-amber-500/15 flex items-center justify-center flex-shrink-0">
                            <svg class="w-5 h-5 sm:w-6 sm:h-6 text-amber-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z" />
                            </svg>
                        </div>
                        <div>
                            <h3 class="text-base sm:text-lg font-semibold text-db-text-primary">CAPS Spam</h3>
                            <p class="text-xs sm:text-sm text-db-text-muted mt-0.5">Timeout users who type in ALL CAPS</p>
                        </div>
                    </div>
                    <label class="relative inline-flex items-center cursor-pointer flex-shrink-0">
                        <input type="checkbox" name="caps_enabled" value="1" class="sr-only peer" {{ $spamSettings['caps']['enabled'] ? 'checked' : '' }}>
                        <div class="w-11 h-6 bg-db-surface rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-amber-500"></div>
                    </label>
                </div>
            </div>

            {{-- Card Body --}}
            <div class="p-5 sm:p-6">
                <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 sm:gap-5">
                    <div class="space-y-2">
                        <label class="block text-sm font-medium text-db-text-secondary">CAPS Threshold (%)</label>
                        <input type="number" name="caps_percentage_threshold" value="{{ $spamSettings['caps']['caps_percentage_threshold'] }}" min="50" max="100"
                            class="w-full px-4 py-2.5 bg-db-surface border border-db-border rounded-xl text-db-text-primary text-sm focus:outline-none focus:ring-2 focus:ring-amber-500/50 focus:border-amber-500 transition-colors">
                        <p class="text-xs text-db-text-muted">Timeout if &gt; this % is caps</p>
                    </div>
                    <div class="space-y-2">
                        <label class="block text-sm font-medium text-db-text-secondary">Min Message Length</label>
                        <input type="number" name="caps_min_length_to_apply" value="{{ $spamSettings['caps']['min_length_to_apply'] }}" min="5" max="50"
                            class="w-full px-4 py-2.5 bg-db-surface border border-db-border rounded-xl text-db-text-primary text-sm focus:outline-none focus:ring-2 focus:ring-amber-500/50 focus:border-amber-500 transition-colors">
                        <p class="text-xs text-db-text-muted">Only check longer messages</p>
                    </div>
                    <div class="space-y-2">
                        <label class="block text-sm font-medium text-db-text-secondary">Timeout Duration</label>
                        <select name="caps_timeout_duration" class="w-full px-4 py-2.5 bg-db-surface border border-db-border rounded-xl text-db-text-primary text-sm focus:outline-none focus:ring-2 focus:ring-amber-500/50 focus:border-amber-500 transition-colors">
                            <option value="60" {{ ($spamSettings['caps']['timeout_duration'] ?? 300) == 60 ? 'selected' : '' }}>1 minute</option>
                            <option value="300" {{ ($spamSettings['caps']['timeout_duration'] ?? 300) == 300 ? 'selected' : '' }}>5 minutes</option>
                            <option value="600" {{ ($spamSettings['caps']['timeout_duration'] ?? 300) == 600 ? 'selected' : '' }}>10 minutes</option>
                            <option value="1800" {{ ($spamSettings['caps']['timeout_duration'] ?? 300) == 1800 ? 'selected' : '' }}>30 minutes</option>
                            <option value="3600" {{ ($spamSettings['caps']['timeout_duration'] ?? 300) == 3600 ? 'selected' : '' }}>1 hour</option>
                        </select>
                        <p class="text-xs text-db-text-muted">How long to timeout</p>
                    </div>
                </div>
            </div>
        </x-card>

        {{-- Emoji / Symbol Spam Card --}}
        <x-card padding="p-0">
            {{-- Card Header --}}
            <div class="px-5 sm:px-6 py-4 sm:py-5 border-b border-db-border">
                <div class="flex items-center justify-between gap-4">
                    <div class="flex items-center gap-3 sm:gap-4">
                        <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-pink-500/15 flex items-center justify-center flex-shrink-0">
                            <svg class="w-5 h-5 sm:w-6 sm:h-6 text-pink-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                            </svg>
                        </div>
                        <div>
                            <h3 class="text-base sm:text-lg font-semibold text-db-text-primary">Emoji / Symbol Spam</h3>
                            <p class="text-xs sm:text-sm text-db-text-muted mt-0.5">Timeout users who spam emojis or symbols</p>
                        </div>
                    </div>
                    <label class="relative inline-flex items-center cursor-pointer flex-shrink-0">
                        <input type="checkbox" name="emoji_symbol_enabled" value="1" class="sr-only peer" {{ $spamSettings['emoji_symbol']['enabled'] ? 'checked' : '' }}>
                        <div class="w-11 h-6 bg-db-surface rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-pink-500"></div>
                    </label>
                </div>
            </div>

            {{-- Card Body --}}
            <div class="p-5 sm:p-6">
                <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 sm:gap-5">
                    <div class="space-y-2">
                        <label class="block text-sm font-medium text-db-text-secondary">Max Emojis</label>
                        <input type="number" name="emoji_symbol_max_emojis" value="{{ $spamSettings['emoji_symbol']['max_emojis'] }}" min="3" max="50"
                            class="w-full px-4 py-2.5 bg-db-surface border border-db-border rounded-xl text-db-text-primary text-sm focus:outline-none focus:ring-2 focus:ring-pink-500/50 focus:border-pink-500 transition-colors">
                        <p class="text-xs text-db-text-muted">Max emojis allowed per message</p>
                    </div>
                    <div class="space-y-2">
                        <label class="block text-sm font-medium text-db-text-secondary">Max Symbols</label>
                        <input type="number" name="emoji_symbol_max_symbols" value="{{ $spamSettings['emoji_symbol']['max_symbols'] }}" min="5" max="50"
                            class="w-full px-4 py-2.5 bg-db-surface border border-db-border rounded-xl text-db-text-primary text-sm focus:outline-none focus:ring-2 focus:ring-pink-500/50 focus:border-pink-500 transition-colors">
                        <p class="text-xs text-db-text-muted">Max !!! or ??? allowed</p>
                    </div>
                    <div class="space-y-2">
                        <label class="block text-sm font-medium text-db-text-secondary">Timeout Duration</label>
                        <select name="emoji_symbol_timeout_duration" class="w-full px-4 py-2.5 bg-db-surface border border-db-border rounded-xl text-db-text-primary text-sm focus:outline-none focus:ring-2 focus:ring-pink-500/50 focus:border-pink-500 transition-colors">
                            <option value="60" {{ ($spamSettings['emoji_symbol']['timeout_duration'] ?? 300) == 60 ? 'selected' : '' }}>1 minute</option>
                            <option value="300" {{ ($spamSettings['emoji_symbol']['timeout_duration'] ?? 300) == 300 ? 'selected' : '' }}>5 minutes</option>
                            <option value="600" {{ ($spamSettings['emoji_symbol']['timeout_duration'] ?? 300) == 600 ? 'selected' : '' }}>10 minutes</option>
                            <option value="1800" {{ ($spamSettings['emoji_symbol']['timeout_duration'] ?? 300) == 1800 ? 'selected' : '' }}>30 minutes</option>
                            <option value="3600" {{ ($spamSettings['emoji_symbol']['timeout_duration'] ?? 300) == 3600 ? 'selected' : '' }}>1 hour</option>
                        </select>
                        <p class="text-xs text-db-text-muted">How long to timeout</p>
                    </div>
                </div>
            </div>
        </x-card>

        {{-- Link / URL Spam Card --}}
        <x-card padding="p-0">
            {{-- Card Header --}}
            <div class="px-5 sm:px-6 py-4 sm:py-5 border-b border-db-border">
                <div class="flex items-center justify-between gap-4">
                    <div class="flex items-center gap-3 sm:gap-4">
                        <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-cyan-500/15 flex items-center justify-center flex-shrink-0">
                            <svg class="w-5 h-5 sm:w-6 sm:h-6 text-cyan-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" />
                            </svg>
                        </div>
                        <div>
                            <h3 class="text-base sm:text-lg font-semibold text-db-text-primary">Link / URL Spam</h3>
                            <p class="text-xs sm:text-sm text-db-text-muted mt-0.5">Timeout users who post links</p>
                        </div>
                    </div>
                    <label class="relative inline-flex items-center cursor-pointer flex-shrink-0">
                        <input type="checkbox" name="links_enabled" value="1" class="sr-only peer" {{ $spamSettings['links']['enabled'] ? 'checked' : '' }}>
                        <div class="w-11 h-6 bg-db-surface rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-cyan-500"></div>
                    </label>
                </div>
            </div>

            {{-- Card Body --}}
            <div class="p-5 sm:p-6 space-y-5">
                {{-- Permission Toggles --}}
                <div class="grid grid-cols-1 sm:grid-cols-3 gap-3 sm:gap-4">
                    <div class="flex items-center justify-between gap-3 p-3 sm:p-4 bg-db-surface rounded-xl">
                        <div>
                            <p class="text-sm font-medium text-db-text-primary">Allow Mods</p>
                            <p class="text-xs text-db-text-muted">Mods can post links</p>
                        </div>
                        <label class="relative inline-flex items-center cursor-pointer">
                            <input type="checkbox" name="links_allow_moderators" value="1" class="sr-only peer" {{ $spamSettings['links']['allow_moderators'] ? 'checked' : '' }}>
                            <div class="w-9 h-5 bg-db-border rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-emerald-500"></div>
                        </label>
                    </div>
                    <div class="flex items-center justify-between gap-3 p-3 sm:p-4 bg-db-surface rounded-xl">
                        <div>
                            <p class="text-sm font-medium text-db-text-primary">Allow Members</p>
                            <p class="text-xs text-db-text-muted">Members can post links</p>
                        </div>
                        <label class="relative inline-flex items-center cursor-pointer">
                            <input type="checkbox" name="links_allow_members" value="1" class="sr-only peer" {{ $spamSettings['links']['allow_members'] ? 'checked' : '' }}>
                            <div class="w-9 h-5 bg-db-border rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-emerald-500"></div>
                        </label>
                    </div>
                    <div class="space-y-2">
                        <label class="block text-sm font-medium text-db-text-secondary">Timeout Duration</label>
                        <select name="links_timeout_duration" class="w-full px-4 py-2.5 bg-db-surface border border-db-border rounded-xl text-db-text-primary text-sm focus:outline-none focus:ring-2 focus:ring-cyan-500/50 focus:border-cyan-500 transition-colors">
                            <option value="60" {{ ($spamSettings['links']['timeout_duration'] ?? 600) == 60 ? 'selected' : '' }}>1 minute</option>
                            <option value="300" {{ ($spamSettings['links']['timeout_duration'] ?? 600) == 300 ? 'selected' : '' }}>5 minutes</option>
                            <option value="600" {{ ($spamSettings['links']['timeout_duration'] ?? 600) == 600 ? 'selected' : '' }}>10 minutes</option>
                            <option value="1800" {{ ($spamSettings['links']['timeout_duration'] ?? 600) == 1800 ? 'selected' : '' }}>30 minutes</option>
                            <option value="3600" {{ ($spamSettings['links']['timeout_duration'] ?? 600) == 3600 ? 'selected' : '' }}>1 hour</option>
                        </select>
                    </div>
                </div>
            </div>
        </x-card>

        {{-- Submit Button Row --}}
        <div class="flex flex-col-reverse sm:flex-row justify-end gap-3 pt-2">
            <x-button variant="secondary" :href="route('dashboard')">
                Cancel
            </x-button>
            <x-button type="submit">
                Save Changes
            </x-button>
        </div>
    </form>
</div>
@endsection