<template>
  <div class="py-12">
    <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
        <h3 class="text-lg font-medium text-gray-900 mb-6">Payment Settings (Stripe)</h3>
        
        <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg p-6">
            <form @submit.prevent="saveSettings" class="space-y-6 max-w-2xl">
                
                <div v-if="successMessage" class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded relative">
                    {{ successMessage }}
                </div>

                <div>
                    <label class="block text-sm font-medium leading-6 text-gray-900">Mode</label>
                    <div class="mt-2 flex gap-4">
                        <label class="inline-flex items-center">
                            <input type="radio" v-model="form.mode" value="sandbox" class="form-radio text-indigo-600">
                            <span class="ml-2">Sandbox (Mock / Test)</span>
                        </label>
                        <label class="inline-flex items-center">
                            <input type="radio" v-model="form.mode" value="live" class="form-radio text-indigo-600">
                            <span class="ml-2">Live</span>
                        </label>
                    </div>
                </div>

                <div class="border-t pt-4">
                    <h4 class="text-sm font-bold text-gray-700 mb-4">Test Keys</h4>
                    <div class="space-y-4">
                         <div>
                            <label class="block text-sm font-medium leading-6 text-gray-900">Test Public Key</label>
                            <input type="text" v-model="form.test_pk" class="mt-2 block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300">
                        </div>
                        <div>
                            <label class="block text-sm font-medium leading-6 text-gray-900">Test Secret Key</label>
                            <input type="password" v-model="form.test_sk" class="mt-2 block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300">
                        </div>
                    </div>
                </div>

                <div class="border-t pt-4">
                    <h4 class="text-sm font-bold text-gray-700 mb-4">Live Keys</h4>
                    <div class="space-y-4">
                         <div>
                            <label class="block text-sm font-medium leading-6 text-gray-900">Live Public Key</label>
                            <input type="text" v-model="form.live_pk" class="mt-2 block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300">
                        </div>
                        <div>
                            <label class="block text-sm font-medium leading-6 text-gray-900">Live Secret Key</label>
                            <input type="password" v-model="form.live_sk" class="mt-2 block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300">
                        </div>
                    </div>
                </div>

                <div>
                    <button type="submit" class="rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500">Save Settings</button>
                </div>
            </form>
        </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import axios from 'axios';

const successMessage = ref('');
const form = reactive({
    mode: 'sandbox',
    test_pk: '',
    test_sk: '',
    live_pk: '',
    live_sk: '',
});

const fetchSettings = async () => {
    try {
        const response = await axios.get('/api/admin/settings/stripe');
        const settings = response.data;
        if (settings.stripe_mode) form.mode = settings.stripe_mode;
        if (settings.stripe_test_public_key) form.test_pk = settings.stripe_test_public_key;
        if (settings.stripe_test_secret_key) form.test_sk = settings.stripe_test_secret_key;
        if (settings.stripe_live_public_key) form.live_pk = settings.stripe_live_public_key;
        if (settings.stripe_live_secret_key) form.live_sk = settings.stripe_live_secret_key;
    } catch (error) {
        console.error('Failed to fetch settings');
    }
};

const saveSettings = async () => {
    try {
        await axios.post('/api/admin/settings/stripe', {
            mode: form.mode,
            test_pk: form.test_pk,
            test_sk: form.test_sk,
            live_pk: form.live_pk,
            live_sk: form.live_sk,
        });
        successMessage.value = 'Settings updated successfully!';
        setTimeout(() => successMessage.value = '', 3000);
    } catch (error) {
        alert('Failed to save settings');
    }
};

onMounted(() => {
    fetchSettings();
});
</script>
