package ngtemplates

import (
	"fmt"
	"reichard.io/antholume/database"
	"reichard.io/antholume/graph"
)

type UserStatistics struct {
	WPM      UserTimeStatistics
	Duration UserTimeStatistics
	Words    UserTimeStatistics
}

type UserTimeStatistics struct {
	All   []UserStatisticEntry
	Year  []UserStatisticEntry
	Month []UserStatisticEntry
	Week  []UserStatisticEntry
}

type UserStatisticEntry struct {
	UserID string
	Value  string
}

// TODO
templ InfoCard(name string, size int, link string) {
}

// TODO
templ LeaderboardCard(name string, stats UserTimeStatistics) {
}

// TODO
templ StreakCard(streak database.UserStreak) {
}

templ Home(
	dailyReadData []database.GetDailyReadStatsRow,
	dailyReadSVG graph.SVGGraphData,
	userStatistics UserStatistics,
	streaks []database.UserStreak,
	databaseInfo struct{ DocumentsSize, ActivitySize, ProgressSize, DevicesSize int },
) {
	<div class="flex flex-col gap-4">
		<div class="w-full">
			<div class="relative w-full bg-white shadow-lg dark:bg-gray-700 rounded">
				<p
					class="absolute top-3 left-5 text-sm font-semibold text-gray-700 border-b border-gray-200 w-max dark:text-white dark:border-gray-500"
				>
					Daily Read Totals
				</p>
				<div class="relative">
					<svg viewBox="26 0 755 { dailyReadSVG.Height }" preserveAspectRatio="none" width="100%" height="6em">
						<!-- Bezier Line Graph -->
						<path
							fill="#316BBE"
							fill-opacity="0.5"
							stroke="none"
							d="{ dailyReadSVG.BezierPath } { dailyReadSVG.BezierFill }"
						></path>
						<path fill="none" stroke="#316BBE" d="{ dailyReadSVG.BezierPath }"></path>
					</svg>
					<div
						class="flex absolute w-full h-full top-0"
						style="width: calc(100%*31/30); transform: translateX(-50%); left: 50%"
					>
						<!-- Required for iOS "Hover" Events (onclick) -->
						for index := range dailyReadSVG.LinePoints {
							<div
								onclick
								class="opacity-0 hover:opacity-100 w-full"
								style="background: linear-gradient(rgba(128, 128, 128, 0.5), rgba(128, 128, 128, 0.5)) no-repeat center/2px 100%"
							>
								<div
									class="flex flex-col items-center p-2 rounded absolute top-3 dark:text-white text-xs pointer-events-none"
									style="transform: translateX(-50%); background-color: rgba(128, 128, 128, 0.2); left: 50%"
								>
									<span>{ dailyReadData[index].Date }</span>
									<span>{ fmt.Sprint(dailyReadData[index].MinutesRead) } minutes</span>
								</div>
							</div>
						}
					</div>
				</div>
			</div>
		</div>
		<div class="grid grid-cols-2 gap-4 md:grid-cols-4">
			@InfoCard("Documents", databaseInfo.DocumentsSize, "./documents")
			@InfoCard("Activity Records", databaseInfo.ActivitySize, "./activity")
			@InfoCard("Progress Records", databaseInfo.ProgressSize, "./progress")
			@InfoCard("Devices", databaseInfo.DevicesSize, "")
		</div>
		<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
			for _, item := range streaks {
				@StreakCard(item)
			}
		</div>
		<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
			@LeaderboardCard("WPM", userStatistics.WPM)
			@LeaderboardCard("Duration", userStatistics.Duration)
			@LeaderboardCard("Words", userStatistics.Words)
		</div>
	</div>
}