<template>
    <div class="space-y-6">
        <Head title="Acquirer Connections" />

        <div class="rounded-2xl border border-slate-200 bg-white p-6">
            <h3 class="text-lg font-semibold">Acquirer Connections</h3>
            <p class="mt-2 text-xs text-slate-500">
                Upstream hosts the API forwards ACQUIRER transactions to. The <span class="font-mono">code</span>
                is the routing key (acquirer institution id or BIN prefix) matched against incoming messages.
            </p>

            <form class="mt-6 grid grid-cols-1 gap-4 md:grid-cols-4" @submit.prevent="submit">
                <div>
                    <label class="mb-1 block text-xs font-medium text-slate-600">Name</label>
                    <input v-model="form.name" type="text" required class="w-full rounded-lg border border-slate-200 px-3 py-2 text-xs" />
                </div>
                <div>
                    <label class="mb-1 block text-xs font-medium text-slate-600">Routing code</label>
                    <input v-model="form.code" type="text" required class="w-full rounded-lg border border-slate-200 px-3 py-2 font-mono text-xs" />
                </div>
                <div>
                    <label class="mb-1 block text-xs font-medium text-slate-600">Transport</label>
                    <select v-model="form.transport" class="w-full rounded-lg border border-slate-200 px-3 py-2 text-xs">
                        <option value="tcp">TCP (raw ISO-8583)</option>
                        <option value="http">HTTP</option>
                    </select>
                </div>
                <div>
                    <label class="mb-1 block text-xs font-medium text-slate-600">NII</label>
                    <input v-model="form.nii" type="text" class="w-full rounded-lg border border-slate-200 px-3 py-2 font-mono text-xs" />
                </div>
                <div>
                    <label class="mb-1 block text-xs font-medium text-slate-600">Host</label>
                    <input v-model="form.host" type="text" class="w-full rounded-lg border border-slate-200 px-3 py-2 text-xs" />
                </div>
                <div>
                    <label class="mb-1 block text-xs font-medium text-slate-600">Port</label>
                    <input v-model="form.port" type="number" class="w-full rounded-lg border border-slate-200 px-3 py-2 text-xs" />
                </div>
                <div class="md:col-span-2">
                    <label class="mb-1 block text-xs font-medium text-slate-600">URL (HTTP transport)</label>
                    <input v-model="form.url" type="text" class="w-full rounded-lg border border-slate-200 px-3 py-2 text-xs" />
                </div>
                <div>
                    <label class="mb-1 block text-xs font-medium text-slate-600">Timeout (ms)</label>
                    <input v-model="form.timeout_ms" type="number" class="w-full rounded-lg border border-slate-200 px-3 py-2 text-xs" />
                </div>
                <div>
                    <label class="mb-1 block text-xs font-medium text-slate-600">Header length (bytes)</label>
                    <input v-model="form.header_length" type="number" min="0" max="4" class="w-full rounded-lg border border-slate-200 px-3 py-2 text-xs" />
                </div>
                <div class="flex items-center gap-2">
                    <input id="acq_active" v-model="form.is_active" type="checkbox" class="rounded border-slate-300" />
                    <label for="acq_active" class="text-xs font-medium text-slate-600">Active</label>
                </div>
                <div class="md:col-span-4 flex gap-2">
                    <button type="submit" :disabled="form.processing"
                        class="rounded-lg bg-slate-700 px-4 py-2 text-xs font-medium text-white hover:bg-slate-600 disabled:opacity-50">
                        {{ editingId ? 'Update connection' : 'Create connection' }}
                    </button>
                    <button v-if="editingId" type="button" class="rounded-lg border border-slate-200 px-4 py-2 text-xs font-medium text-slate-600" @click="resetForm">
                        Cancel
                    </button>
                </div>
            </form>
        </div>

        <div class="rounded-2xl border border-slate-200 bg-white p-6">
            <h4 class="text-sm font-semibold">Configured connections</h4>
            <div class="mt-4 overflow-x-auto">
                <table class="min-w-full text-left text-xs">
                    <thead class="text-slate-500">
                        <tr>
                            <th class="px-3 py-2">Name</th>
                            <th class="px-3 py-2">Code</th>
                            <th class="px-3 py-2">Transport</th>
                            <th class="px-3 py-2">Endpoint</th>
                            <th class="px-3 py-2">NII</th>
                            <th class="px-3 py-2">Active</th>
                            <th class="px-3 py-2"></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="row in connections" :key="row.id" class="border-t border-slate-100">
                            <td class="px-3 py-2 font-medium text-slate-700">{{ row.name }}</td>
                            <td class="px-3 py-2 font-mono text-slate-500">{{ row.code }}</td>
                            <td class="px-3 py-2 uppercase text-slate-500">{{ row.transport }}</td>
                            <td class="px-3 py-2 text-slate-500">
                                {{ row.transport === 'http' ? (row.url || '—') : ((row.host || '—') + ':' + (row.port || '—')) }}
                            </td>
                            <td class="px-3 py-2 font-mono text-slate-500">{{ row.nii || '—' }}</td>
                            <td class="px-3 py-2">
                                <span class="rounded-full px-2 py-0.5 text-[11px]" :class="row.is_active ? 'bg-emerald-50 text-emerald-700' : 'bg-slate-100 text-slate-500'">
                                    {{ row.is_active ? 'Active' : 'Inactive' }}
                                </span>
                            </td>
                            <td class="px-3 py-2">
                                <button type="button" class="text-xs text-slate-600 hover:underline" @click="edit(row)">Edit</button>
                            </td>
                        </tr>
                        <tr v-if="!connections.length">
                            <td class="px-3 py-6 text-center text-slate-400" colspan="7">No acquirer connections configured.</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</template>

<script setup>
import { Head, useForm } from '@inertiajs/vue3';
import { ref } from 'vue';
import AuthenticatedLayout from '../../Layouts/AuthenticatedLayout.vue';

defineOptions({
    layout: (h, page) => h(AuthenticatedLayout, { title: 'Acquirer Connections' }, () => page),
});

defineProps({
    connections: { type: Array, default: () => [] },
});

const editingId = ref(null);

const form = useForm({
    name: '',
    code: '',
    transport: 'tcp',
    host: '',
    port: '',
    url: '',
    timeout_ms: 30000,
    header_length: 2,
    nii: '',
    is_active: false,
});

function edit(row) {
    editingId.value = row.id;
    form.name = row.name;
    form.code = row.code;
    form.transport = row.transport ?? 'tcp';
    form.host = row.host ?? '';
    form.port = row.port ?? '';
    form.url = row.url ?? '';
    form.timeout_ms = row.timeout_ms ?? 30000;
    form.header_length = row.header_length ?? 2;
    form.nii = row.nii ?? '';
    form.is_active = !!row.is_active;
}

function resetForm() {
    editingId.value = null;
    form.reset();
}

function submit() {
    if (editingId.value) {
        form.put(`/settings/acquirer-connections/${editingId.value}`, { preserveScroll: true, onSuccess: resetForm });
    } else {
        form.post('/settings/acquirer-connections', { preserveScroll: true, onSuccess: resetForm });
    }
}
</script>
