@extends('layouts.app-sidebar')

@section('content')
<div class="space-y-6">

    <!-- =============================================== -->
    <!-- HEADER -->
    <!-- =============================================== -->
    <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
        <div>
            <h1 class="text-2xl lg:text-3xl font-bold text-db-text-primary">API Settings</h1>
            <p class="text-db-text-secondary mt-1">Manage Claude AI and YouTube API configurations</p>
        </div>
    </div>

    <!-- =============================================== -->
    <!-- CLAUDE AI SETTINGS -->
    <!-- =============================================== -->
    <div class="bg-db-card border border-db-border rounded-xl overflow-hidden">
        <div class="px-5 py-4 border-b border-db-border bg-gradient-to-r from-orange-500/10 to-amber-500/10">
            <div class="flex items-center justify-between">
                <div class="flex items-center gap-3">
                    <div class="w-10 h-10 rounded-xl bg-orange-500/20 flex items-center justify-center">
                        <svg class="w-5 h-5 text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
                        </svg>
                    </div>
                    <div>
                        <h3 class="text-lg font-semibold text-db-text-primary">Anthropic Claude API</h3>
                        <p class="text-xs text-db-text-muted">Configure Claude AI model and parameters</p>
                    </div>
                </div>
                <button onclick="testClaude()" class="inline-flex items-center gap-2 px-4 py-2 bg-orange-500 hover:bg-orange-600 text-white text-sm font-medium rounded-lg transition-colors">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                    Test API
                </button>
            </div>
        </div>

        <form method="POST" action="{{ route('admin.settings.openai') }}" class="p-5 space-y-5">
            @csrf
            <div class="grid md:grid-cols-2 gap-5">
                <!-- API Key -->
                <div class="md:col-span-2">
                    <label class="block text-sm font-medium text-db-text-secondary mb-2">
                        API Key <span class="text-red-400">*</span>
                    </label>
                    <input type="text" name="api_key" required
                        class="w-full px-4 py-3 bg-db-surface border border-db-border rounded-xl text-db-text-primary placeholder:text-db-text-dim focus:outline-none focus:ring-2 focus:ring-orange-500/50 transition-colors"
                        placeholder="sk-ant-api03-...">
                    <p class="text-xs text-db-text-muted mt-2">Get from: <a href="https://console.anthropic.com/settings/keys" target="_blank" class="text-orange-400 hover:underline">console.anthropic.com</a></p>
                </div>

                <!-- Model -->
                <div>
                    <label class="block text-sm font-medium text-db-text-secondary mb-2">
                        Model <span class="text-red-400">*</span>
                    </label>
                    <select name="model" required class="w-full px-4 py-3 bg-db-surface border border-db-border rounded-xl text-db-text-primary focus:outline-none focus:ring-2 focus:ring-orange-500/50">
                        <option value="claude-3-haiku-20240307" {{ ($settings['openai_model'] ?? '') === 'claude-3-haiku-20240307' ? 'selected' : '' }}>Claude 3 Haiku (Fastest, Cheapest)</option>
                        <option value="claude-3-5-sonnet-20241022" {{ ($settings['openai_model'] ?? '') === 'claude-3-5-sonnet-20241022' ? 'selected' : '' }}>Claude 3.5 Sonnet (Balanced)</option>
                        <option value="claude-3-opus-20240229" {{ ($settings['openai_model'] ?? '') === 'claude-3-opus-20240229' ? 'selected' : '' }}>Claude 3 Opus (Most Capable)</option>
                    </select>
                    <p class="text-xs text-db-text-muted mt-2">Recommended: Claude 3 Haiku for chat bots</p>
                </div>

                <!-- Temperature -->
                <div>
                    <label class="block text-sm font-medium text-db-text-secondary mb-2">
                        Temperature (0-1) <span class="text-red-400">*</span>
                    </label>
                    <input type="number" name="temperature" step="0.1" min="0" max="1" value="{{ $settings['openai_temperature'] ?? 0.7 }}" required
                        class="w-full px-4 py-3 bg-db-surface border border-db-border rounded-xl text-db-text-primary focus:outline-none focus:ring-2 focus:ring-orange-500/50">
                    <p class="text-xs text-db-text-muted mt-2">Lower = More focused, Higher = More creative</p>
                </div>

                <!-- Max Tokens -->
                <div>
                    <label class="block text-sm font-medium text-db-text-secondary mb-2">
                        Max Tokens (50-1000) <span class="text-red-400">*</span>
                    </label>
                    <input type="number" name="max_tokens" min="50" max="1000" value="{{ $settings['openai_max_tokens'] ?? 150 }}" required
                        class="w-full px-4 py-3 bg-db-surface border border-db-border rounded-xl text-db-text-primary focus:outline-none focus:ring-2 focus:ring-orange-500/50">
                    <p class="text-xs text-db-text-muted mt-2">Lower = Faster responses, Lower cost</p>
                </div>
            </div>

            <div class="pt-4">
                <button type="submit" class="inline-flex items-center gap-2 px-6 py-2.5 bg-orange-500 hover:bg-orange-600 text-white text-sm font-semibold rounded-lg shadow-lg transition-all">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                    </svg>
                    Save Claude Settings
                </button>
            </div>
        </form>
    </div>

    <!-- =============================================== -->
    <!-- GOOGLE/YOUTUBE API SETTINGS -->
    <!-- =============================================== -->
    <div class="bg-db-card border border-db-border rounded-xl overflow-hidden">
        <div class="px-5 py-4 border-b border-db-border bg-gradient-to-r from-red-500/10 to-pink-500/10">
            <div class="flex items-center gap-3">
                <div class="w-10 h-10 rounded-xl bg-red-500/20 flex items-center justify-center">
                    <svg class="w-5 h-5 text-red-400" fill="currentColor" viewBox="0 0 24 24">
                        <path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/>
                    </svg>
                </div>
                <div>
                    <h3 class="text-lg font-semibold text-db-text-primary">Google/YouTube API</h3>
                    <p class="text-xs text-db-text-muted">OAuth credentials for YouTube integration</p>
                </div>
            </div>
        </div>

        <form method="POST" action="{{ route('admin.settings.google') }}" class="p-5 space-y-5">
            @csrf
            <div class="grid md:grid-cols-2 gap-5">
                <!-- Client ID -->
                <div class="md:col-span-2">
                    <label class="block text-sm font-medium text-db-text-secondary mb-2">
                        Client ID <span class="text-red-400">*</span>
                    </label>
                    <input type="text" name="client_id" required
                        class="w-full px-4 py-3 bg-db-surface border border-db-border rounded-xl text-db-text-primary placeholder:text-db-text-dim focus:outline-none focus:ring-2 focus:ring-red-500/50 transition-colors"
                        placeholder="xxxxx.apps.googleusercontent.com">
                    <p class="text-xs text-db-text-muted mt-2">Get from: <a href="https://console.cloud.google.com/apis/credentials" target="_blank" class="text-red-400 hover:underline">Google Cloud Console</a></p>
                </div>

                <!-- Client Secret -->
                <div class="md:col-span-2">
                    <label class="block text-sm font-medium text-db-text-secondary mb-2">
                        Client Secret <span class="text-red-400">*</span>
                    </label>
                    <input type="text" name="client_secret" required
                        class="w-full px-4 py-3 bg-db-surface border border-db-border rounded-xl text-db-text-primary placeholder:text-db-text-dim focus:outline-none focus:ring-2 focus:ring-red-500/50 transition-colors"
                        placeholder="GOCSPX-...">
                </div>
            </div>

            <div class="pt-4">
                <button type="submit" class="inline-flex items-center gap-2 px-6 py-2.5 bg-red-500 hover:bg-red-600 text-white text-sm font-semibold rounded-lg shadow-lg transition-all">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                    </svg>
                    Save YouTube Settings
                </button>
            </div>
        </form>
    </div>

    <!-- =============================================== -->
    <!-- BOT BEHAVIOR SETTINGS -->
    <!-- =============================================== -->
    <div class="bg-db-card border border-db-border rounded-xl overflow-hidden">
        <div class="px-5 py-4 border-b border-db-border bg-gradient-to-r from-purple-500/10 to-pink-500/10">
            <div class="flex items-center gap-3">
                <div class="w-10 h-10 rounded-xl bg-purple-500/20 flex items-center justify-center">
                    <svg class="w-5 h-5 text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4" />
                    </svg>
                </div>
                <div>
                    <h3 class="text-lg font-semibold text-db-text-primary">Bot Behavior Settings</h3>
                    <p class="text-xs text-db-text-muted">Spam protection, cooldowns, and feature toggles</p>
                </div>
            </div>
        </div>

        <form method="POST" action="{{ route('admin.settings.bot') }}" class="p-5 space-y-5">
            @csrf

            <!-- Feature Toggles -->
            <div class="grid md:grid-cols-2 gap-5">
                <div class="flex items-center justify-between p-4 bg-db-surface rounded-xl border border-db-border">
                    <div>
                        <label class="text-sm font-medium text-db-text-primary">AI Responses</label>
                        <p class="text-xs text-db-text-muted mt-1">Global toggle for AI chat responses</p>
                    </div>
                    <label class="relative inline-flex items-center cursor-pointer">
                        <input type="checkbox" name="ai_enabled" value="1" {{ ($botSettings['ai_enabled'] ?? true) ? 'checked' : '' }} class="sr-only peer">
                        <div class="w-11 h-6 bg-db-border peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-purple-500/50 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:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-purple-500"></div>
                    </label>
                </div>

                <div class="flex items-center justify-between p-4 bg-db-surface rounded-xl border border-db-border">
                    <div>
                        <label class="text-sm font-medium text-db-text-primary">Commands</label>
                        <p class="text-xs text-db-text-muted mt-1">Global toggle for !commands</p>
                    </div>
                    <label class="relative inline-flex items-center cursor-pointer">
                        <input type="checkbox" name="commands_enabled" value="1" {{ ($botSettings['commands_enabled'] ?? true) ? 'checked' : '' }} class="sr-only peer">
                        <div class="w-11 h-6 bg-db-border peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-purple-500/50 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:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-purple-500"></div>
                    </label>
                </div>
            </div>

            <!-- Spam Protection -->
            <div class="space-y-4">
                <h4 class="text-sm font-semibold text-db-text-primary flex items-center gap-2">
                    <svg class="w-4 h-4 text-amber-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
                    </svg>
                    Spam Protection & Rate Limiting
                </h4>

                <div class="grid md:grid-cols-2 gap-5">
                    <!-- Trigger Phrase Cooldown -->
                    <div>
                        <label class="block text-sm font-medium text-db-text-secondary mb-2">
                            Trigger Phrase Cooldown <span class="text-red-400">*</span>
                        </label>
                        <div class="relative">
                            <input type="number" name="trigger_cooldown" min="10" max="300" value="{{ $botSettings['trigger_cooldown'] ?? 45 }}" required
                                class="w-full px-4 py-3 bg-db-surface border border-db-border rounded-xl text-db-text-primary focus:outline-none focus:ring-2 focus:ring-purple-500/50">
                            <span class="absolute right-4 top-1/2 -translate-y-1/2 text-db-text-muted text-sm">seconds</span>
                        </div>
                        <p class="text-xs text-db-text-muted mt-2">Cooldown per user per trigger phrase (e.g., "daybot baat sun"). If user spams trigger 10x, bot replies only once.</p>
                    </div>

                    <!-- Max AI Replies Per Minute -->
                    <div>
                        <label class="block text-sm font-medium text-db-text-secondary mb-2">
                            Max AI Replies/Minute <span class="text-red-400">*</span>
                        </label>
                        <div class="relative">
                            <input type="number" name="max_ai_replies" min="5" max="100" value="{{ $botSettings['max_ai_replies'] ?? 30 }}" required
                                class="w-full px-4 py-3 bg-db-surface border border-db-border rounded-xl text-db-text-primary focus:outline-none focus:ring-2 focus:ring-purple-500/50">
                            <span class="absolute right-4 top-1/2 -translate-y-1/2 text-db-text-muted text-sm">/min</span>
                        </div>
                        <p class="text-xs text-db-text-muted mt-2">Global rate limit per channel</p>
                    </div>

                    <!-- User AI Cooldown -->
                    <div>
                        <label class="block text-sm font-medium text-db-text-secondary mb-2">
                            User AI Cooldown <span class="text-red-400">*</span>
                        </label>
                        <div class="relative">
                            <input type="number" name="user_ai_cooldown" min="1" max="60" value="{{ $botSettings['user_ai_cooldown'] ?? 5 }}" required
                                class="w-full px-4 py-3 bg-db-surface border border-db-border rounded-xl text-db-text-primary focus:outline-none focus:ring-2 focus:ring-purple-500/50">
                            <span class="absolute right-4 top-1/2 -translate-y-1/2 text-db-text-muted text-sm">seconds</span>
                        </div>
                        <p class="text-xs text-db-text-muted mt-2">Min time between AI replies to same user</p>
                    </div>

                    <!-- User Fun Command Cooldown -->
                    <div>
                        <label class="block text-sm font-medium text-db-text-secondary mb-2">
                            Fun Command Cooldown <span class="text-red-400">*</span>
                        </label>
                        <div class="relative">
                            <input type="number" name="user_fun_cooldown" min="1" max="60" value="{{ $botSettings['user_fun_cooldown'] ?? 5 }}" required
                                class="w-full px-4 py-3 bg-db-surface border border-db-border rounded-xl text-db-text-primary focus:outline-none focus:ring-2 focus:ring-purple-500/50">
                            <span class="absolute right-4 top-1/2 -translate-y-1/2 text-db-text-muted text-sm">seconds</span>
                        </div>
                        <p class="text-xs text-db-text-muted mt-2">Min time between !gamble, !daily, etc per user</p>
                    </div>
                </div>
            </div>

            <div class="pt-4 flex items-center justify-between">
                <button type="submit" class="inline-flex items-center gap-2 px-6 py-2.5 bg-purple-500 hover:bg-purple-600 text-white text-sm font-semibold rounded-lg shadow-lg transition-all">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                    </svg>
                    Save Bot Settings
                </button>
                <p class="text-xs text-db-text-muted">Restart bot service after saving</p>
            </div>
        </form>
    </div>

    <!-- =============================================== -->
    <!-- INFO PANEL -->
    <!-- =============================================== -->
    <div class="bg-db-accent-primary/10 border border-db-accent-primary/20 rounded-xl p-5">
        <div class="flex items-start gap-4">
            <div class="w-10 h-10 rounded-xl bg-db-accent-primary/20 flex items-center justify-center flex-shrink-0">
                <svg class="w-5 h-5 text-db-accent-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
            </div>
            <div>
                <h4 class="text-db-text-primary font-semibold mb-2">Important Notes</h4>
                <ul class="text-sm text-db-text-secondary space-y-1">
                    <li>API keys are stored securely in .env file</li>
                    <li>Config cache is automatically cleared after updates</li>
                    <li>Changes take effect immediately</li>
                    <li>All API updates are logged in audit logs</li>
                    <li>Test Claude API before saving to verify it works</li>
                </ul>
            </div>
        </div>
    </div>

</div>

<script>
function testClaude() {
    const button = event.target.closest('button');
    const originalText = button.innerHTML;
    button.disabled = true;
    button.innerHTML = '<svg class="animate-spin h-4 w-4 inline mr-1" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg> Testing...';

    fetch('/admin/settings/test-openai', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        }
    })
    .then(res => res.json())
    .then(data => {
        button.disabled = false;
        button.innerHTML = originalText;

        if (data.success) {
            alert('Claude API Test Successful!\n\nTest Result:\n' + JSON.stringify(data.test_result, null, 2));
        } else {
            alert('Claude API Test Failed!\n\n' + data.message);
        }
    })
    .catch(err => {
        button.disabled = false;
        button.innerHTML = originalText;
        alert('Error testing API: ' + err.message);
    });
}
</script>
@endsection