<script lang="ts">
	import PageHeader from '$lib/components/layout/PageHeader.svelte';
	import StatCard from '$lib/components/common/StatCard.svelte';
	import { selectedPeriod } from '$lib/stores/period';
	import { 
		Folder, 
		Users, 
		Calendar, 
		BarChart3,
		Plus,
		ArrowRight
	} from 'lucide-svelte';

	// TODO: Fetch from API in future
	const stats = {
		activeProjects: 14,
		teamMembers: 8,
		allocationsThisMonth: 186,
		avgUtilization: 87
	};
</script>

<svelte:head>
	<title>Dashboard | Headroom</title>
</svelte:head>

<PageHeader 
	title="Dashboard" 
	description="Overview of your resource allocation"
>
	{#snippet children()}
		<button class="btn btn-primary btn-sm gap-2">
			<Plus size={16} />
			New Allocation
		</button>
	{/snippet}
</PageHeader>

<!-- KPI Cards -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
	<StatCard 
		title="Active Projects" 
		value={stats.activeProjects}
		trend="up"
		trendValue="+2"
		description="from last month"
		icon={Folder}
	/>
	<StatCard 
		title="Team Members" 
		value={stats.teamMembers}
		trend="neutral"
		description="active"
		icon={Users}
	/>
	<StatCard 
		title="Allocations (hrs)" 
		value={stats.allocationsThisMonth}
		trend="down"
		trendValue="-12"
		description="vs capacity"
		icon={Calendar}
	/>
	<StatCard 
		title="Avg Utilization" 
		value={`${stats.avgUtilization}%`}
		trend="up"
		trendValue="+5%"
		description="from last month"
		icon={BarChart3}
	/>
</div>

<!-- Quick Links -->
<div class="card bg-base-100 shadow-sm border border-base-300 mb-6">
	<div class="card-body">
		<h2 class="card-title text-lg">Quick Actions</h2>
		<div class="grid grid-cols-2 md:grid-cols-4 gap-3 mt-2">
			<a href="/team-members" class="btn btn-ghost justify-start gap-2">
				<Users size={18} />
				Team
				<ArrowRight size={14} class="ml-auto opacity-50" />
			</a>
			<a href="/projects" class="btn btn-ghost justify-start gap-2">
				<Folder size={18} />
				Projects
				<ArrowRight size={14} class="ml-auto opacity-50" />
			</a>
			<a href="/allocations" class="btn btn-ghost justify-start gap-2">
				<Calendar size={18} />
				Allocate
				<ArrowRight size={14} class="ml-auto opacity-50" />
			</a>
			<a href="/reports/forecast" class="btn btn-ghost justify-start gap-2">
				<BarChart3 size={18} />
				Forecast
				<ArrowRight size={14} class="ml-auto opacity-50" />
			</a>
		</div>
	</div>
</div>

<!-- Placeholder for Allocation Preview -->
<div class="card bg-base-100 shadow-sm border border-base-300">
	<div class="card-body">
		<h2 class="card-title text-lg">Allocation Preview</h2>
		<p class="text-base-content/50 text-sm">
			Allocation matrix for {$selectedPeriod} will appear here.
		</p>
		<div class="skeleton h-48 w-full mt-4"></div>
	</div>
</div>
