{% extends "base.html" %}

{% block title %}Secrets & Credentials - Dango{% endblock %}

{% block content %}
<main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 sm:py-8">
    <div x-data="secretsPage()" x-init="init()">
        <!-- Header -->
        <div class="flex items-center justify-between mb-6">
            <h2 class="text-xl font-bold text-gray-900">Secrets & Credentials</h2>
            <button @click="showAddModal = true"
                    class="px-4 py-2 bg-dango-600 text-white rounded-md hover:bg-dango-700 text-sm font-medium transition-colors">
                Add Variable
            </button>
        </div>

        <!-- Error banner -->
        <div x-show="error" x-cloak class="mb-4 p-3 bg-red-50 border border-red-200 rounded-md">
            <p class="text-sm text-red-700" x-text="error"></p>
        </div>

        <!-- Success banner -->
        <div x-show="success" x-cloak class="mb-4 p-3 bg-green-50 border border-green-200 rounded-md">
            <p class="text-sm text-green-700" x-text="success"></p>
        </div>

        <!-- URL params feedback -->
        <template x-if="connectedSource">
            <div class="mb-4 p-3 bg-green-50 border border-green-200 rounded-md">
                <p class="text-sm text-green-700">
                    Successfully connected <span class="font-medium" x-text="connectedSource"></span>.
                </p>
            </div>
        </template>
        <template x-if="connectError">
            <div class="mb-4 p-3 bg-red-50 border border-red-200 rounded-md">
                <p class="text-sm text-red-700" x-text="connectErrorMessage"></p>
            </div>
        </template>

        <!-- Section 1: Environment Variables -->
        <div class="mb-8">
            <h3 class="text-lg font-medium text-gray-900 mb-3">Environment Variables</h3>
            <div class="bg-white shadow rounded-lg overflow-hidden">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Key</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Value</th>
                            <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        <template x-for="v in envVars" :key="v.key">
                            <tr>
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-mono text-gray-900" x-text="v.key"></td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">***</td>
                                <td class="px-6 py-4 whitespace-nowrap text-right text-sm space-x-2">
                                    <button @click="openEditModal(v.key)"
                                            class="text-dango-600 hover:text-dango-800 font-medium">Edit</button>
                                    <button @click="confirmDeleteEnv(v.key)"
                                            class="text-red-600 hover:text-red-800 font-medium">Delete</button>
                                </td>
                            </tr>
                        </template>
                        <template x-if="envVars.length === 0">
                            <tr><td colspan="3" class="px-6 py-8 text-center text-sm text-gray-500">No environment variables set.</td></tr>
                        </template>
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Section 2: OAuth Connections -->
        <div>
            <h3 class="text-lg font-medium text-gray-900 mb-3">OAuth Connections</h3>

            <!-- Connected sources -->
            <div class="space-y-3 mb-4">
                <template x-for="cred in oauthCredentials" :key="cred.source_type">
                    <div class="bg-white shadow rounded-lg p-4 flex items-center justify-between">
                        <div>
                            <div class="text-sm font-medium text-gray-900" x-text="formatSourceType(cred.source_type)"></div>
                            <div class="text-xs text-gray-500">
                                <span x-text="cred.provider"></span>
                                <template x-if="cred.identifier"> &mdash; <span x-text="cred.identifier"></span></template>
                            </div>
                            <div class="text-xs text-gray-400 mt-1">
                                Connected <span x-text="cred.connected_at ? new Date(cred.connected_at).toLocaleDateString() : ''"></span>
                                <template x-if="cred.expires_at">
                                    <span :class="cred.is_expired ? 'text-red-600' : (cred.days_until_expiry <= 7 ? 'text-yellow-600' : '')">
                                        &middot; <span x-text="cred.is_expired ? 'Expired' : 'Expires ' + new Date(cred.expires_at).toLocaleDateString()"></span>
                                    </span>
                                </template>
                            </div>
                            <template x-if="cred.valid === false">
                                <div class="mt-2">
                                    <p class="text-xs text-red-600 font-medium" x-text="cred.error"></p>
                                    <p class="text-xs text-gray-500 mt-1">
                                        Re-authenticate: <code class="bg-gray-100 px-1 rounded">dango oauth <span x-text="cred.source_type"></span></code>
                                    </p>
                                </div>
                            </template>
                        </div>
                        <div class="flex space-x-2">
                            <template x-if="cred.valid === false || cred.is_expired || (cred.days_until_expiry !== null && cred.days_until_expiry <= 7)">
                                <button @click="connectOAuth(cred.source_type)"
                                        class="px-3 py-1.5 text-sm text-white bg-blue-600 rounded-md hover:bg-blue-700">
                                    Reconnect
                                </button>
                            </template>
                            <button @click="confirmDisconnectOAuth(cred.source_type)"
                                    class="px-3 py-1.5 text-sm text-red-600 border border-red-200 rounded-md hover:bg-red-50">
                                Disconnect
                            </button>
                        </div>
                    </div>
                </template>
            </div>

            <!-- Available sources to connect -->
            <template x-if="isLocalhost && oauthCredentials.length === 0">
                <div class="bg-white shadow rounded-lg p-4">
                    <p class="text-sm text-gray-500">OAuth connections require a domain with HTTPS. Use <code class="bg-gray-100 px-1 rounded">dango oauth setup</code> for local OAuth.</p>
                </div>
            </template>
            <template x-if="isLocalhost && oauthCredentials.length > 0">
                <div class="bg-white shadow rounded-lg p-4">
                    <p class="text-sm text-gray-500">To add more OAuth connections, use <code class="bg-gray-100 px-1 rounded">dango oauth setup</code>.</p>
                </div>
            </template>
            <template x-if="!isLocalhost">
                <div class="bg-white shadow rounded-lg p-4">
                    <p class="text-sm text-gray-500 mb-3">Connect a data source via OAuth:</p>
                    <div class="flex flex-wrap gap-2">
                        <template x-for="src in availableSources" :key="src.type">
                            <button @click="connectOAuth(src.type)"
                                    class="px-3 py-1.5 text-sm bg-gray-100 text-gray-700 rounded-md hover:bg-gray-200 transition-colors">
                                Connect <span x-text="src.label"></span>
                            </button>
                        </template>
                    </div>
                </div>
            </template>
        </div>

        <!-- Add / Edit Env Var Modal -->
        <div x-show="showAddModal" x-cloak class="fixed inset-0 z-50 overflow-y-auto" aria-modal="true">
            <div class="flex items-center justify-center min-h-screen px-4">
                <div class="fixed inset-0 bg-gray-500 bg-opacity-75" @click="showAddModal = false"></div>
                <div class="bg-white rounded-lg shadow-xl max-w-md w-full p-6 relative z-10">
                    <h3 class="text-lg font-medium text-gray-900 mb-4" x-text="editKey ? 'Edit Variable' : 'Add Variable'"></h3>
                    <form @submit.prevent="saveEnvVar()">
                        <div class="mb-4">
                            <label class="block text-sm font-medium text-gray-700 mb-1">Key</label>
                            <input type="text" x-model="formKey" :readonly="!!editKey" required
                                   class="w-full px-3 py-2 border border-gray-300 rounded-md font-mono focus:outline-none focus:ring-2 focus:ring-dango-500"
                                   :class="editKey ? 'bg-gray-50' : ''">
                        </div>
                        <div class="mb-4">
                            <label class="block text-sm font-medium text-gray-700 mb-1">Value</label>
                            <input type="text" x-model="formValue" required
                                   class="w-full px-3 py-2 border border-gray-300 rounded-md font-mono focus:outline-none focus:ring-2 focus:ring-dango-500">
                        </div>
                        <div class="flex justify-end space-x-3">
                            <button type="button" @click="closeAddModal()"
                                    class="px-4 py-2 text-sm text-gray-700 bg-gray-100 rounded-md hover:bg-gray-200">Cancel</button>
                            <button type="submit" :disabled="saving"
                                    class="px-4 py-2 text-sm text-white bg-dango-600 rounded-md hover:bg-dango-700 disabled:opacity-50">
                                <span x-show="!saving">Save</span>
                                <span x-show="saving" x-cloak>Saving...</span>
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- Delete Env Var Confirm Modal -->
        <div x-show="showDeleteModal" x-cloak class="fixed inset-0 z-50 overflow-y-auto" aria-modal="true">
            <div class="flex items-center justify-center min-h-screen px-4">
                <div class="fixed inset-0 bg-gray-500 bg-opacity-75" @click="showDeleteModal = false"></div>
                <div class="bg-white rounded-lg shadow-xl max-w-md w-full p-6 relative z-10">
                    <h3 class="text-lg font-medium text-red-600 mb-2">Delete Variable</h3>
                    <p class="text-sm text-gray-500 mb-4">
                        Delete <span class="font-mono font-medium" x-text="deleteKey"></span>? This cannot be undone.
                    </p>
                    <div class="flex justify-end space-x-3">
                        <button @click="showDeleteModal = false"
                                class="px-4 py-2 text-sm text-gray-700 bg-gray-100 rounded-md hover:bg-gray-200">Cancel</button>
                        <button @click="deleteEnvVar()" :disabled="saving"
                                class="px-4 py-2 text-sm text-white bg-red-600 rounded-md hover:bg-red-700 disabled:opacity-50">Delete</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Disconnect OAuth Confirm Modal -->
        <div x-show="showDisconnectModal" x-cloak class="fixed inset-0 z-50 overflow-y-auto" aria-modal="true">
            <div class="flex items-center justify-center min-h-screen px-4">
                <div class="fixed inset-0 bg-gray-500 bg-opacity-75" @click="showDisconnectModal = false"></div>
                <div class="bg-white rounded-lg shadow-xl max-w-md w-full p-6 relative z-10">
                    <h3 class="text-lg font-medium text-red-600 mb-2">Disconnect Source</h3>
                    <p class="text-sm text-gray-500 mb-4">
                        Disconnect <span class="font-medium" x-text="formatSourceType(disconnectSource)"></span>?
                        You will need to re-authenticate to sync this source again.
                    </p>
                    <div class="flex justify-end space-x-3">
                        <button @click="showDisconnectModal = false"
                                class="px-4 py-2 text-sm text-gray-700 bg-gray-100 rounded-md hover:bg-gray-200">Cancel</button>
                        <button @click="disconnectOAuth()" :disabled="saving"
                                class="px-4 py-2 text-sm text-white bg-red-600 rounded-md hover:bg-red-700 disabled:opacity-50">Disconnect</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>
{% endblock %}

{% block scripts %}
<script>
function secretsPage() {
    const headers = {'Content-Type': 'application/json', 'X-Requested-With': 'XMLHttpRequest'};
    const params = new URLSearchParams(window.location.search);
    return {
        envVars: [], oauthCredentials: [],
        isLocalhost: ['localhost', '127.0.0.1', '[::1]'].includes(window.location.hostname) || window.location.hostname.endsWith('.local'),
        error: '', success: '',
        showAddModal: false, formKey: '', formValue: '', editKey: null, saving: false,
        showDeleteModal: false, deleteKey: '',
        showDisconnectModal: false, disconnectSource: '',
        connectedSource: params.get('connected'),
        connectError: params.get('error'),
        connectErrorMessage: {
            'state_mismatch': 'OAuth state mismatch. Please try again.',
            'provider_denied': 'The OAuth provider denied the request.',
            'session_expired': 'Your session expired during the OAuth flow. Please log in and try again.',
            'exchange_failed': 'Failed to exchange OAuth tokens. Please try again.',
            'missing_credentials': 'Client credentials are not configured. Set them via the environment variables above.',
            'no_domain': 'A domain with HTTPS is required for OAuth. Configure one first.',
            'unsupported': 'This source type is not supported for OAuth.',
        }[params.get('error')] || params.get('error') || '',
        availableSources: [
            {type: 'google_ads', label: 'Google Ads'},
            {type: 'google_analytics', label: 'Google Analytics'},
            {type: 'google_sheets', label: 'Google Sheets'},
            {type: 'facebook_ads', label: 'Facebook Ads'},
        ],

        async init() {
            await Promise.all([this.loadSecrets(), this.loadOAuth()]);
        },

        async loadSecrets() {
            try {
                const res = await fetch('/api/secrets', {headers});
                if (!res.ok) throw new Error('Failed to load secrets');
                const data = await res.json();
                this.envVars = data.env_vars || [];
            } catch (e) { this.error = e.message; }
        },

        async loadOAuth() {
            try {
                const res = await fetch('/api/secrets/oauth', {headers});
                if (!res.ok) throw new Error('Failed to load OAuth credentials');
                this.oauthCredentials = await res.json();
            } catch (e) { this.error = e.message; }
        },

        openEditModal(key) {
            this.editKey = key;
            this.formKey = key;
            this.formValue = '';
            this.showAddModal = true;
        },

        closeAddModal() {
            this.showAddModal = false;
            this.editKey = null;
            this.formKey = '';
            this.formValue = '';
        },

        async saveEnvVar() {
            this.saving = true; this.error = '';
            try {
                const res = await fetch('/api/secrets', {
                    method: 'POST', headers,
                    body: JSON.stringify({key: this.formKey, value: this.formValue})
                });
                const data = await res.json();
                if (!res.ok) { this.error = data.message; this.saving = false; return; }
                this.closeAddModal();
                this.success = data.message;
                setTimeout(() => this.success = '', 3000);
                await this.loadSecrets();
            } catch (e) { this.error = 'Failed to save variable'; }
            this.saving = false;
        },

        confirmDeleteEnv(key) {
            this.deleteKey = key;
            this.showDeleteModal = true;
        },

        async deleteEnvVar() {
            this.saving = true; this.error = '';
            try {
                const res = await fetch(`/api/secrets/${encodeURIComponent(this.deleteKey)}`, {
                    method: 'DELETE', headers
                });
                const data = await res.json();
                if (!res.ok) { this.error = data.message; this.saving = false; return; }
                this.showDeleteModal = false;
                this.success = data.message;
                setTimeout(() => this.success = '', 3000);
                await this.loadSecrets();
            } catch (e) { this.error = 'Failed to delete variable'; }
            this.saving = false;
        },

        connectOAuth(sourceType) {
            window.location.href = `/oauth/connect/${sourceType}`;
        },

        confirmDisconnectOAuth(sourceType) {
            this.disconnectSource = sourceType;
            this.showDisconnectModal = true;
        },

        async disconnectOAuth() {
            this.saving = true; this.error = '';
            try {
                const res = await fetch(`/api/secrets/oauth/${this.disconnectSource}`, {
                    method: 'DELETE', headers
                });
                const data = await res.json();
                if (!res.ok) { this.error = data.message; this.saving = false; return; }
                this.showDisconnectModal = false;
                this.success = data.message;
                setTimeout(() => this.success = '', 3000);
                await this.loadOAuth();
            } catch (e) { this.error = 'Failed to disconnect source'; }
            this.saving = false;
        },

        formatSourceType(st) {
            if (!st) return '';
            return st.replace(/_/g, ' ').replace(/\b\w/g, c => c.toUpperCase());
        }
    }
}
</script>
{% endblock %}