package templates

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

templ inputForm() {
	{{
		urlParams := ctx.Value("urlParams").(url.Values)
		user := ctx.Value("user").(models.User)
	}}
	<div class="grid-sub divide-x-1 bg-neutral-300 max-md:flex max-md:flex-col">
		<div class="grid-cell col-span-2 md:col-span-1 max-md:grid grid-cols-2">
			<p class="font-bold uppercase">{ user.Vorname + " " + user.Name }</p>
			<div class="justify-self-end">
				<p class="text-sm">Überstunden</p>
				<p class="text-accent">4h 32min</p>
			</div>
		</div>
		<form id="timeRangeForm" method="GET" class="grid-cell flex flex-row col-span-3 md:col-span-3 gap-2 ">
			@lineComponent()
			<div class="flex flex-col gap-2 justify-between grow-1">
				<input type="date" value={ urlParams.Get("time_from") } name="time_from" class="w-full bg-neutral-100 placeholder:text-neutral-400 text-neutral-700 text-sm border border-neutral-0 rounded-md px-3 py-2 transition duration-300 ease focus:outline-none focus:border-neutral-400 hover:border-neutral-300" placeholder="Zeitraum von..."/>
				<input type="date" value={ urlParams.Get("time_to") } name="time_to" class="w-full bg-neutral-100 placeholder:text-neutral-400 text-neutral-700 text-sm border border-neutral-0 rounded-md px-3 py-2 transition duration-300 ease focus:outline-none focus:border-neutral-400 hover:border-neutral-300" placeholder="Zeitraum bis..."/>
			</div>
		</form>
		<div class="grid-cell content-end">
			<button type="submit" form="timeRangeForm" 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="">Anzeigen</p>
			</button>
		</div>
	</div>
}

templ dayComponent(workDay models.WorkDay) {
	{{
		work, pause := workDay.GetWorkTimeString()
		justify := ""
		if len(workDay.Bookings) <= 1 {
			justify = "justify-content: center"
		}
	}}
	<div class="grid-sub divide-x-1 hover:bg-neutral-200 transition-colors">
		<div class="grid-cell col-span-2 md:col-span-1 flex flex-row gap-2">
			@timeGaugeComponent(workDay.GetWorkDayProgress(ctx.Value("user").(models.User)), workDay.Day.Equal(time.Now().Truncate(24*time.Hour)), workDay.RequiresAction())
			<div>
				<p class=""><span class="font-bold uppercase hidden md:inline">{ workDay.Day.Format("Mon") }:</span> { workDay.Day.Format("02.01.2006") }</p>
				if work!="" {
					<p class=" text-sm mt-1">Arbeitszeit:</p>
					if (workDay.RequiresAction()) {
						<p class="text-red-600">Bitte anpassen</p>
					} else {
						<p class=" text-accent">{ work }</p>
					}
					<p class="text-neutral-500">{ pause }</p>
				}
			</div>
		</div>
		<div class="time-component flex flex-row col-span-3 md:col-span-3 gap-2 w-full grid-cell">
			@lineComponent()
			<form id={ "time-" + workDay.Day.Format("2006-01-02") } class="flex flex-col gap-2 group w-full justify-between" style={ justify } method="post">
				if len(workDay.Bookings) <= 1 && workDay.Bookings[len(workDay.Bookings)-1].CounterId == 0 {
					@noBookingComponent()
				} else {
					for _, booking := range workDay.Bookings {
						@bookingComponent(booking)
					}
				}
			</form>
		</div>
		<div class="grid-cell">
			@changeButtonComponent("time-" + workDay.Day.Format("2006-01-02"))
		</div>
	</div>
}

templ changeButtonComponent(id string) {
	<button type="button" class="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 hover:bg-neutral-700 disabled:pointer-events-none disabled:opacity-50 group" type="button" onclick={ templ.JSFuncCall("editDay", templ.JSExpression("this"), templ.JSExpression("event"), id) }>
		<p class="hidden md:block group-[.edit]:hidden">Ändern</p>
		<p class="hidden group-[.edit]:md:block">Absenden</p>
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4 md:hidden">
			<path d="m11.645 20.91-.007-.003-.022-.012a15.247 15.247 0 0 1-.383-.218 25.18 25.18 0 0 1-4.244-3.17C4.688 15.36 2.25 12.174 2.25 8.25 2.25 5.322 4.714 3 7.688 3A5.5 5.5 0 0 1 12 5.052 5.5 5.5 0 0 1 16.313 3c2.973 0 5.437 2.322 5.437 5.25 0 3.925-2.438 7.111-4.739 9.256a25.175 25.175 0 0 1-4.244 3.17 15.247 15.247 0 0 1-.383.219l-.022.012-.007.004-.003.001a.752.752 0 0 1-.704 0l-.003-.001Z"></path>
		</svg>
	</button>
}

templ timeGaugeComponent(progress uint8, today bool, warning bool) {
	{{
		var bgColor string
		switch {
		case (warning):
			bgColor = "bg-red-600"
			break
		case (progress > 0 && progress < 90):
			bgColor = "bg-orange-500"
			break
		case (90 <= progress && progress <= 110):
			bgColor = "bg-accent"
			break
		case (progress > 110):
			bgColor = "bg-purple-600"
			break
		default:
			bgColor = "bg-neutral-400"
			break
		}
	}}
	if today {
		<div class="flex-start flex w-2 h-full overflow-hidden rounded-full bg-neutral-300 print:hidden">
			<div class={ "flex w-full items-center justify-center overflow-hidden  rounded-full", bgColor } style={ fmt.Sprintf("height: %d%%", int(progress)) }></div>
		</div>
	} else {
		<div class={ "w-2 h-full bg-accent rounded-md", bgColor }></div>
	}
}

templ lineComponent() {
	<div class="flex flex-col w-2 py-2 items-center text-accent print:hidden">
		<svg class="size-2" viewBox="0 0 24 24" fill="currentColor">
			<polygon points="12,2 22,12 12,22 2,12"></polygon>
		</svg>
		<div class="w-[2px] bg-accent flex-grow -my-1"></div>
		<svg class="size-2" viewBox="0 0 24 24" fill="currentColor">
			<polygon points="12,2 22,12 12,22 2,12"></polygon>
		</svg>
	</div>
}

templ noBookingComponent() {
	<div class="flex flex-row gap-2 justify-strech">
		<button>Neue Buchung</button>
		// <p class="text-xs">Keine Buchung gefunden. Bitte Grund der Abwesenheit eingeben!</p>
		<select class="cursor-pointer rounded-md text-neutral-800 p-2 md:px-4 border text-center text-sm transition-colors border-neutral-900" disabled name="abwesenheit">
			<option value="0">-</option>
			<option value="1">Urlaub</option>
			<option value="2">Kurzarbeit</option>
			<option value="3">Krank</option>
			<option value="4">Kindkrank</option>
		</select>
	</div>
}

templ bookingComponent(booking models.Booking) {
	<div>
		<p class="text-neutral-500">
			<span class="text-neutral-700 group-[.edit]:hidden inline">{ booking.Timestamp.Format("15:04") }</span>
			<input disabled name={ "booking_" + strconv.Itoa(booking.CounterId) } type="time" value={ booking.Timestamp.Format("15:04") } class="text-neutral-700 group-[.edit]:inline hidden bg-neutral-100 text-sm border border-neutral-200 rounded-md px-3 py-2 transition duration-300 ease focus:outline-none focus:border-neutral-400 hover:border-neutral-300"/>
			{ booking.GetBookingType() }
		</p>
	</div>
}

templ LegendComponent() {
	<div class="flex flex-row gap-4 md:mx-[10%] print:hidden">
		<div class="flex flex-row items-center gap-2"><div class="rounded-full size-4 bg-red-600"></div><span>Fehler</span></div>
		<div class="flex flex-row items-center gap-2"><div class="rounded-full size-4 bg-orange-500"></div><span>Arbeitszeit unter regulär</span></div>
		<div class="flex flex-row items-center gap-2"><div class="rounded-full size-4 bg-accent"></div><span>Arbeitszeit vollständig</span></div>
		<div class="flex flex-row items-center gap-2"><div class="rounded-full size-4 bg-purple-600"></div><span>Überstunden</span></div>
		<div class="flex flex-row items-center gap-2"><div class="rounded-full size-4 bg-neutral-400"></div><span>Keine Buchungen</span></div>
	</div>
}