package templates

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

templ inputForm(){
	{{
		urlParams := ctx.Value("urlParams").(url.Values)
	}}
	<div class="bg-neutral-300 p-2 col-span-2 md:col-span-1">
		<p class="font-bold uppercase">Tom Tröger</p>
		<p class="text-sm">Überstunden</p>
		<p class="text-accent">4h 32min</p>
	</div>
	<form id="timeRangeForm" method="GET" class="bg-neutral-300 flex flex-row col-span-3 md:col-span-3 p-2 gap-2 ">
		// <input type="hidden" value={urlParams.Get("card_uid")} name="card_uid" class="">
		@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-200 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-200 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="bg-neutral-300 border-r-0 p-2">
		<button type="submit" form="timeRangeForm" class="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="hidden md:block" >Senden</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" />
  </svg>
		</button>
	</div>
}

templ bookingComponent(booking models.Booking) {
	<div>
		<p>{booking.Timestamp.Local().Format("15:04")} <span class="text-neutral-500">{booking.GetBookingType()}</span></p>
	</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" />
	    </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" />
	    </svg>
	</div>
}

templ dayComponent(workDay models.WorkDay, last bool){
	{{ last_border := ""
		if(last) {
			last_border = "border-b-0"
		}
	}}
	<div class={"p-2 col-span-2 md:col-span-1 flex flex-row gap-2", last_border}>
		@timeGaugeComponent(workDay.GetWorkDayProgress(), workDay.Day.Equal(time.Now().Truncate(24 * time.Hour)), workDay.RequiresAction())
		<div>
			<p class="" ><span class="font-bold uppercase" >{workDay.Day.Format("Mon")}:</span> {workDay.Day.Format("02.01.2006")}</p>
			<p class=" text-sm mt-1">Arbeitszeit</p>
			if (workDay.RequiresAction()) {
				<p class="text-red-600">Bitte anpassen</p>
			}else{
			<p class=" text-accent">{workDay.GetWorkTimeString()}</p>
			}
		</div>
	</div>
	<div class={"flex flex-row col-span-3 md:col-span-3 gap-2 w-full p-2", last_border}>
		@lineComponent()
		<div class="flex flex-col gap-2 justify-between">
		for _, booking := range workDay.Bookings {
			@bookingComponent(booking)
		}
		</div>
	</div>
	<div class={"border-r-0 p-2", last_border}>
		<button id={"edit-" + workDay.Day.Format("2006-01-02")} 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 focus:bg-neutral-700 active:bg-neutral-700 hover:bg-neutral-700 disabled:pointer-events-none disabled:opacity-50" type="button">
		<p class="hidden md:block" >Ändern</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" />
  </svg>
		</button>
	</div>
}

templ allBookings(bookings []models.WorkDay) {
	for index, bookingGroup := range bookings {
		@dayComponent(bookingGroup, index == len(bookings) -1)
	}
}

templ timeGaugeComponent(progress uint8, today bool, warning bool){
	{{
		var bgColor string
		switch  {
			case (warning):
			bgColor = "bg-red-600"
			break
			case (progress > 0 && progress < 80):
			bgColor = "bg-orange-500"
			break
			case (80 < 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-200 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 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>
}

templ OverviewPage(bookings []models.WorkDay){
	@Style()
	<div class="grid grid-cols-6 md:grid-cols-5 items-strech md:mx-[10%] divide-x-1 divide-y-1 divide-neutral-400 border-neutral-400 border-0" >
		@inputForm()
	   	@allBookings(bookings)
	</div>
	@LegendComponent()


}