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

        <section class="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
            <StatCard
                title="Total Clients"
                :value="stats.totalClients"
                hint="All onboarded client profiles."
            />
            <StatCard
                title="Verified Clients"
                :value="stats.verifiedClients"
                hint="Clients cleared for issuance."
            />
            <StatCard
                title="Cards Issued"
                :value="stats.cardsIssued"
                hint="Cards moved to issuance."
            />
            <StatCard
                title="Cards Active"
                :value="stats.cardsActive"
                hint="Cards ready for transactions."
            />
            <StatCard
                title="Cards Pending Print"
                :value="stats.cardsPendingPrint"
                hint="Queued for personalization."
            />
        </section>

        <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">User engagement</h3>
                            <p class="text-xs text-slate-500">
                                Last 20 data points
                            </p>
                        </div>
                        <div class="flex gap-2">
                            <button
                                v-for="tab in analytics.engagementTabs"
                                :key="tab.key"
                                type="button"
                                class="rounded-full border px-3 py-1 text-xs font-semibold"
                                :class="
                                    activeTab === tab.key
                                        ? 'border-slate-900 bg-slate-900 text-white'
                                        : 'border-slate-200 text-slate-500'
                                "
                                @click="activeTab = tab.key"
                            >
                                {{ tab.title }}
                            </button>
                        </div>
                    </div>

                    <div class="mt-6 flex h-56 gap-6">
                        <div class="flex flex-1 flex-col">
                            <div
                                class="flex flex-1 items-end gap-1 rounded-xl bg-slate-50 p-3"
                            >
                                <div
                                    v-for="(value, index) in actualSeries"
                                    :key="`actual-${index}`"
                                    class="w-2 rounded-sm bg-slate-900"
                                    :style="{
                                        height: `${Math.max(
                                            6,
                                            (value / maxValue) * 100
                                        )}%`,
                                    }"
                                ></div>
                            </div>
                            <p class="mt-2 text-xs text-slate-500">Actual</p>
                        </div>

                        <div class="flex flex-1 flex-col">
                            <div
                                class="flex flex-1 items-end gap-1 rounded-xl bg-slate-50 p-3"
                            >
                                <div
                                    v-for="(value, index) in projectedSeries"
                                    :key="`projected-${index}`"
                                    class="w-2 rounded-sm bg-slate-300"
                                    :style="{
                                        height: `${Math.max(
                                            6,
                                            (value / maxValue) * 100
                                        )}%`,
                                    }"
                                ></div>
                            </div>
                            <p class="mt-2 text-xs text-slate-500">Projected</p>
                        </div>
                    </div>
                </div>
            </div>

            <div>
                <div class="rounded-2xl border border-slate-200 bg-white p-6">
                    <h3 class="text-lg font-semibold">Top campaigns</h3>
                    <p class="text-xs text-slate-500">
                        Traffic source distribution
                    </p>
                    <div class="mt-4 space-y-3">
                        <div
                            v-for="item in analytics.topCampaigns"
                            :key="item.campaign"
                        >
                            <div class="flex items-center justify-between text-xs">
                                <span class="font-semibold text-slate-700">
                                    {{ item.campaign }}
                                </span>
                                <span class="text-slate-500">
                                    {{ item.users.toLocaleString() }}
                                </span>
                            </div>
                            <div class="mt-1 h-2 rounded-full bg-slate-100">
                                <div
                                    class="h-2 rounded-full bg-slate-900"
                                    :style="{
                                        width: `${(item.users / maxCampaign) * 100}%`,
                                    }"
                                ></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <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">
                        <h3 class="text-lg font-semibold">Users by country</h3>
                        <span class="text-xs text-slate-500">Last 7 days</span>
                    </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">Country</th>
                                    <th class="px-4 py-3">Total</th>
                                    <th class="px-4 py-3">New</th>
                                    <th class="px-4 py-3">Engaged</th>
                                    <th class="px-4 py-3">Growth</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr
                                    v-for="row in analytics.userByCountry"
                                    :key="row.id"
                                    class="border-t border-slate-100"
                                >
                                    <td class="px-4 py-3 font-medium">
                                        {{ row.country }}
                                    </td>
                                    <td class="px-4 py-3 text-slate-500">
                                        {{ row.totalUsers.toLocaleString() }}
                                    </td>
                                    <td class="px-4 py-3 text-slate-500">
                                        {{ row.newUsers.toLocaleString() }}
                                    </td>
                                    <td class="px-4 py-3 text-slate-500">
                                        {{
                                            row.engagedSessions.toLocaleString()
                                        }}
                                    </td>
                                    <td
                                        class="px-4 py-3 font-semibold"
                                        :class="
                                            row.growthRate.startsWith('-')
                                                ? 'text-rose-500'
                                                : 'text-emerald-500'
                                        "
                                    >
                                        {{ row.growthRate }}
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div>
                <div
                    class="relative overflow-hidden rounded-2xl border border-slate-200 bg-slate-900 p-6 text-white"
                >
                    <img
                        :src="ctaBackground"
                        alt="CTA Background"
                        class="absolute inset-0 h-full w-full object-cover opacity-30"
                    />
                    <div class="relative space-y-4">
                        <h3 class="text-lg font-semibold">Go pro today</h3>
                        <p class="text-xs text-slate-200">
                            Unlock advanced dashboards, premium layouts, and
                            priority support.
                        </p>
                        <a
                            href="https://mui.com/store/items/aurora"
                            target="_blank"
                            class="inline-flex items-center justify-center rounded-lg bg-white px-4 py-2 text-xs font-semibold text-slate-900"
                        >
                            Upgrade now
                        </a>
                    </div>
                </div>
            </div>
        </section>
    </div>
</template>

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

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

defineProps({
    stats: {
        type: Object,
        default: () => ({
            totalClients: 0,
            verifiedClients: 0,
            cardsIssued: 0,
            cardsActive: 0,
            cardsPendingPrint: 0,
        }),
    },
});

const activeTab = ref(analytics.engagementTabs[0].key);

const actualSeries = computed(
    () => analytics.engagementChart[activeTab.value].actual
);
const projectedSeries = computed(
    () => analytics.engagementChart[activeTab.value].projected
);
const maxValue = computed(() =>
    Math.max(...actualSeries.value, ...projectedSeries.value)
);
const maxCampaign = Math.max(
    ...analytics.topCampaigns.map((item) => item.users)
);
const ctaBackground = '/theme/assets/images/cta-bg.svg';
</script>
