package templates

import (
	"arbeitszeitmessung/models"
	"fmt"
	"strconv"
	"time"
)

templ weekDayComponent(user models.User, day models.WorkDay) {
	{{ work, pause := day.GetWorkTimeString() }}
	<div class="flex flex-row gap-2">
		@timeGaugeComponent(day.GetWorkDayProgress(user), false, false)
		<div class="flex flex-col">
			<p class=""><span class="font-bold uppercase hidden md:inline">{ day.Day.Format("Mon") }:</span> { day.Day.Format("02.01.2006") }</p>
			<div class="flex flex-row gap-2">
				<span class="text-accent">{ work }</span>
				<span class="text-neutral-500">{ pause }</span>
			</div>
			<div class="flex flex-row gap-2 items-center">
				<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="size-4" viewBox="0 0 16 16">
					<path d="M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71z"></path>
					<path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m7-8A7 7 0 1 1 1 8a7 7 0 0 1 14 0"></path>
				</svg>
				if day.TimeFrom == day.TimeTo {
					<p>Keine Anwesenheit</p>
				} else {
					<span>{ day.TimeFrom.Format("15:04") }</span>
					<span>-</span>
					<span>{ day.TimeTo.Format("15:04") }</span>
				}
			</div>
		</div>
	</div>
}

templ employeComponent(week models.WorkWeek) {
	{{
		year, kw := week.WeekStart.ISOWeek()
	}}
	<div class="employeComponent grid-sub divide-x-1">
		<div class="grid-cell">
			<p class="font-bold uppercase">{ week.User.Vorname } { week.User.Name }</p>
			<p class="text-sm">Arbeitszeit</p>
			<p class="text-accent">{ week.GetWorkHourString() }</p>
		</div>
		<div class="grid-cell col-span-3 flex flex-col gap-2">
			for _, day := range week.WorkDays {
				@weekDayComponent(week.User, day)
			}
		</div>
		<form class="grid-cell flex flex-col justify-between gap-2" method="post">
			<p class="text-sm"><span class="">Woche:</span> { fmt.Sprintf("%02d-%d", kw, year) }</p>
			<input type="hidden" name="method" value="accept"/>
			<input type="hidden" name="user" value={ strconv.Itoa(week.User.PersonalNummer) }/>
			<input type="hidden" name="week" value={ week.WeekStart.Format(time.DateOnly) }/>
			<button type="submit" class="w-full bg-neutral-100 cursor-pointer rounded-md text-neutral-800 p-2 md:px-4 border text-center text-sm hover:text-white transition-colors border-neutral-900 focus:bg-neutral-700 active:bg-neutral-700 hover:bg-neutral-700 disabled:pointer-events-none disabled:opacity-50">
				<p class="">Bestätigen</p>
			</button>
		</form>
	</div>
}

templ userPresenceComponent(user models.User, present bool) {
	<div class="grid-cell group flex flex-row gap-2">
		if present {
			<div class="h-8 bg-accent rounded-md group-hover:text-black md:text-transparent text-center p-1">Anwesend</div>
		} else {
			<div class="h-8 bg-red-600 rounded-md group-hover:text-white md:text-transparent text-center p-1">Abwesend</div>
		}
		<p>{ user.Vorname } { user.Name }</p>
	</div>
}