<template>
    <div class="space-y-6">
        <Head title="Client Reports" />

        <div class="rounded-2xl border border-slate-200 bg-white p-6">
            <h3 class="text-lg font-semibold">Client Reports</h3>
            <p class="mt-2 text-xs text-slate-500">
                Analyze client onboarding, verification, and account activity.
            </p>

            <!-- Filters + Download -->
            <div class="mt-6 flex flex-wrap items-end gap-4 rounded-xl border border-slate-100 bg-slate-50/50 p-4">
                <div class="flex flex-wrap items-end gap-3">
                    <div>
                        <label class="mb-1 block text-xs font-medium text-slate-600">From date</label>
                        <input
                            v-model="filterForm.date_from"
                            type="date"
                            class="rounded-lg border border-slate-200 bg-white px-3 py-2 text-xs focus:border-slate-400 focus:outline-none focus:ring-1 focus:ring-slate-400"
                        />
                    </div>
                    <div>
                        <label class="mb-1 block text-xs font-medium text-slate-600">To date</label>
                        <input
                            v-model="filterForm.date_to"
                            type="date"
                            class="rounded-lg border border-slate-200 bg-white px-3 py-2 text-xs focus:border-slate-400 focus:outline-none focus:ring-1 focus:ring-slate-400"
                        />
                    </div>
                    <div>
                        <label class="mb-1 block text-xs font-medium text-slate-600">Status</label>
                        <select
                            v-model="filterForm.status"
                            class="rounded-lg border border-slate-200 bg-white px-3 py-2 text-xs focus:border-slate-400 focus:outline-none focus:ring-1 focus:ring-slate-400"
                        >
                            <option value="">All</option>
                            <option value="verified">Verified</option>
                            <option value="pending">Pending</option>
                            <option value="rejected">Rejected</option>
                        </select>
                    </div>
                    <button
                        type="button"
                        class="rounded-lg bg-slate-700 px-4 py-2 text-xs font-medium text-white hover:bg-slate-600"
                        @click="applyFilters"
                    >
                        Apply
                    </button>
                </div>
                <div class="ml-auto flex items-center gap-2">
                    <span class="text-xs text-slate-500">Download:</span>
                    <a
                        :href="exportUrl('pdf')"
                        target="_blank"
                        rel="noopener noreferrer"
                        class="rounded-lg border border-slate-300 bg-white px-3 py-2 text-xs font-medium text-slate-700 hover:bg-slate-50"
                    >
                        PDF
                    </a>
                    <a
                        :href="exportUrl('xlsx')"
                        target="_blank"
                        rel="noopener noreferrer"
                        class="rounded-lg border border-slate-300 bg-white px-3 py-2 text-xs font-medium text-slate-700 hover:bg-slate-50"
                    >
                        Excel
                    </a>
                </div>
            </div>

            <!-- Stats grid -->
            <div class="mt-6 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
                <div class="rounded-xl border border-slate-100 bg-slate-50/50 p-4">
                    <p class="text-xs font-medium text-slate-500">Total clients</p>
                    <p class="mt-1 text-2xl font-semibold text-slate-800">
                        {{ stats.total ?? 0 }}
                    </p>
                </div>
                <div class="rounded-xl border border-slate-100 bg-slate-50/50 p-4">
                    <p class="text-xs font-medium text-slate-500">Verified</p>
                    <p class="mt-1 text-2xl font-semibold text-slate-800">
                        {{ stats.verified ?? 0 }}
                    </p>
                </div>
                <div class="rounded-xl border border-slate-100 bg-slate-50/50 p-4">
                    <p class="text-xs font-medium text-slate-500">Pending</p>
                    <p class="mt-1 text-2xl font-semibold text-slate-800">
                        {{ stats.pending ?? 0 }}
                    </p>
                </div>
                <div class="rounded-xl border border-slate-100 bg-slate-50/50 p-4">
                    <p class="text-xs font-medium text-slate-500">Rejected</p>
                    <p class="mt-1 text-2xl font-semibold text-slate-800">
                        {{ stats.rejected ?? 0 }}
                    </p>
                </div>
            </div>

            <!-- Clients table -->
            <div class="mt-6">
                <h4 class="text-sm font-medium text-slate-700">Clients</h4>
                <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">Client code</th>
                                <th class="px-4 py-3">Name</th>
                                <th class="px-4 py-3">Email</th>
                                <th class="px-4 py-3">Status</th>
                                <th class="px-4 py-3">Accounts</th>
                                <th class="px-4 py-3">Cards</th>
                                <th class="px-4 py-3">Created</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr
                                v-for="row in clients"
                                :key="row.uuid"
                                class="border-t border-slate-100"
                            >
                                <td class="px-4 py-3 font-medium text-slate-700">
                                    {{ row.client_code || '—' }}
                                </td>
                                <td class="px-4 py-3 text-slate-600">
                                    {{ row.full_name || '—' }}
                                </td>
                                <td class="px-4 py-3 text-slate-500">
                                    {{ row.email || '—' }}
                                </td>
                                <td class="px-4 py-3">
                                    <span
                                        class="rounded-full px-2 py-0.5 text-xs"
                                        :class="{
                                            'bg-emerald-100 text-emerald-700': row.status === 'Verified',
                                            'bg-amber-100 text-amber-700': row.status === 'Pending',
                                            'bg-red-100 text-red-700': row.status === 'Rejected',
                                            'bg-slate-100 text-slate-600': !['Verified','Pending','Rejected'].includes(row.status),
                                        }"
                                    >
                                        {{ row.status }}
                                    </span>
                                </td>
                                <td class="px-4 py-3 text-slate-500">
                                    {{ row.accounts_count ?? 0 }}
                                </td>
                                <td class="px-4 py-3 text-slate-500">
                                    {{ row.cards_count ?? 0 }}
                                </td>
                                <td class="px-4 py-3 text-slate-500">
                                    {{ row.created_at || '—' }}
                                </td>
                            </tr>
                            <tr v-if="!clients?.length">
                                <td
                                    class="px-4 py-6 text-center text-slate-400"
                                    colspan="7"
                                >
                                    No clients found.
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</template>

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

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

const props = defineProps({
    filters: { type: Object, default: () => ({}) },
    stats: { type: Object, default: () => ({}) },
    clients: { type: Array, default: () => [] },
    exportPath: { type: String, default: '' },
});

const filterForm = reactive({
    date_from: props.filters?.date_from ?? '',
    date_to: props.filters?.date_to ?? '',
    status: props.filters?.status ?? '',
});

watch(
    () => props.filters,
    (f) => {
        if (f) {
            filterForm.date_from = f.date_from ?? '';
            filterForm.date_to = f.date_to ?? '';
            filterForm.status = f.status ?? '';
        }
    },
    { immediate: true }
);

function applyFilters() {
    router.get('/reports/clients', {
        date_from: filterForm.date_from || undefined,
        date_to: filterForm.date_to || undefined,
        status: filterForm.status || undefined,
    });
}

function exportUrl(format) {
    const params = new URLSearchParams();
    params.set('format', format);
    if (filterForm.date_from) params.set('date_from', filterForm.date_from);
    if (filterForm.date_to) params.set('date_to', filterForm.date_to);
    if (filterForm.status) params.set('status', filterForm.status);
    const qs = params.toString();
    return qs ? `${props.exportPath}?${qs}` : `${props.exportPath}?format=${format}`;
}
</script>
