<script setup>
import { computed } from 'vue';
import { Head, Link, useForm } from '@inertiajs/vue3';
import AdminLayout from '@/Layouts/AdminLayout.vue';
import AppCard from '@/Components/ui/AppCard.vue';
import FormField from '@/Components/ui/FormField.vue';
import PrimaryButton from '@/Components/PrimaryButton.vue';

const props = defineProps({
    vendor: {
        type: Object,
        default: null,
    },
});

const isEdit = computed(() => !!props.vendor);

const form = useForm({
    name: props.vendor?.name || '',
    type: props.vendor?.type || 'msorg',
    base_url: props.vendor?.base_url || '',
    token: '',
    private_key: '',
    vtpass_api_key: '',
    vtpass_public_key: '',
    vtpass_secret_key: '',
    timeout_seconds: props.vendor?.timeout_seconds || 30,
    status: props.vendor?.status || 'active',
    webhook_enabled: props.vendor?.webhook_enabled || false,
});

const submit = () => {
    if (isEdit.value) {
        form.put(route('admin.vendors.update', props.vendor.id));
        return;
    }

    form.post(route('admin.vendors.store'));
};
</script>

<template>
    <Head :title="isEdit ? 'Edit Vendor' : 'Create Vendor'" />

    <AdminLayout>
        <template #header>
            <div class="flex items-center justify-between">
                <h2 class="text-xl font-semibold text-gray-800">{{ isEdit ? 'Edit Vendor' : 'Create Vendor' }}</h2>
                <Link :href="route('admin.vendors.index')" class="text-sm text-gray-600 hover:text-gray-900">Back</Link>
            </div>
        </template>

        <div class="mx-auto max-w-4xl px-4 py-6 sm:px-6 lg:px-8">
            <AppCard title="Vendor Credentials" subtitle="Secrets are encrypted at rest.">
                <form class="grid gap-4 sm:grid-cols-2" @submit.prevent="submit">
                    <FormField label="Name" :error="form.errors.name">
                        <input v-model="form.name" class="w-full rounded-md border-gray-300 text-sm shadow-sm" />
                    </FormField>

                    <FormField label="Type" :error="form.errors.type">
                        <select v-model="form.type" class="w-full rounded-md border-gray-300 text-sm shadow-sm">
                            <option value="msorg">MSORG</option>
                            <option value="vtbox">VTBox (Script API)</option>
                            <option value="smeplug">SMEPlug / Simhost</option>
                            <option value="vtpass">VTpass</option>
                        </select>
                    </FormField>

                    <FormField
                        label="Base URL"
                        :error="form.errors.base_url"
                        :help="form.type === 'vtpass'
                            ? 'VTpass base URL must be admin input (live: https://vtpass.com or sandbox: https://sandbox.vtpass.com).'
                            : 'Admin-defined base URL only (e.g. https://vendor.com). System appends endpoint paths like /api/data/. HTTPS only; private/local addresses are blocked.'"
                    >
                        <input
                            v-model="form.base_url"
                            class="w-full rounded-md border-gray-300 text-sm shadow-sm"
                            :placeholder="form.type === 'vtpass' ? 'https://sandbox.vtpass.com' : 'https://vendor.example.com'"
                        />
                    </FormField>

                    <FormField label="Timeout (seconds)" :error="form.errors.timeout_seconds">
                        <input v-model="form.timeout_seconds" type="number" min="5" max="120" class="w-full rounded-md border-gray-300 text-sm shadow-sm" />
                    </FormField>

                    <FormField v-if="['msorg', 'vtbox'].includes(form.type)" label="Token" :error="form.errors.token" :help="isEdit ? 'Leave blank to keep existing token.' : ''">
                        <input v-model="form.token" type="password" class="w-full rounded-md border-gray-300 text-sm shadow-sm" />
                    </FormField>

                    <template v-else-if="form.type === 'smeplug'">
                        <FormField label="Private Key" :error="form.errors.private_key" :help="isEdit ? 'Leave blank to keep existing key.' : ''">
                            <input v-model="form.private_key" type="password" class="w-full rounded-md border-gray-300 text-sm shadow-sm" />
                        </FormField>
                    </template>

                    <template v-else>
                        <FormField label="VTpass API Key" :error="form.errors.vtpass_api_key" :help="isEdit ? 'Leave blank to keep existing VTpass API key.' : 'Used as api-key header for GET and POST requests.'">
                            <input v-model="form.vtpass_api_key" type="password" class="w-full rounded-md border-gray-300 text-sm shadow-sm" />
                        </FormField>

                        <FormField label="VTpass Public Key" :error="form.errors.vtpass_public_key" :help="isEdit ? 'Leave blank to keep existing VTpass public key.' : 'Used as public-key header for GET requests.'">
                            <input v-model="form.vtpass_public_key" type="password" class="w-full rounded-md border-gray-300 text-sm shadow-sm" />
                        </FormField>

                        <FormField label="VTpass Secret Key" :error="form.errors.vtpass_secret_key" :help="isEdit ? 'Leave blank to keep existing VTpass secret key.' : 'Used as secret-key header for POST requests.'">
                            <input v-model="form.vtpass_secret_key" type="password" class="w-full rounded-md border-gray-300 text-sm shadow-sm" />
                        </FormField>
                    </template>

                    <FormField label="Status" :error="form.errors.status">
                        <select v-model="form.status" class="w-full rounded-md border-gray-300 text-sm shadow-sm">
                            <option value="active">Active</option>
                            <option value="inactive">Inactive</option>
                        </select>
                    </FormField>

                    <label v-if="form.type === 'smeplug'" class="flex items-center gap-3 sm:col-span-2">
                        <input v-model="form.webhook_enabled" type="checkbox" class="rounded border-gray-300 text-gray-900 shadow-sm" />
                        <span class="text-sm text-gray-700">Webhook enabled (SMEPlug only)</span>
                    </label>

                    <label v-else-if="form.type === 'vtpass'" class="flex items-start gap-3 rounded-lg border border-sky-200 bg-sky-50 p-3 text-sm text-sky-900 sm:col-span-2">
                        <span class="mt-0.5 font-semibold">Info</span>
                        <span>VTpass test connection uses <span class="font-mono">GET /api/service-variations?serviceID=mtn</span> with <span class="font-mono">api-key</span> + <span class="font-mono">public-key</span> headers.</span>
                    </label>

                    <label v-else class="flex items-center gap-3 sm:col-span-2">
                        <input v-model="form.webhook_enabled" type="checkbox" class="rounded border-gray-300 text-gray-900 shadow-sm" disabled />
                        <span class="text-sm text-gray-400">Webhook setting not used for MSORG / VTBox</span>
                    </label>

                    <div class="sm:col-span-2 flex justify-end">
                        <PrimaryButton :disabled="form.processing">
                            {{ form.processing ? 'Saving...' : 'Save Vendor' }}
                        </PrimaryButton>
                    </div>
                </form>
            </AppCard>
        </div>
    </AdminLayout>
</template>
