package views

import (
	"fmt"
	"whereismymoney/internal/models"
)

templ Dashboard(data *models.DashboardData) {
	@Layout("WhereIsMyMoney") {
		@Navigation(data.UserName)
		
		<!-- Main Content -->
		<div class="min-h-screen bg-gray-50">
			<div class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
				<div class="px-4 py-6 sm:px-0">
					<!-- Welcome Header -->
					<div class="mb-8">
						<h1 class="text-3xl font-bold text-gray-900">Dashboard</h1>
						<p class="mt-2 text-gray-600">Willkommen zurück, { data.UserName }!</p>
					</div>

					<!-- Vermögensübersicht -->
					<div class="mb-8 grid grid-cols-1 md:grid-cols-2 gap-6">						
						<div class="bg-white rounded-lg shadow p-6">
							<h3 class="text-lg font-medium text-gray-900 mb-2">Depots</h3>
							<p class="text-3xl font-bold text-blue-600">€{ fmt.Sprintf("%.2f", data.AssetOverview.TotalDepotValue) }</p>
							<p class="text-sm text-gray-500">{ fmt.Sprintf("%d Depots", len(data.AssetOverview.Depots)) }</p>
						</div>
						
						<div class="bg-white rounded-lg shadow p-6">
							<h3 class="text-lg font-medium text-gray-900 mb-2">Gesamtvermögen</h3>
							<p class="text-3xl font-bold text-purple-600">€{ fmt.Sprintf("%.2f", data.AssetOverview.TotalAssets) }</p>
							<p class="text-sm text-gray-500">Bank + Depot</p>
						</div>
					</div>

					<!-- Charts und Statistiken -->
					<div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">
						<!-- Monatliche Entwicklung -->
						<div class="bg-white rounded-lg shadow p-6">
							<h3 class="text-lg font-medium text-gray-900 mb-4">Monatliche Entwicklung</h3>
							<div class="h-64" id="monthly-chart">
								<canvas id="monthlyChart"></canvas>
							</div>
						</div>

						<!-- Einnahmen vs Ausgaben Vergleich -->
						<div class="bg-white rounded-lg shadow p-6">
							<h3 class="text-lg font-medium text-gray-900 mb-4">Einnahmen vs Ausgaben</h3>
							<div class="h-64">
								<canvas id="incomeExpenseChart"></canvas>
							</div>
						</div>
					</div>

					<!-- Verlaufs-Chart -->
					<div class="bg-white rounded-lg shadow p-6 mb-8">
						<h3 class="text-lg font-medium text-gray-900 mb-4">12-Monats Vorausschau</h3>
						<div class="h-80">
							<canvas id="trendChart"></canvas>
						</div>
					</div>

					<!-- Detaillierte Übersichten -->
					<div class="grid grid-cols-1 gap-8 mb-8">						
						<!-- Depot-Details -->
						if len(data.AssetOverview.Depots) > 0 {
							<div class="bg-white rounded-lg shadow">
								<div class="px-6 py-4 border-b border-gray-200">
									<h3 class="text-lg font-medium text-gray-900">Depots</h3>
								</div>
								<div class="divide-y divide-gray-200">
									for _, depot := range data.AssetOverview.Depots {
										<div class="px-6 py-4">
											<div class="flex justify-between items-center">
												<div>
													<p class="text-sm font-medium text-gray-900">{ depot.Name }</p>
													<p class="text-sm text-gray-500">{ depot.Broker }</p>
												</div>
												<p class="text-lg font-semibold text-gray-900">€{ fmt.Sprintf("%.2f", depot.TotalValue) }</p>
											</div>
										</div>
									}
								</div>
							</div>
						}
					</div>

					<!-- Aktuelle Transaktionen -->
					if len(data.RecentTransactions) > 0 {
						<div class="bg-white rounded-lg shadow">
							<div class="px-6 py-4 border-b border-gray-200">
								<h3 class="text-lg font-medium text-gray-900">Aktuelle Transaktionen</h3>
							</div>
							<div class="divide-y divide-gray-200">
								for _, transaction := range data.RecentTransactions {
									<div class="px-6 py-4">
										<div class="flex justify-between items-center">
											<div>
												<p class="text-sm font-medium text-gray-900">{ transaction.Description }</p>
												<div class="flex items-center text-sm text-gray-500 space-x-2">
													<span>{ transaction.Date.Format("02.01.2006") }</span>
													if transaction.Category != nil {
														<span>•</span>
														<span>{ transaction.Category.Name }</span>
													}
													if transaction.BankAccount != nil {
														<span>•</span>
														<span>{ transaction.BankAccount.Name }</span>
													}
												</div>
											</div>
											<div class="text-right">
												if transaction.Type == "income" {
													<p class="text-lg font-semibold text-green-600">+€{ fmt.Sprintf("%.2f", transaction.Amount) }</p>
												} else {
													<p class="text-lg font-semibold text-red-600">-€{ fmt.Sprintf("%.2f", transaction.Amount) }</p>
												}
												<p class="text-xs text-gray-400">{ transaction.Type }</p>
											</div>
										</div>
									</div>
								}
							</div>
							<div class="px-6 py-3 bg-gray-50 text-center">
								<a href="/transactions" class="text-sm text-blue-600 hover:text-blue-500">Alle Transaktionen anzeigen →</a>
							</div>
						</div>
					}

					<!-- JavaScript für Charts -->
					<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
					<script src="/static/js/dashboard-charts.js"></script>
				</div>
			</div>
		</div>
	}
}