package view

import (
	"strconv"

	"github.com/rjNemo/rentease/internal/i18n"
	"github.com/rjNemo/rentease/internal/view/layout"
)

templ Reports(months []string, m int, year string) {
	@layout.BaseLayout() {
		<section class="container mx-auto px-4 mb-8">
			<hgroup class="flex flex-col">
				<h1 class="text-3xl font-bold text-primary">{ i18n.Localize(ctx, "report.title") }</h1>
				<h2 class="text-lg text-muted">{ i18n.Localize(ctx, "report.subtitle") }</h2>
			</hgroup>
		</section>
		<section class="container mx-auto px-4">
			<form hx-get="/reports/do" hx-target="#report" class="bg-base-200 p-6 rounded-lg shadow-md">
				<fieldset class="space-y-4">
					<legend class="text-lg font-semibold mb-4">{ i18n.Localize(ctx, "report.period") }</legend>
					<div class="flex gap-6 mb-4">
						<label for="month" class="flex items-center space-x-2 cursor-pointer">
							<input type="radio" id="month" name="period" value="month" checked class="radio radio-primary"/>
							<span>{ i18n.Localize(ctx, "report.period.monthly") }</span>
						</label>
						<label for="year" class="flex items-center space-x-2 cursor-pointer">
							<input type="radio" id="year" name="period" value="year" class="radio radio-primary"/>
							<span>{ i18n.Localize(ctx, "report.period.yearly") }</span>
						</label>
					</div>
					<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
						<label for="year" class="block">
							<span class="block text-sm font-medium mb-1">{ i18n.Localize(ctx, "report.year") }</span>
							<input type="number" id="year" name="year" value={ year } class="input input-primary w-full"/>
						</label>
						<label for="month" class="block">
							<span class="block text-sm font-medium mb-1">{ i18n.Localize(ctx, "report.month") }</span>
							<select name="month" id="month" autofocus class="select select-primary w-full">
								for i, month := range months {
									<option
										value={ strconv.Itoa(i + 1) }
										if i+1 == m {
											selected
										}
									>
										{ month }
									</option>
								}
							</select>
						</label>
					</div>
				</fieldset>
				<div class="mt-6 flex justify-end">
					<button class="btn btn-primary">
						{ i18n.Localize(ctx, "report.generate") }
					</button>
				</div>
			</form>
		</section>
		<section id="report" class=" px-4 mt-8"></section>
	}
}