<script lang="ts">
	import {
		WelcomeCard,
		DuesStatusCard,
		UpcomingEventsCard,
		QuickActionsCard,
		StatsCard
	} from '$lib/components/dashboard';
	import { Users, UserCheck, UserX, DollarSign, Calendar, AlertTriangle } from 'lucide-svelte';

	let { data } = $props();

	const { member, upcomingEvents, stats } = data;
	const isBoard = member?.role === 'board' || member?.role === 'admin';
	const isAdmin = member?.role === 'admin';
</script>

<svelte:head>
	<title>Dashboard | Monaco USA</title>
</svelte:head>

<div class="space-y-6">
	<!-- Welcome Card -->
	{#if member}
		<WelcomeCard {member} />
	{/if}

	<!-- Quick Actions (Mobile-first) -->
	{#if member}
		<QuickActionsCard role={member.role} />
	{/if}

	<!-- Main Grid -->
	<div class="grid gap-6 lg:grid-cols-2">
		<!-- Dues Status -->
		{#if member}
			<DuesStatusCard {member} />
		{/if}

		<!-- Upcoming Events -->
		<UpcomingEventsCard events={upcomingEvents || []} />
	</div>

	<!-- Board Stats Section -->
	{#if isBoard && stats}
		<div class="mt-8">
			<h3 class="mb-4 text-lg font-semibold text-slate-900">Board Overview</h3>
			<div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
				<StatsCard
					title="Total Members"
					value={stats.totalMembers}
					description="All registered members"
					icon={Users}
					color="blue"
				/>
				<StatsCard
					title="Active Members"
					value={stats.activeMembers}
					description="With current dues"
					icon={UserCheck}
					color="green"
				/>
				<StatsCard
					title="Pending Members"
					value={stats.pendingMembers}
					description="Awaiting payment"
					icon={UserX}
					color="yellow"
				/>
				<StatsCard
					title="Dues Overdue"
					value={stats.duesOverdue}
					description="Past due date"
					icon={AlertTriangle}
					color="red"
				/>
			</div>
		</div>
	{/if}

	<!-- Admin Stats Section -->
	{#if isAdmin && stats}
		<div class="mt-8">
			<h3 class="mb-4 text-lg font-semibold text-slate-900">Admin Overview</h3>
			<div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
				<StatsCard
					title="Total Dues Collected"
					value={`€${stats.totalDuesCollected?.toFixed(2) || '0.00'}`}
					description="This year"
					icon={DollarSign}
					color="green"
				/>
				<StatsCard
					title="Upcoming Events"
					value={stats.upcomingEventsCount || 0}
					description="Next 30 days"
					icon={Calendar}
					color="blue"
				/>
				<StatsCard
					title="Inactive Members"
					value={stats.inactiveMembers || 0}
					description="Lapsed membership"
					icon={UserX}
					color="default"
				/>
			</div>
		</div>
	{/if}
</div>
