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

        <div class="grid gap-6 lg:grid-cols-[280px_1fr]">
            <aside class="rounded-2xl border border-slate-200 bg-white p-4">
                <p class="px-2 text-xs font-semibold uppercase text-slate-400">
                    Account
                </p>
                <div class="mt-3 space-y-1">
                    <button
                        v-for="tab in accountTabs"
                        :key="tab.value"
                        type="button"
                        class="flex w-full items-center justify-between rounded-lg px-3 py-2 text-left text-sm font-medium transition"
                        :class="
                            activeTab === tab.value
                                ? 'bg-slate-100 text-slate-900'
                                : 'text-slate-600 hover:bg-slate-50'
                        "
                        @click="activeTab = tab.value"
                    >
                        {{ tab.label }}
                        <span class="text-xs text-slate-400">›</span>
                    </button>
                </div>
            </aside>

            <section class="rounded-2xl border border-slate-200 bg-white p-6">
                <div class="flex items-center justify-between">
                    <div>
                        <h2 class="text-lg font-semibold">
                            {{ activeTabLabel }}
                        </h2>
                        <p class="text-sm text-slate-500">
                            Manage your profile information and preferences.
                        </p>
                    </div>
                    <button
                        class="rounded-lg border border-slate-200 px-4 py-2 text-sm font-semibold text-slate-700"
                    >
                        Edit profile
                    </button>
                </div>

                <div v-if="activeTab === 'personal_information'" class="mt-6">
                    <div class="grid gap-4 md:grid-cols-2">
                        <div class="rounded-lg border border-slate-100 p-4">
                            <p class="text-xs text-slate-500">First name</p>
                            <p class="mt-1 font-semibold">
                                {{ personalInfo.firstName }}
                            </p>
                        </div>
                        <div class="rounded-lg border border-slate-100 p-4">
                            <p class="text-xs text-slate-500">Last name</p>
                            <p class="mt-1 font-semibold">
                                {{ personalInfo.lastName }}
                            </p>
                        </div>
                        <div class="rounded-lg border border-slate-100 p-4">
                            <p class="text-xs text-slate-500">Username</p>
                            <p class="mt-1 font-semibold">
                                {{ personalInfo.userName }}
                            </p>
                        </div>
                        <div class="rounded-lg border border-slate-100 p-4">
                            <p class="text-xs text-slate-500">Country</p>
                            <p class="mt-1 font-semibold">
                                {{ personalInfo.country }}
                            </p>
                        </div>
                        <div class="rounded-lg border border-slate-100 p-4">
                            <p class="text-xs text-slate-500">State</p>
                            <p class="mt-1 font-semibold">
                                {{ personalInfo.state }}
                            </p>
                        </div>
                        <div class="rounded-lg border border-slate-100 p-4">
                            <p class="text-xs text-slate-500">City</p>
                            <p class="mt-1 font-semibold">
                                {{ personalInfo.city }}
                            </p>
                        </div>
                        <div class="rounded-lg border border-slate-100 p-4">
                            <p class="text-xs text-slate-500">Street</p>
                            <p class="mt-1 font-semibold">
                                {{ personalInfo.street }}
                            </p>
                        </div>
                        <div class="rounded-lg border border-slate-100 p-4">
                            <p class="text-xs text-slate-500">ZIP</p>
                            <p class="mt-1 font-semibold">
                                {{ personalInfo.zip }}
                            </p>
                        </div>
                        <div class="rounded-lg border border-slate-100 p-4">
                            <p class="text-xs text-slate-500">Phone</p>
                            <p class="mt-1 font-semibold">
                                {{ personalInfo.phoneNumber }}
                            </p>
                        </div>
                        <div class="rounded-lg border border-slate-100 p-4">
                            <p class="text-xs text-slate-500">Primary email</p>
                            <p class="mt-1 font-semibold">
                                {{ personalInfo.primaryEmail }}
                            </p>
                        </div>
                        <div class="rounded-lg border border-slate-100 p-4">
                            <p class="text-xs text-slate-500">Secondary email</p>
                            <p class="mt-1 font-semibold">
                                {{ personalInfo.secondaryEmail }}
                            </p>
                        </div>
                    </div>
                </div>

                <div v-else class="mt-6 rounded-xl border border-dashed p-6">
                    <p class="text-sm text-slate-600">
                        This section is part of the pro plan. Upgrade to unlock
                        {{ activeTabLabel }}.
                    </p>
                    <a
                        href="https://mui.com/store/items/aurora"
                        target="_blank"
                        class="mt-4 inline-flex items-center rounded-lg bg-slate-900 px-4 py-2 text-xs font-semibold text-white"
                    >
                        Upgrade to pro
                    </a>
                </div>
            </section>
        </div>
    </div>
</template>

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

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

const activeTab = ref(accountTabs[0].value);
const activeTabLabel = computed(
    () => accountTabs.find((tab) => tab.value === activeTab.value)?.title ?? ''
);
</script>
