<script setup lang="ts">
import { Link, usePage } from '@inertiajs/vue3'
import { computed, ref } from 'vue'

defineProps<{
    title?: string
}>()

const page = usePage()

const user = computed(() => page.props.auth?.user)

const credits = computed(() => {
    return page.props.auth?.credits ?? 0
})
console.log('user', credits.value)
const profileOpen = ref(false)

const navigation = [
    {
        name: 'Dashboard',
        href: '/dashboard',
        icon: '⌂',
    },
    {
        name: 'Generate',
        href: '/generate',
        icon: '✦',
    },
    {
        name: 'History',
        href: '/history',
        icon: '◷',
    },
    {
        name: 'Favorites',
        href: '/favorites',
        icon: '♡',
    },
    {
        name: 'Billing',
        href: '/billing',
        icon: '▣',
    },
    // {
    //     name: 'API Keys',
    //     href: '/api-keys',
    //     icon: '⌘',
    // },
    // {
    //     name: 'Settings',
    //     href: '/settings',
    //     icon: '⚙',
    // },
]

const isActive = (href: string) => {
    return window.location.pathname === href
}

const closeProfile = () => {
    profileOpen.value = false
}
</script>

<template>
    <div class="min-h-screen bg-[#09090b] text-white">

        <!-- ================= HEADER ================= -->
        <header
            class="sticky top-0 z-50 border-b border-white/10 bg-[#09090b]/85 backdrop-blur-xl"
        >

            <div class="flex h-16 items-center justify-between px-5">

                <!-- Left -->
                <div class="flex items-center gap-5">

                    <!-- Mobile menu button -->
                    <button
                        type="button"
                        class="rounded-lg p-2 text-zinc-400 hover:bg-white/5 hover:text-white lg:hidden"
                    >
                        ☰
                    </button>

                    <!-- Logo -->
                    <Link
                        href="/dashboard"
                        class="text-xl font-bold tracking-tight"
                    >
                        <span class="text-purple-400">
                            ✦
                        </span>

                        ImagineAI
                    </Link>

                </div>


                <!-- Right -->
                <div class="flex items-center gap-3">

                    <!-- Credits -->
                    <Link
                        href="/billing"
                        class="hidden items-center gap-2 rounded-xl border border-white/10 bg-white/[0.03] px-4 py-2 text-sm transition hover:bg-white/5 sm:flex"
                    >

                        <span class="text-purple-400">
                            ✦
                        </span>

                        <span class="text-zinc-300">
                            {{ credits }}
                        </span>

                        <span class="text-zinc-500">
                            credits
                        </span>

                    </Link>


                    <!-- Buy Credits -->
                    <Link
                        href="/pricing"
                        class="hidden rounded-xl bg-white px-4 py-2 text-sm font-semibold text-black transition hover:bg-zinc-200 sm:block"
                    >
                        Buy Credits
                    </Link>


                    <!-- Profile -->
                    <div class="relative">

                        <button
                            type="button"
                            @click="profileOpen = !profileOpen"
                            class="flex items-center gap-3 rounded-xl border border-white/10 bg-white/[0.03] px-2 py-1.5 transition hover:bg-white/5"
                        >

                            <!-- Avatar -->
                            <div
                                class="flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-purple-500 to-pink-500 text-xs font-bold text-white"
                            >
                                {{
                                    user?.name
                                        ?.charAt(0)
                                        ?.toUpperCase() ?? 'U'
                                }}
                            </div>

                            <!-- Name -->
                            <div class="hidden text-left md:block">

                                <p class="max-w-[120px] truncate text-sm font-medium">
                                    {{ user?.name ?? 'User' }}
                                </p>

                                <p class="max-w-[120px] truncate text-xs text-zinc-500">
                                    {{ user?.email ?? '' }}
                                </p>

                            </div>

                            <span class="hidden text-xs text-zinc-500 md:block">
                                ▾
                            </span>

                        </button>


                        <!-- Dropdown -->
                        <div
                            v-if="profileOpen"
                            class="absolute right-0 mt-2 w-64 overflow-hidden rounded-2xl border border-white/10 bg-[#111114] shadow-2xl shadow-black/40"
                        >

                            <div class="border-b border-white/10 p-4">

                                <p class="truncate text-sm font-medium">
                                    {{ user?.name }}
                                </p>

                                <p class="mt-1 truncate text-xs text-zinc-500">
                                    {{ user?.email }}
                                </p>

                            </div>


                            <div class="p-2">

                                <!-- <Link
                                    href="/settings"
                                    @click="closeProfile"
                                    class="flex items-center gap-3 rounded-xl px-3 py-2.5 text-sm text-zinc-300 hover:bg-white/5 hover:text-white"
                                >
                                    <span>⚙</span>
                                    Settings
                                </Link> -->

                                <Link
                                    href="/billing"
                                    @click="closeProfile"
                                    class="flex items-center gap-3 rounded-xl px-3 py-2.5 text-sm text-zinc-300 hover:bg-white/5 hover:text-white"
                                >
                                    <span>▣</span>
                                    Billing
                                </Link>

                            </div>


                            <div class="border-t border-white/10 p-2">

                                <Link
                                    href="/logout"
                                    method="post"
                                    as="button"
                                    @click="closeProfile"
                                    class="flex w-full items-center gap-3 rounded-xl px-3 py-2.5 text-left text-sm text-red-400 hover:bg-red-500/10"
                                >
                                    <span>↪</span>
                                    Logout
                                </Link>

                            </div>

                        </div>

                    </div>

                </div>

            </div>

        </header>


        <!-- ================= BODY ================= -->
        <div class="flex">

            <!-- ================= SIDEBAR ================= -->
            <aside
                class="sticky top-16 hidden h-[calc(100vh-4rem)] w-64 shrink-0 border-r border-white/10 bg-[#0c0c0f] lg:block"
            >

                <div class="flex h-full flex-col p-4">

                    <!-- Navigation -->
                    <nav class="space-y-1">

                        <p
                            class="mb-3 px-3 text-[11px] font-semibold uppercase tracking-wider text-zinc-600"
                        >
                            Workspace
                        </p>

                        <Link
                            v-for="item in navigation"
                            :key="item.href"
                            :href="item.href"
                            class="flex items-center gap-3 rounded-xl px-3 py-2.5 text-sm transition"
                            :class="
                                isActive(item.href)
                                    ? 'bg-white/10 font-medium text-white'
                                    : 'text-zinc-400 hover:bg-white/5 hover:text-white'
                            "
                        >

                            <span
                                class="flex w-5 justify-center text-base"
                            >
                                {{ item.icon }}
                            </span>

                            <span>
                                {{ item.name }}
                            </span>

                        </Link>

                    </nav>


                    <!-- Bottom -->
                    <div class="mt-auto">

                        <div
                            class="rounded-2xl border border-purple-500/20 bg-purple-500/[0.05] p-4"
                        >

                            <div class="flex items-center gap-2">

                                <span class="text-purple-400">
                                    ✦
                                </span>

                                <span class="text-sm font-medium">
                                    Your Credits
                                </span>

                            </div>

                            <p class="mt-3 text-2xl font-bold">
                                {{ credits }}
                            </p>

                            <p class="mt-1 text-xs text-zinc-500">
                                credits remaining
                            </p>

                            <Link
                                href="/pricing"
                                class="mt-4 block rounded-xl bg-white px-3 py-2 text-center text-xs font-semibold text-black transition hover:bg-zinc-200"
                            >
                                Get More Credits
                            </Link>

                        </div>

                    </div>

                </div>

            </aside>


            <!-- ================= MAIN ================= -->
            <main class="min-w-0 flex-1">

                <div class="p-5 md:p-8">

                    <!-- Page title -->
                    <div
                        v-if="title"
                        class="mb-8"
                    >
                        <h1 class="text-2xl font-bold md:text-3xl">
                            {{ title }}
                        </h1>
                    </div>

                    <!-- Page Content -->
                    <slot />

                </div>

            </main>

        </div>

    </div>
</template>