{% extends "base.html" %}
{% block title %}Settings{% endblock %}
{% block content %}
<div x-data="settingsApp()">

    <div class="mb-8">
        <h2 class="text-2xl font-bold">⚙️ Settings</h2>
        <p class="text-slate-400 text-sm mt-1">Configure your API connections</p>
    </div>

    <div class="space-y-6">
        <!-- WordPress -->
        <div class="card">
            <h3 class="text-lg font-bold mb-4 flex items-center gap-2">
                <span class="w-3 h-3 rounded-full" :class="wpUrl ? 'bg-green-500' : 'bg-red-500'"></span>
                WordPress Connection
            </h3>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
                <div><label class="settings-label">Site URL</label>
                    <input type="url" x-model="wpUrl" class="settings-input" placeholder="https://core365.cloud"></div>
                <div><label class="settings-label">Username</label>
                    <input type="text" x-model="wpUser" class="settings-input" placeholder="admin"></div>
                <div><label class="settings-label">Application Password</label>
                    <input type="password" x-model="wpPassword" class="settings-input" placeholder="xxxx xxxx xxxx xxxx"></div>
            </div>
            <button @click="testWP()" :disabled="testingWP" class="bg-slate-700 hover:bg-slate-600 text-white py-2 px-4 rounded-lg text-sm transition-colors">
                <span x-show="!testingWP">🔌 Test Connection</span><span x-show="testingWP">Testing...</span>
            </button>
            <span x-show="wpStatus" class="ml-3 text-sm" :class="wpStatus === 'ok' ? 'text-green-400' : 'text-red-400'"
                x-text="wpStatus === 'ok' ? '✅ Connected!' : '❌ Failed'"></span>
        </div>

        <!-- Google APIs -->
        <div class="card">
            <h3 class="text-lg font-bold mb-4 flex items-center gap-2">
                <span class="w-3 h-3 rounded-full" :class="googleCredentials ? 'bg-green-500' : 'bg-red-500'"></span>
                Google APIs (Search Console & Analytics)
            </h3>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div><label class="settings-label">Service Account JSON Path</label>
                    <input type="text" x-model="googleCredentials" class="settings-input" placeholder="/home/user/service-account.json"></div>
                <div><label class="settings-label">GA4 Property ID</label>
                    <input type="text" x-model="ga4PropertyId" class="settings-input" placeholder="123456789"></div>
                <div><label class="settings-label">GSC Site URL</label>
                    <input type="url" x-model="gscSiteUrl" class="settings-input" placeholder="https://core365.cloud/"></div>
            </div>
        </div>

        <!-- Bing -->
        <div class="card">
            <h3 class="text-lg font-bold mb-4 flex items-center gap-2">
                <span class="w-3 h-3 rounded-full" :class="bingApiKey ? 'bg-green-500' : 'bg-red-500'"></span>
                Bing Webmaster Tools
            </h3>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div><label class="settings-label">API Key</label>
                    <input type="password" x-model="bingApiKey" class="settings-input" placeholder="Your Bing API key"></div>
                <div><label class="settings-label">Site URL</label>
                    <input type="url" x-model="bingSiteUrl" class="settings-input" placeholder="https://core365.cloud"></div>
            </div>
        </div>

        <!-- AI -->
        <div class="card">
            <h3 class="text-lg font-bold mb-4 flex items-center gap-2">
                <span class="w-3 h-3 rounded-full" :class="geminiApiKey ? 'bg-green-500' : 'bg-red-500'"></span>
                AI Configuration
            </h3>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div><label class="settings-label">Google Gemini API Key (FREE)</label>
                    <input type="password" x-model="geminiApiKey" class="settings-input" placeholder="Get from aistudio.google.com/apikey"></div>
                <div><label class="settings-label">Groq API Key (FREE backup)</label>
                    <input type="password" x-model="groqApiKey" class="settings-input" placeholder="Get from console.groq.com"></div>
            </div>
        </div>

        <!-- IndexNow -->
        <div class="card">
            <h3 class="text-lg font-bold mb-4">🔔 IndexNow Key</h3>
            <div class="max-w-md">
                <label class="settings-label">IndexNow Key (for instant Bing indexing)</label>
                <input type="text" x-model="indexnowKey" class="settings-input" placeholder="any-random-string-here">
            </div>
        </div>

        <!-- Save -->
        <button @click="saveAll()" :disabled="saving"
            class="bg-blue-600 hover:bg-blue-700 disabled:bg-slate-700 text-white font-bold py-3 px-8 rounded-lg transition-colors text-lg">
            <span x-show="!saving">💾 Save All Settings</span><span x-show="saving">Saving...</span>
        </button>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
function settingsApp() {
    return {
        wpUrl: '{{ config.WP_URL }}', wpUser: '{{ config.WP_USER }}', wpPassword: '{{ config.WP_APP_PASSWORD }}',
        googleCredentials: '{{ config.GOOGLE_APPLICATION_CREDENTIALS }}', ga4PropertyId: '{{ config.GA4_PROPERTY_ID }}', gscSiteUrl: '{{ config.GSC_SITE_URL }}',
        bingApiKey: '{{ config.BING_API_KEY }}', bingSiteUrl: '{{ config.BING_SITE_URL }}',
        geminiApiKey: '{{ config.GEMINI_API_KEY }}', groqApiKey: '{{ config.GROQ_API_KEY }}',
        indexnowKey: '{{ config.INDEXNOW_KEY }}',
        testingWP: false, wpStatus: '', saving: false,

        async testWP() {
            this.testingWP = true; this.wpStatus = '';
            try {
                const r = await apiPost('/api/settings/test-wp', { wp_url: this.wpUrl, wp_user: this.wpUser, wp_app_password: this.wpPassword });
                this.wpStatus = r.success ? 'ok' : 'fail';
                showToast(r.message || (r.success ? 'Connected!' : 'Failed'), r.success ? 'success' : 'error');
            } catch(e) { this.wpStatus = 'fail'; showToast('Error: ' + e.message, 'error'); }
            this.testingWP = false;
        },

        async saveAll() {
            this.saving = true;
            try {
                const r = await apiPost('/api/settings/save', {
                    wp_url: this.wpUrl, wp_user: this.wpUser, wp_app_password: this.wpPassword,
                    gemini_api_key: this.geminiApiKey, groq_api_key: this.groqApiKey,
                    google_credentials: this.googleCredentials, ga4_property_id: this.ga4PropertyId, gsc_site_url: this.gscSiteUrl,
                    bing_api_key: this.bingApiKey, bing_site_url: this.bingSiteUrl, indexnow_key: this.indexnowKey,
                });
                showToast(r.message || 'Settings saved!', r.success ? 'success' : 'error');
            } catch(e) { showToast('Error: ' + e.message, 'error'); }
            this.saving = false;
        }
    };
}
</script>
{% endblock %}