package seasonsview

import "git.haelnorr.com/h/oslstats/internal/db"
import "git.haelnorr.com/h/oslstats/internal/view/baseview"
import "fmt"

templ FixtureUploadResultPage(fixture *db.Fixture) {
	{{
		backURL := fmt.Sprintf("/fixtures/%d", fixture.ID)
	}}
	@baseview.Layout(fmt.Sprintf("Upload Result — %s vs %s", fixture.HomeTeam.Name, fixture.AwayTeam.Name)) {
		<div class="max-w-screen-md mx-auto px-4 py-8">
			<!-- Header -->
			<div class="bg-mantle border border-surface1 rounded-lg overflow-hidden mb-6">
				<div class="bg-surface0 border-b border-surface1 px-6 py-6">
					<div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
						<div>
							<h1 class="text-2xl font-bold text-text mb-1">Upload Match Logs</h1>
							<p class="text-sm text-subtext1">
								{ fixture.HomeTeam.Name } vs { fixture.AwayTeam.Name }
								<span class="text-subtext0 ml-1">
									Round { fmt.Sprint(fixture.Round) }
								</span>
							</p>
						</div>
						<a
							href={ templ.SafeURL(backURL) }
							class="rounded-lg px-4 py-2 hover:cursor-pointer text-center
								bg-surface1 hover:bg-surface2 text-text transition"
						>
							Cancel
						</a>
					</div>
				</div>
			</div>
			<!-- Upload Form -->
			<div class="bg-mantle border border-surface1 rounded-lg overflow-hidden">
				<div class="bg-surface0 border-b border-surface1 px-4 py-3">
					<h2 class="text-lg font-bold text-text">Match Log Files</h2>
				</div>
				<div class="p-6">
					<p class="text-sm text-subtext1 mb-6">
						Upload the 3 period match log JSON files. Each file corresponds to one period of the match.
						The files will be validated for consistency.
					</p>
					<form
						hx-post={ fmt.Sprintf("/fixtures/%d/results/upload", fixture.ID) }
						hx-swap="none"
						hx-encoding="multipart/form-data"
						class="space-y-6"
					>
						<!-- Period 1 -->
						<div>
							<label class="block text-sm font-medium text-text mb-2">
								Period 1
							</label>
							<input
								type="file"
								name="period_1"
								accept=".json"
								required
								class="w-full px-3 py-2 bg-base border border-surface1 rounded-lg text-text
									file:mr-4 file:py-1 file:px-3 file:rounded file:border-0
									file:text-sm file:font-medium file:bg-blue file:text-mantle
									file:hover:bg-blue/80 file:hover:cursor-pointer file:transition
									focus:border-blue focus:outline-none"
							/>
						</div>
						<!-- Period 2 -->
						<div>
							<label class="block text-sm font-medium text-text mb-2">
								Period 2
							</label>
							<input
								type="file"
								name="period_2"
								accept=".json"
								required
								class="w-full px-3 py-2 bg-base border border-surface1 rounded-lg text-text
									file:mr-4 file:py-1 file:px-3 file:rounded file:border-0
									file:text-sm file:font-medium file:bg-blue file:text-mantle
									file:hover:bg-blue/80 file:hover:cursor-pointer file:transition
									focus:border-blue focus:outline-none"
							/>
						</div>
						<!-- Period 3 -->
						<div>
							<label class="block text-sm font-medium text-text mb-2">
								Period 3
							</label>
							<input
								type="file"
								name="period_3"
								accept=".json"
								required
								class="w-full px-3 py-2 bg-base border border-surface1 rounded-lg text-text
									file:mr-4 file:py-1 file:px-3 file:rounded file:border-0
									file:text-sm file:font-medium file:bg-blue file:text-mantle
									file:hover:bg-blue/80 file:hover:cursor-pointer file:transition
									focus:border-blue focus:outline-none"
							/>
						</div>
						<!-- Submit -->
						<div class="pt-2">
							<button
								type="submit"
								class="w-full px-4 py-3 bg-blue hover:bg-blue/80 text-mantle rounded-lg
									font-medium transition hover:cursor-pointer text-lg"
							>
								Upload & Validate
							</button>
						</div>
					</form>
				</div>
			</div>
		</div>
	}
}