package templates

import (
	"backend/internal/auth"
	"backend/internal/db/sqlc"
)

templ PlanningPage(user *auth.User, csrfToken string, activePath string, tablos []sqlc.Tablo, agenda PlanningAgenda) {
	@AppLayout("Planning - Xtablo", user, csrfToken, activePath, tablos) {
		<div class="space-y-6">
			<div class="flex flex-wrap items-start justify-between gap-4">
				<div>
					<h1 class="text-[28px] font-semibold leading-tight">Planning</h1>
					<p class="mt-1 text-sm text-slate-600">{ agenda.RangeLabel }</p>
				</div>
				<nav class="flex flex-wrap items-center gap-2" aria-label="Planning navigation">
					<a href={ templ.SafeURL(agenda.PrevURL) } class="ui-button ui-button-soft ui-button-neutral ui-button-md">Previous 14 days</a>
					<a
						href={ templ.SafeURL(agenda.TodayURL) }
						if agenda.ShowingToday {
							class="ui-button ui-button-soft ui-button-neutral ui-button-md"
						} else {
							class="ui-button ui-button-solid ui-button-default ui-button-md"
						}
					>Today</a>
					<a href={ templ.SafeURL(agenda.NextURL) } class="ui-button ui-button-soft ui-button-neutral ui-button-md">Next 14 days</a>
				</nav>
			</div>
			if len(agenda.Events) == 0 {
				<div class="border border-slate-200 bg-slate-50 px-4 py-12">
					<h2 class="text-xl font-semibold leading-snug text-slate-800">No events in this range</h2>
					<p class="mt-2 text-base text-slate-600">Use the navigation controls to browse another 14-day window.</p>
				</div>
			} else {
				<ul class="divide-y divide-slate-200 border-y border-slate-200" aria-label="Planning agenda">
					for _, event := range agenda.Events {
						@PlanningEventListItem(event)
					}
				</ul>
			}
		</div>
	}
}

templ PlanningEventListItem(event PlanningEventRow) {
	<li class="bg-white px-4 py-3 hover:bg-slate-50">
		<a href={ templ.SafeURL(event.URL) } class="block focus:outline-none focus:ring-2 focus:ring-blue-600 focus:ring-offset-2" aria-label={ "Open event in tablo: " + event.Title }>
			<div class="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
				<div class="flex min-w-0 flex-col gap-1 sm:flex-row sm:items-center sm:gap-3">
					<span class="text-sm font-medium text-slate-700">{ event.DateLabel }</span>
					<span class="text-sm font-medium text-slate-700">{ event.TimeRange }</span>
					<span class="text-base font-semibold text-slate-900">{ event.Title }</span>
				</div>
				<div class="flex flex-wrap items-center gap-2 text-sm text-slate-600">
					<span class="inline-flex items-center gap-1">
						if event.HasColor {
							<span class="inline-block h-2.5 w-2.5 rounded-full" style={ "background-color: " + event.TabloColor }></span>
						}
						<span>{ event.TabloTitle }</span>
					</span>
					if event.HasLocation {
						<span aria-hidden="true">·</span>
						<span>{ event.Location }</span>
					}
				</div>
			</div>
		</a>
	</li>
}