<template>
    <aside
        class="fixed h-dvh z-10 md:flex hidden flex-col p-4 bg-dark-800 gap-10 max-w-20 hover:max-w-72 duration-200 group ring-1 ring-dark-500"
        role="complementary">
        <NuxtLink href="/">
            <img crossorigin="anonymous" class="size-11 rounded ring-1 ring-white/10 hover:scale-105 duration-200"
                src="/logo.webp" alt="Lysand logo" />
        </NuxtLink>

        <div class="flex flex-col gap-3">
            <h3 class="font-semibold text-gray-300 text-xs uppercase opacity-0 group-hover:opacity-100 duration-200">
                Timelines</h3>
            <ClientOnly>
                <NuxtLink v-for="timeline in visibleTimelines" :key="timeline.href" :to="timeline.href">
                    <ButtonsBase
                        class="flex flex-row text-left items-center justify-start gap-3 text-lg hover:ring-1 ring-white/10 overflow-hidden h-12 w-full duration-200">
                        <iconify-icon :icon="timeline.icon" class="shrink-0 text-2xl" />
                        <span class="pr-28 line-clamp-1">{{ timeline.name }}</span>
                    </ButtonsBase>
                </NuxtLink>
            </ClientOnly>
        </div>

        <div class="flex flex-col gap-3 mt-auto">
            <h3 class="font-semibold text-gray-300 text-xs uppercase opacity-0 group-hover:opacity-100 duration-200">
                Account</h3>
            <ClientOnly>
                <SidebarsAccountPicker @sign-in="signIn().finally(() => loadingAuth = false)" />
                <NuxtLink href="/register" v-if="!identity">
                    <ButtonsBase
                        class="flex flex-row text-left items-center justify-start gap-3 text-lg hover:ring-1 ring-white/10 overflow-hidden h-12 w-full duration-200">
                        <iconify-icon icon="tabler:certificate" class="shrink-0 text-2xl" />
                        <span class="pr-28 line-clamp-1">Register</span>
                    </ButtonsBase>
                </NuxtLink>
                <h3 v-if="identity"
                    class="font-semibold text-gray-300 text-xs uppercase opacity-0 group-hover:opacity-100 duration-200">
                    Posts</h3>
                <ButtonsBase v-if="identity" @click="compose" title="Open composer (shortcut: n)"
                    class="flex flex-row text-left items-center justify-start gap-3 text-lg hover:ring-1 ring-white/10 bg-gradient-to-tr from-pink-300 via-purple-300 to-indigo-400 overflow-hidden h-12 w-full duration-200">
                    <iconify-icon icon="tabler:writing" class="shrink-0 text-2xl" />
                    <span class="pr-28 line-clamp-1">Compose</span>
                    <kbd class="text-xs font-semibold rounded bg-dark-500 font-mono px-1 flex flex-row">
                        <iconify-icon icon="tabler:keyboard" height="1rem" width="1rem" class="inline"
                            aria-hidden="true" />
                        <iconify-icon icon="tabler:letter-n-small" height="1rem" width="1rem" class="inline -mr-1"
                            aria-hidden="true" />
                    </kbd>
                </ButtonsBase>
                <ButtonsBase v-if="$pwa?.needRefresh" @click="$pwa?.updateServiceWorker()" title="Update service worker"
                    class="flex flex-row text-left items-center justify-start gap-3 text-lg ring-2   ring-pink-600 overflow-hidden h-12 w-full duration-200">
                    <iconify-icon icon="tabler:refresh" class="shrink-0 text-2xl" />
                    <span class="pr-28 line-clamp-1">Update</span>
                </ButtonsBase>
            </ClientOnly>
        </div>
    </aside>
    <!-- Mobile bottom navbar -->
    <nav
        class="fixed bottom-0 left-0 right-0 z-20 md:hidden flex justify-around p-2 *:shadow-xl bg-dark-900 ring-1 ring-white/10 text-gray-200">
        <ClientOnly>
            <DropdownsAdaptiveDropdown>
                <template #button>
                    <button class="flex flex-col items-center justify-center p-2 rounded">
                        <iconify-icon icon="tabler:home" class="text-2xl" />
                        <span class="text-xs">Timelines</span>
                    </button>
                </template>

                <template #items>
                    <Menu.Item value="" v-for="timeline in visibleTimelines" :key="timeline.href">
                        <NuxtLink :href="timeline.href">
                            <ButtonsDropdownElement :icon="timeline.icon" class="w-full">
                                {{ timeline.name }}
                            </ButtonsDropdownElement>
                        </NuxtLink>
                    </Menu.Item>
                </template>
            </DropdownsAdaptiveDropdown>
            <NuxtLink href="/notifications" class="flex flex-col items-center justify-center p-2 rounded">
                <iconify-icon icon="tabler:bell" class="text-2xl" />
                <span class="text-xs">Notifications</span>
            </NuxtLink>
            <ClientOnly v-if="$pwa?.needRefresh">
                <button class="flex flex-col items-center justify-center p-2 rounded ring-2 ring-pink-600"
                    @click="$pwa?.updateServiceWorker(true)">
                    <iconify-icon icon="tabler:refresh" class="text-2xl" />
                    <span class="text-xs">Update</span>
                </button>
            </ClientOnly>
            <SidebarsAccountPicker v-else @sign-in="signIn().finally(() => loadingAuth = false)"
                @sign-out="id => signOut(id).finally(() => loadingAuth = false)">
                <button class="flex flex-col items-center justify-center p-2 rounded">
                    <iconify-icon icon="tabler:user" class="text-2xl" />
                    <span class="text-xs">Account</span>
                </button>
            </SidebarsAccountPicker>
            <button @click="compose" v-if="identity"
                class="flex flex-col items-center justify-center p-2 rounded bg-gradient-to-tr from-pink-300/70 via-purple-300/70 to-indigo-400/70">
                <iconify-icon icon="tabler:writing" class="text-2xl" />
                <span class="text-xs">Compose</span>
            </button>
        </ClientOnly>
    </nav>
</template>

<script lang="ts" setup>
import { Menu } from "@ark-ui/vue";
const { $pwa } = useNuxtApp();
const timelines = ref([
    {
        href: "/home",
        name: "Home",
        icon: "tabler:home",
        requiresAuth: true,
    },
    {
        href: "/public",
        name: "Public",
        icon: "tabler:world",
    },
    {
        href: "/local",
        name: "Local",
        icon: "tabler:home",
    },
    {
        href: "/notifications",
        name: "Notifications",
        icon: "tabler:bell",
        requiresAuth: true,
    },
]);

const visibleTimelines = computed(() =>
    timelines.value.filter(
        (timeline) => !timeline.requiresAuth || identity.value,
    ),
);

const loadingAuth = ref(false);

const appData = useAppData();
const identity = useCurrentIdentity();
const identities = useIdentities();
const client = useClient();

const compose = () => {
    useEvent("composer:open");
};

const signIn = async () => {
    loadingAuth.value = true;

    const output = await client.value.createApp("Lysand", {
        scopes: ["read", "write", "follow", "push"],
        redirect_uris: new URL("/", useRequestURL().origin).toString(),
        website: useBaseUrl().value,
    });

    if (!output?.data) {
        alert("Failed to create app");
        return;
    }

    appData.value = output.data;

    const url = await client.value.generateAuthUrl(
        output.data.client_id,
        output.data.client_secret,
        {
            scopes: ["read", "write", "follow", "push"],
            redirect_uri: new URL("/", useRequestURL().origin).toString(),
        },
    );

    if (!url) {
        alert("Failed to generate auth URL");
        return;
    }

    window.location.href = url;
};

const signOut = async (id?: string) => {
    loadingAuth.value = true;

    if (!appData.value || !identity.value) {
        console.error("No app or identity data to sign out");
        return;
    }

    const identityToRevoke = id
        ? identities.value.find((i) => i.id === id)
        : identity.value;

    if (!identityToRevoke) {
        console.error("No identity to revoke");
        return;
    }

    // Don't do anything on error, as Lysand doesn't implement the revoke endpoint yet
    await client.value
        ?.revokeToken(
            appData.value.client_id,
            identityToRevoke.tokens.access_token,
            identityToRevoke.tokens.access_token,
        )
        .catch(() => {});

    if (id === identity.value.id) {
        identity.value = null;
        await navigateTo("/");
        return;
    }

    identities.value = identities.value.filter((i) => i.id !== id);
    await useEvent("notification:new", {
        type: "success",
        title: "Signed out",
        message: "Account signed out successfully",
    });
};
</script>