<template>
    <div class="space-y-8">
        <Head title="Client Management" />

        <section class="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
            <StatCard
                title="Total Clients"
                :value="stats.totalClients"
                hint="All onboarded client profiles."
            />
            <StatCard
                title="Verified KYC"
                :value="stats.verifiedKyc"
                hint="Clients cleared for issuance."
            />
            <StatCard
                title="Pending KYC"
                :value="stats.pendingKyc"
                hint="Awaiting verification checks."
            />
        </section>

        <section
            v-if="canCreateClient"
            class="rounded-2xl border border-slate-200 bg-white p-6"
        >
            <div class="flex flex-wrap items-start justify-between gap-4">
                <div>
                    <h3 class="text-lg font-semibold">Register Client</h3>
                    <p class="mt-1 text-xs text-slate-500">
                        Capture basic client information. Client code is
                        auto-generated.
                    </p>
                </div>
                <div class="flex flex-col items-end gap-2 text-xs text-slate-500">
                    <div>
                        Default status:
                        <span class="font-semibold text-slate-700">Pending</span>
                    </div>
                    <button
                        class="rounded-lg bg-slate-900 px-4 py-2 text-xs font-semibold text-white"
                        type="button"
                        @click="openCreate"
                    >
                        Create Client
                    </button>
                </div>
            </div>
        </section>

        <div
            v-if="showModal"
            class="fixed inset-0 z-50 flex items-center justify-center bg-slate-900/50 p-4"
        >
            <div class="w-full max-w-3xl rounded-2xl bg-white p-6">
                <div class="flex items-start justify-between gap-4">
                    <div>
                        <h3 class="text-lg font-semibold">Create Client</h3>
                        <p class="text-sm text-slate-500">
                            Capture basic client information. Client code is
                            auto-generated.
                        </p>
                    </div>
                    <button
                        class="rounded-lg border border-slate-200 px-2 py-1 text-xs text-slate-500"
                        type="button"
                        @click="closeModal"
                    >
                        Close
                    </button>
                </div>

                <form class="mt-6 grid gap-4 md:grid-cols-2" @submit.prevent="submit">
                    <div>
                        <label class="text-sm font-medium">Client Type</label>
                        <select
                            v-model="form.type"
                            class="mt-2 w-full rounded-lg border border-slate-200 px-3 py-2 text-sm"
                        >
                            <option value="individual">Individual</option>
                            <option value="corporate">Corporate</option>
                        </select>
                        <p v-if="form.errors.type" class="mt-1 text-xs text-red-600">
                            {{ form.errors.type }}
                        </p>
                    </div>
                    <div>
                        <label class="text-sm font-medium">Birth Date</label>
                        <input
                            v-model="form.birth_date"
                            type="date"
                            class="mt-2 w-full rounded-lg border border-slate-200 px-3 py-2 text-sm"
                        />
                        <p
                            v-if="form.errors.birth_date"
                            class="mt-1 text-xs text-red-600"
                        >
                            {{ form.errors.birth_date }}
                        </p>
                    </div>
                    <div>
                        <label class="text-sm font-medium">First Name</label>
                        <input
                            v-model="form.first_name"
                            type="text"
                            class="mt-2 w-full rounded-lg border border-slate-200 px-3 py-2 text-sm"
                            placeholder="First name"
                        />
                        <p
                            v-if="form.errors.first_name"
                            class="mt-1 text-xs text-red-600"
                        >
                            {{ form.errors.first_name }}
                        </p>
                    </div>
                    <div>
                        <label class="text-sm font-medium">Last Name</label>
                        <input
                            v-model="form.last_name"
                            type="text"
                            class="mt-2 w-full rounded-lg border border-slate-200 px-3 py-2 text-sm"
                            placeholder="Last name"
                        />
                        <p
                            v-if="form.errors.last_name"
                            class="mt-1 text-xs text-red-600"
                        >
                            {{ form.errors.last_name }}
                        </p>
                    </div>
                    <div>
                        <label class="text-sm font-medium">Email</label>
                        <input
                            v-model="form.email"
                            type="email"
                            class="mt-2 w-full rounded-lg border border-slate-200 px-3 py-2 text-sm"
                            placeholder="name@example.com"
                        />
                        <p v-if="form.errors.email" class="mt-1 text-xs text-red-600">
                            {{ form.errors.email }}
                        </p>
                    </div>
                    <div>
                        <label class="text-sm font-medium">Mobile</label>
                        <input
                            v-model="form.mobile"
                            type="text"
                            class="mt-2 w-full rounded-lg border border-slate-200 px-3 py-2 text-sm"
                            placeholder="+234..."
                        />
                        <p v-if="form.errors.mobile" class="mt-1 text-xs text-red-600">
                            {{ form.errors.mobile }}
                        </p>
                    </div>
                    <div class="md:col-span-2">
                        <label class="text-sm font-medium">Address</label>
                        <textarea
                            v-model="form.address"
                            rows="3"
                            class="mt-2 w-full rounded-lg border border-slate-200 px-3 py-2 text-sm"
                            placeholder="Residential address"
                        ></textarea>
                        <p v-if="form.errors.address" class="mt-1 text-xs text-red-600">
                            {{ form.errors.address }}
                        </p>
                    </div>
                    <div class="md:col-span-2 flex justify-end gap-2">
                        <button
                            class="rounded-lg border border-slate-200 px-4 py-2 text-xs font-semibold text-slate-700"
                            type="button"
                            @click="closeModal"
                        >
                            Cancel
                        </button>
                        <button
                            class="rounded-lg bg-slate-900 px-4 py-2 text-xs font-semibold text-white"
                            type="submit"
                            :disabled="form.processing"
                        >
                            Create Client
                        </button>
                    </div>
                </form>
            </div>
        </div>

        <section class="grid gap-6 lg:grid-cols-3">
            <div class="lg:col-span-2">
                <div class="rounded-2xl border border-slate-200 bg-white p-6">
                    <div class="flex items-center justify-between">
                        <div>
                            <h3 class="text-lg font-semibold">
                                Client Activity
                            </h3>
                            <p class="text-xs text-slate-500">
                                Recent onboarding and profile changes.
                            </p>
                        </div>
                    </div>
                    <div class="mt-4 overflow-hidden rounded-xl border border-slate-100">
                        <table class="w-full text-left text-xs">
                            <thead class="bg-slate-50 text-slate-500">
                                <tr>
                                    <th class="px-4 py-3">Time</th>
                                    <th class="px-4 py-3">Action</th>
                                    <th class="px-4 py-3">Reference</th>
                                    <th class="px-4 py-3">User</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr
                                    v-for="row in activities"
                                    :key="row.id"
                                    class="border-t border-slate-100"
                                >
                                    <td class="px-4 py-3 text-slate-500">
                                        {{ row.created_at || '—' }}
                                    </td>
                                    <td class="px-4 py-3 font-medium">
                                        {{ row.action }}
                                    </td>
                                    <td class="px-4 py-3 text-slate-500">
                                        {{ row.entity_id || '—' }}
                                    </td>
                                    <td class="px-4 py-3 text-slate-500">
                                        {{ row.user }}
                                    </td>
                                </tr>
                                <tr v-if="activities.length === 0">
                                    <td
                                        class="px-4 py-6 text-center text-xs text-slate-400"
                                        colspan="4"
                                    >
                                        No client activity has been logged yet.
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div>
                <div class="rounded-2xl border border-slate-200 bg-white p-6">
                    <h3 class="text-lg font-semibold">KYC Progress</h3>
                    <p class="mt-2 text-xs text-slate-500">
                        Track verification status before card issuance.
                    </p>
                    <div class="mt-4 space-y-3 text-xs text-slate-500">
                        <div class="flex items-center justify-between">
                            <span>Verified</span>
                            <span class="font-semibold text-slate-700">
                                {{ stats.verifiedKyc }}
                            </span>
                        </div>
                        <div class="flex items-center justify-between">
                            <span>Pending</span>
                            <span class="font-semibold text-slate-700">
                                {{ stats.pendingKyc }}
                            </span>
                        </div>
                        <div class="flex items-center justify-between">
                            <span>Total Clients</span>
                            <span class="font-semibold text-slate-700">
                                {{ stats.totalClients }}
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
</template>

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

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

defineProps({
    stats: {
        type: Object,
        default: () => ({
            totalClients: 0,
            verifiedKyc: 0,
            pendingKyc: 0,
        }),
    },
    activities: {
        type: Array,
        default: () => [],
    },
    canCreateClient: {
        type: Boolean,
        default: false,
    },
});

const initialForm = {
    type: 'individual',
    first_name: '',
    last_name: '',
    birth_date: '',
    email: '',
    mobile: '',
    address: '',
};

const form = useForm({ ...initialForm });
const showModal = ref(false);

const openCreate = () => {
    form.reset();
    form.clearErrors();
    form.type = 'individual';
    showModal.value = true;
};

const closeModal = () => {
    showModal.value = false;
};

const submit = () => {
    form.post('/clients', {
        preserveScroll: true,
        onSuccess: () => {
            form.reset();
            form.type = 'individual';
            showModal.value = false;
        },
    });
};
</script>
