<script lang="ts">
	import Sidebar from '$lib/components/Sidebar.svelte';
	import { onMount } from 'svelte';
	import type { Arxlet } from '$lib/eve';
	import Avatar from '$lib/components/User/Avatar.svelte';
	import ArxletIcon from '$lib/components/ArxletIcon.svelte';
	import LiquidGlass from '$lib/components/LiquidGlass.svelte';
	import UserName from '$lib/components/User/UserName.svelte';

	const arxlets: Arxlet[] = $state([
		{
			id: 'ZZ-store',
			name: 'Store',
			description: 'Find arxlets to install',
			icon: 'mdi:storefront',
			iconColor: '#ff0000',
			script: ''
		},
		{
			id: 'ZZ-settings',
			name: 'Settings',
			description: 'Manage your settings',
			icon: 'mdi:cog',
			iconColor: '#3b82f6',
			script: ''
		},
		{
			id: 'ZZ-invite',
			name: 'Invite',
			description: 'Invite people to your CCN',
			icon: 'mingcute:invite-fill',
			iconColor: '#9922aa',
			script: ''
		}
	]);

	let pubkey = $state('');

	let currentTime = $state(new Date());

	window.eve.getAllArxlets().then((installedArxlets) => {
		arxlets.push(...installedArxlets);
		arxlets.sort((a, b) => a.id.localeCompare(b.id));
	});

	onMount(() => {
		const interval = setInterval(() => {
			currentTime = new Date();
		}, 1000);

		window.eve.getPublicKey().then((key) => {
			pubkey = key;
		});

		return () => clearInterval(interval);
	});

	const formatGreeting = () => {
		const hour = currentTime.getHours();
		if (hour < 12) return 'Good morning';
		if (hour < 18) return 'Good afternoon';
		return 'Good evening';
	};
</script>

<svelte:head>
	<title>Eve Lite - Dashboard</title>
</svelte:head>

<div class="w-full flex flex-row">
	<div class="flex-1 p-8">
		<div class="flex items-center justify-between mb-6">
			<LiquidGlass class="p-8 rounded-2xl">
				<div class="flex flex-row items-center gap-4">
					<Avatar {pubkey} />
					<h2 class="text-2xl font-bold text-base-content">
						{formatGreeting()}, <UserName {pubkey} />!<br />
					</h2>
				</div>
			</LiquidGlass>
		</div>

		<div class="flex justify-center">
			<LiquidGlass class="rounded-3xl shadow-2xl border border-base-300/50 p-8 max-w-4xl w-full">
				<div class="grid grid-cols-4 gap-8 mb-8">
					{#each arxlets as app}
						<ArxletIcon {app} isUnique={arxlets.filter((a) => a.id === app.id).length === 1} />
					{/each}
				</div>
			</LiquidGlass>
		</div>
	</div>

	<Sidebar />
</div>
