<template>
    <div class="space-y-6">
        <Head title="HSM Settings" />

        <div class="rounded-2xl border border-slate-200 bg-white p-6">
            <h3 class="text-lg font-semibold">HSM Settings</h3>
            <p class="mt-2 text-xs text-slate-500">
                Connection and cryptographic key references the API uses for PIN, CVV and cryptogram operations.
                Only one profile can be active at a time.
            </p>

            <form class="mt-6 grid grid-cols-1 gap-4 md:grid-cols-3" @submit.prevent="submit">
                <div>
                    <label class="mb-1 block text-xs font-medium text-slate-600">Profile 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">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">API URL</label>
                    <input v-model="form.api_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">Header</label>
                    <input v-model="form.header" type="text" class="w-full rounded-lg border border-slate-200 px-3 py-2 text-xs" />
                </div>
                <div v-for="key in keyFields" :key="key.name">
                    <label class="mb-1 block text-xs font-medium text-slate-600">{{ key.label }}</label>
                    <input v-model="form[key.name]" 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">Decimalization table</label>
                    <input v-model="form.decimalization_table" type="text" class="w-full rounded-lg border border-slate-200 px-3 py-2 font-mono text-xs" />
                </div>
                <div class="flex items-center gap-2">
                    <input id="hsm_active" v-model="form.is_active" type="checkbox" class="rounded border-slate-300" />
                    <label for="hsm_active" class="text-xs font-medium text-slate-600">Active</label>
                </div>
                <div class="md:col-span-3">
                    <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">
                        Save profile
                    </button>
                </div>
            </form>
        </div>

        <div class="rounded-2xl border border-slate-200 bg-white p-6">
            <h4 class="text-sm font-semibold">Saved profiles</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">Host</th>
                            <th class="px-3 py-2">Port</th>
                            <th class="px-3 py-2">API URL</th>
                            <th class="px-3 py-2">Sign-on</th>
                            <th class="px-3 py-2">Active</th>
                            <th class="px-3 py-2"></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="row in settings" :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 text-slate-500">{{ row.host || '—' }}</td>
                            <td class="px-3 py-2 text-slate-500">{{ row.port || '—' }}</td>
                            <td class="px-3 py-2 text-slate-500">{{ row.api_url || '—' }}</td>
                            <td class="px-3 py-2">
                                <div v-if="row.signed_on_at" class="text-[11px]">
                                    <span class="rounded-full px-2 py-0.5"
                                        :class="row.last_signon_rc === '00' ? 'bg-emerald-50 text-emerald-700' : 'bg-rose-50 text-rose-700'">
                                        RC {{ row.last_signon_rc || '—' }}
                                    </span>
                                    <div class="mt-1 text-slate-400">
                                        KVC {{ row.session_kvc || '—' }} · {{ row.signed_on_at }}
                                    </div>
                                </div>
                                <span v-else class="text-[11px] text-slate-400">Not signed on</span>
                            </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="!settings.length">
                            <td class="px-3 py-6 text-center text-slate-400" colspan="7">No HSM profiles configured.</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</template>

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

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

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

const keyFields = [
    { name: 'cvk', label: 'CVK (card verification key)' },
    { name: 'pvk', label: 'PVK (pin verification key)' },
    { name: 'zpk', label: 'ZPK (zone pin key)' },
    { name: 'zmk', label: 'ZMK (zone master key)' },
    { name: 'mk_ac', label: 'MK-AC (cryptogram master key)' },
];

const form = useForm({
    name: '',
    host: '',
    port: '',
    api_url: '',
    header: '',
    meta_data: '',
    cvk: '',
    pvk: '',
    zpk: '',
    zmk: '',
    mk_ac: '',
    decimalization_table: '',
    is_active: false,
});

function edit(row) {
    form.name = row.name;
    form.host = row.host ?? '';
    form.port = row.port ?? '';
    form.api_url = row.api_url ?? '';
    form.header = row.header ?? '';
    form.meta_data = row.meta_data ?? '';
    form.decimalization_table = row.decimalization_table ?? '';
    form.is_active = !!row.is_active;
}

function submit() {
    form.post('/settings/hsm', { preserveScroll: true });
}
</script>
