<template>
	<div class="dashboard-overview">
		<section class="universal-card dashboard-header">
			<Avatar :src="auth.user.avatar_url" size="md" circle :alt="auth.user.username" />
			<div class="username">
				<h1>
					{{ auth.user.username }}
				</h1>
				<NuxtLink class="goto-link" :to="`/user/${auth.user.username}`">
					{{ formatMessage(commonMessages.visitYourProfile) }}
					<ChevronRightIcon class="featured-header-chevron" aria-hidden="true" />
				</NuxtLink>
			</div>
		</section>
		<div class="dashboard-notifications">
			<section class="universal-card">
				<div class="header__row">
					<h2 class="header__title text-2xl">
						{{ formatMessage(commonMessages.notificationsLabel) }}
					</h2>
					<nuxt-link
						v-if="notifications.length > 0"
						class="goto-link"
						to="/dashboard/notifications"
					>
						{{ formatMessage(messages.seeAll) }}
						<ChevronRightIcon />
					</nuxt-link>
				</div>
				<template v-if="notifications.length > 0">
					<NotificationItem
						v-for="notification in notifications"
						:key="notification.id"
						:notifications="notifications"
						class="universal-card recessed"
						:notification="notification"
						:auth="auth"
						raised
						compact
						@update:notifications="() => refetch()"
					/>
					<nuxt-link
						v-if="extraNotifs > 0"
						class="goto-link view-more-notifs mt-4"
						to="/dashboard/notifications"
					>
						{{ formatMessage(messages.viewMore, { extraNotifs: extraNotifs }) }}
						<ChevronRightIcon />
					</nuxt-link>
				</template>
				<div v-else class="universal-body">
					<p>{{ formatMessage(messages.noUnreadNotifications) }}</p>
					<nuxt-link class="iconified-button !mt-4" to="/dashboard/notifications/history">
						<HistoryIcon />
						{{ formatMessage(messages.viewNotificationHistory) }}
					</nuxt-link>
				</div>
			</section>
		</div>

		<div class="dashboard-analytics">
			<section class="universal-card">
				<h2>{{ formatMessage(commonMessages.analyticsButton) }}</h2>
				<div class="grid-display">
					<div class="grid-display__item">
						<div class="label">{{ formatMessage(messages.totalDownloads) }}</div>
						<div class="value">
							{{ $formatNumber(projects.reduce((agg, x) => agg + x.downloads, 0)) }}
						</div>
						<span>{{
							formatMessage(messages.fromProjects, { count: downloadsProjectCount })
						}}</span>
						<!--          <NuxtLink class="goto-link" to="/dashboard/analytics"-->
						<!--            >View breakdown-->
						<!--            <ChevronRightIcon-->
						<!--              class="featured-header-chevron"-->
						<!--              aria-hidden="true"-->
						<!--          /></NuxtLink>-->
					</div>
					<div class="grid-display__item">
						<div class="label">{{ formatMessage(messages.totalFollowers) }}</div>
						<div class="value">
							{{ $formatNumber(projects.reduce((agg, x) => agg + x.followers, 0)) }}
						</div>
						<span>
							<span>{{
								formatMessage(messages.fromProjects, { count: followersProjectCount })
							}}</span>
						</span>
					</div>
				</div>
			</section>
		</div>
	</div>
</template>
<script setup>
import { ChevronRightIcon, HistoryIcon } from '@modrinth/assets'
import {
	Avatar,
	commonMessages,
	defineMessages,
	injectModrinthClient,
	useVIntl,
} from '@modrinth/ui'
import { useQuery } from '@tanstack/vue-query'

import NotificationItem from '~/components/ui/NotificationItem.vue'
import { fetchExtraNotificationData, groupNotifications } from '~/helpers/platform-notifications.ts'

const { formatMessage } = useVIntl()

const messages = defineMessages({
	headTitle: {
		id: 'dashboard.head-title',
		defaultMessage: 'Dashboard',
	},
	seeAll: {
		id: 'dashboard.notifications.link.see-all',
		defaultMessage: 'See all',
	},
	viewMore: {
		id: 'dashboard.notifications.link.view-more',
		defaultMessage:
			'View {extraNotifs} more {extraNotifs, plural, one {notification} other {notifications}}',
	},
	noUnreadNotifications: {
		id: 'dashboard.notifications.empty.no-unread',
		defaultMessage: 'You have no unread notifications.',
	},
	viewNotificationHistory: {
		id: 'dashboard.notifications.link.view-history',
		defaultMessage: 'View notification history',
	},
	totalDownloads: {
		id: 'dashboard.analytics.total-downloads',
		defaultMessage: 'Total downloads',
	},
	totalFollowers: {
		id: 'dashboard.analytics.total-followers',
		defaultMessage: 'Total followers',
	},
	fromProjects: {
		id: 'dashboard.analytics.from-projects',
		defaultMessage: 'from {count} {count, plural, one {project} other {projects}}',
	},
})

useHead({
	title: () => `${formatMessage(messages.headTitle)} - Modrinth`,
})

const auth = await useAuth()
const client = injectModrinthClient()

const { data: projects } = useQuery({
	queryKey: computed(() => ['user', auth.value?.user?.id, 'projects']),
	queryFn: () => client.labrinth.users_v2.getProjects(auth.value?.user?.id),
	placeholderData: [],
})

const downloadsProjectCount = computed(
	() => projects.value.filter((project) => project.downloads > 0).length,
)
const followersProjectCount = computed(
	() => projects.value.filter((project) => project.followers > 0).length,
)

const { data, refetch } = useQuery({
	queryKey: computed(() => ['user', auth.value?.user?.id, 'notifications']),
	queryFn: async () => {
		const notifications = await client.labrinth.notifications_v2.getUserNotifications(
			auth.value?.user?.id,
		)

		const filteredNotifications = notifications.filter((notif) => !notif.read)
		const slice = filteredNotifications.slice(0, 30)

		return fetchExtraNotificationData(client, slice).then((notifications) => {
			notifications = groupNotifications(notifications).slice(0, 3)
			return { notifications, extraNotifs: filteredNotifications.length - slice.length }
		})
	},
	enabled: computed(() => !!auth.value?.user?.id),
})

const notifications = computed(() => {
	return data.value?.notifications ?? []
})

const extraNotifs = computed(() => (data.value ? data.value.extraNotifs : 0))
</script>
<style lang="scss">
.dashboard-overview {
	display: grid;
	grid-template:
		'header header'
		'notifications analytics' / 1fr auto;
	gap: var(--spacing-card-md);

	> .universal-card {
		margin: 0;
	}

	@media screen and (max-width: 750px) {
		display: flex;
		flex-direction: column;
	}
}

.dashboard-notifications {
	grid-area: notifications;
	//display: flex;
	//flex-direction: column;
	//gap: var(--spacing-card-md);

	a.view-more-notifs {
		display: flex;
		width: fit-content;
		margin-left: auto;
	}
}

.dashboard-analytics {
	grid-area: analytics;
}

.dashboard-header {
	display: flex;
	gap: var(--spacing-card-bg);
	grid-area: header;

	.username {
		display: flex;
		flex-direction: column;
		gap: var(--spacing-card-sm);
		justify-content: center;
		word-break: break-word;

		h1 {
			margin: 0;
		}
	}

	@media screen and (max-width: 650px) {
		.avatar {
			width: 4rem;
			height: 4rem;
		}

		.username {
			h1 {
				font-size: var(--font-size-xl);
			}
		}
	}
}
</style>
