package seasonsview

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

type FixtureJSON struct {
	ID       int    `json:"id"`
	HomeTeam string `json:"homeTeam"`
	AwayTeam string `json:"awayTeam"`
	Round    int    `json:"round"`
	GameWeek *int   `json:"gameWeek"`
}

func fixtureToJSON(f *db.Fixture) FixtureJSON {
	return FixtureJSON{
		ID:       f.ID,
		HomeTeam: f.HomeTeam.Name,
		AwayTeam: f.AwayTeam.Name,
		Round:    f.Round,
		GameWeek: f.GameWeek,
	}
}

func fixturesToJSON(fixtures []*db.Fixture) string {
	data := make([]FixtureJSON, len(fixtures))
	for i, f := range fixtures {
		data[i] = fixtureToJSON(f)
	}
	b, _ := json.Marshal(data)
	return string(b)
}

templ SeasonLeagueManageFixturesPage(season *db.Season, league *db.League, fixtures []*db.Fixture) {
	@baseview.Layout(fmt.Sprintf("%s - %s - Manage Fixtures", season.Name, league.Name)) {
		<div class="max-w-screen-2xl mx-auto px-4 py-8">
			<div class="flex items-center gap-4 mb-6">
				<a
					href={ templ.SafeURL(fmt.Sprintf("/seasons/%s/leagues/%s/fixtures", season.ShortName, league.ShortName)) }
					class="rounded-lg px-4 py-2 hover:cursor-pointer text-center
						bg-surface1 hover:bg-surface2 text-text transition"
				>
					&larr; Back to Fixtures
				</a>
				<h1 class="text-2xl font-bold text-text">Manage Fixtures - { season.Name } - { league.Name }</h1>
			</div>
			@SeasonLeagueManageFixtures(season, league, fixtures)
		</div>
	}
}

templ SeasonLeagueManageFixtures(season *db.Season, league *db.League, fixtures []*db.Fixture) {
	<div
		id="manage-fixtures-content"
		x-data={ fmt.Sprintf("fixturesManager(%s, '%s', '%s')", fixturesToJSON(fixtures), season.ShortName, league.ShortName) }
		x-cloak
	>
		<!-- Controls -->
		<div class="flex items-center gap-3 mb-6">
			<!-- Generate -->
			<div class="flex items-center gap-2">
				<label class="text-sm text-subtext0">Round:</label>
				<select
					x-model.number="generateRounds"
					class="py-2 px-3 rounded-lg text-sm bg-base border-2 border-overlay0
						focus:border-blue outline-none text-text"
				>
					<template x-for="r in availableRounds" :key="r">
						<option :value="r" x-text="r"></option>
					</template>
				</select>
				<button
					@click="generate()"
					:disabled="isGenerating || availableRounds.length === 0"
					class="rounded-lg px-4 py-2 hover:cursor-pointer text-center text-sm
						bg-blue hover:bg-blue/80 text-mantle transition
						disabled:bg-blue/40 disabled:cursor-not-allowed"
				>
					<span x-text="isGenerating ? 'Generating...' : 'Generate Round'"></span>
				</button>
			</div>
			<!-- Delete All -->
			<button
				x-show="allFixtures.length > 0"
				@click="deleteAll()"
				class="rounded-lg px-4 py-2 hover:cursor-pointer text-center text-sm
					bg-red hover:bg-red/80 text-mantle transition"
			>
				Delete All
			</button>
			<!-- Save / Reset -->
			<div x-show="unsavedChanges" class="flex items-center gap-2 ml-auto">
				<span
					x-show="!canSave()"
					class="text-yellow text-xs"
				>
					All game weeks must have at least 1 fixture
				</span>
				<button
					@click="reset()"
					class="rounded-lg px-4 py-2 hover:cursor-pointer text-center text-sm
						bg-surface1 hover:bg-surface2 text-text transition"
				>
					Reset
				</button>
				<button
					@click="save()"
					:disabled="isSaving || !canSave()"
					class="rounded-lg px-4 py-2 hover:cursor-pointer text-center text-sm
						bg-green hover:bg-green/75 text-mantle transition
						disabled:bg-green/40 disabled:cursor-not-allowed"
				>
					<span x-text="isSaving ? 'Saving...' : 'Save'"></span>
				</button>
			</div>
		</div>
		<!-- Main content panels -->
		<div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
			<!-- LEFT PANEL: Game Weeks -->
			<div class="lg:col-span-2 bg-surface0 border border-surface1 rounded-lg p-4 min-h-96">
				<!-- List View -->
				<div x-show="selectedGameWeek === null">
					<h3 class="text-lg font-bold text-text mb-4">Game Weeks</h3>
					<div x-show="allGameWeekNumbers.length === 0" class="text-subtext0 text-sm italic mb-4">
						No game weeks yet. Generate fixtures to get started.
					</div>
					<div class="space-y-2">
						<template x-for="week in allGameWeekNumbers" :key="week">
							<div
								class="bg-mantle border border-surface1 rounded-lg p-4
									hover:bg-surface1 transition group relative"
								:class="{ 'border-blue/50': dropTarget === week }"
								@click="selectGameWeek(week)"
								@dragover.prevent="dropTarget = week"
								@dragleave="if (dropTarget === week) dropTarget = null"
								@drop.prevent="onDrop(week)"
							>
								<div class="flex items-center justify-between hover:cursor-pointer">
									<div>
										<span class="font-semibold text-text" x-text="'Game Week ' + week"></span>
										<span class="text-subtext0 text-sm ml-2">
											(<span x-text="getFixtureCount(week)"></span>
											<span x-text="getFixtureCount(week) === 1 ? 'fixture' : 'fixtures'"></span>)
										</span>
									</div>
									<!-- Preview of first few fixtures -->
									<div class="flex items-center gap-2">
										<template x-for="f in getPreview(week)" :key="f.id">
											<span class="text-xs text-subtext0 bg-surface0 px-2 py-0.5 rounded">
												<span x-text="f.homeTeam"></span> vs <span x-text="f.awayTeam"></span>
											</span>
										</template>
										<span
											x-show="getFixtureCount(week) > 3"
											class="text-xs text-subtext1"
											x-text="'+ ' + (getFixtureCount(week) - 3) + ' more'"
										></span>
									</div>
								</div>
							</div>
						</template>
					</div>
					<!-- Add Game Week -->
					<button
						@click="addGameWeek()"
						class="w-full mt-3 py-3 border-2 border-dashed border-surface1 rounded-lg
							text-subtext0 hover:text-text hover:border-surface2
							transition hover:cursor-pointer text-sm"
					>
						+ Add Game Week
					</button>
				</div>
				<!-- Detail View -->
				<div x-show="selectedGameWeek !== null">
					<div class="flex items-center gap-3 mb-4">
						<button
							@click="backToList()"
							class="text-blue hover:text-blue/80 transition hover:cursor-pointer text-sm"
						>
							&larr; Back
						</button>
						<h3 class="text-lg font-bold text-text" x-text="'Game Week ' + selectedGameWeek"></h3>
						<span class="text-subtext0 text-sm">
							(<span x-text="getFixtureCount(selectedGameWeek)"></span>
							<span x-text="getFixtureCount(selectedGameWeek) === 1 ? 'fixture' : 'fixtures'"></span>)
						</span>
						<!-- Delete Week (only if empty) -->
						<button
							x-show="getFixtureCount(selectedGameWeek) === 0"
							@click="deleteGameWeek(selectedGameWeek)"
							class="ml-auto text-red hover:text-red/80 transition hover:cursor-pointer text-sm"
						>
							Delete Week
						</button>
					</div>
					<!-- Drop Zone -->
					<div
						class="bg-mantle border-2 rounded-lg p-4 min-h-48 transition-colors"
						:class="dropTarget === selectedGameWeek ? 'border-blue/50' : 'border-surface1'"
						@dragover.prevent="dropTarget = selectedGameWeek"
						@dragleave="if (dropTarget === selectedGameWeek) dropTarget = null"
						@drop.prevent="onDrop(selectedGameWeek)"
					>
						<div x-show="getFixtureCount(selectedGameWeek) === 0" class="text-subtext1 text-sm italic text-center py-8">
							Drop fixtures here
						</div>
						<div class="space-y-2">
							<template x-for="fixture in getGameWeekFixtures(selectedGameWeek)" :key="fixture.id">
								<div
									draggable="true"
									@dragstart="onDragStart($event, fixture)"
									@dragend="onDragEnd()"
									class="bg-surface0 border border-surface1 rounded-lg px-4 py-3
										cursor-grab active:cursor-grabbing hover:bg-surface1 transition
										flex items-center justify-between"
									:class="{ 'opacity-50': draggedFixture && draggedFixture.id === fixture.id }"
								>
									<div class="flex items-center gap-3">
										<span class="text-xs font-mono text-subtext0 bg-mantle px-2 py-0.5 rounded">
											R<span x-text="fixture.round"></span>
										</span>
										<span class="text-text" x-text="fixture.homeTeam"></span>
										<span class="text-subtext0 text-sm">vs</span>
										<span class="text-text" x-text="fixture.awayTeam"></span>
									</div>
									<button
										@click.stop="unallocateFixture(fixture)"
										class="text-subtext0 hover:text-red transition hover:cursor-pointer text-xs"
										title="Remove from game week"
									>
										&#10005;
									</button>
								</div>
							</template>
						</div>
					</div>
				</div>
			</div>
			<!-- RIGHT PANEL: Unallocated Fixtures -->
			<div class="bg-surface0 border border-surface1 rounded-lg p-4 min-h-96">
				<h3 class="text-lg font-bold text-text mb-4">
					Unallocated
					<span class="text-subtext0 font-normal text-sm">
						(<span x-text="unallocatedFixtures.length"></span>)
					</span>
				</h3>
				<div
					class="space-y-2 max-h-[600px] overflow-y-auto transition-colors rounded-lg p-1"
					:class="dropTarget === 'unallocated' ? 'bg-surface1/30' : ''"
					@dragover.prevent="dropTarget = 'unallocated'"
					@dragleave="if (dropTarget === 'unallocated') dropTarget = null"
					@drop.prevent="onDrop('unallocated')"
				>
					<div x-show="unallocatedFixtures.length === 0" class="text-subtext1 text-sm italic text-center py-8">
						<span x-show="allFixtures.length === 0">No fixtures generated yet.</span>
						<span x-show="allFixtures.length > 0">All fixtures allocated!</span>
					</div>
					<template x-for="fixture in unallocatedFixtures" :key="fixture.id">
						<div
							draggable="true"
							@dragstart="onDragStart($event, fixture)"
							@dragend="onDragEnd()"
							class="bg-mantle border border-surface1 rounded-lg px-4 py-3
								cursor-grab active:cursor-grabbing hover:bg-surface1 transition"
							:class="{ 'opacity-50': draggedFixture && draggedFixture.id === fixture.id }"
						>
							<div class="flex items-center gap-3">
								<span class="text-xs font-mono text-subtext0 bg-surface0 px-2 py-0.5 rounded">
									R<span x-text="fixture.round"></span>
								</span>
								<span class="text-text" x-text="fixture.homeTeam"></span>
								<span class="text-subtext0 text-sm">vs</span>
								<span class="text-text" x-text="fixture.awayTeam"></span>
							</div>
						</div>
					</template>
				</div>
			</div>
		</div>
		<!-- Alpine.js component -->
		<script>
			document.addEventListener("alpine:init", () => {
				Alpine.data(
					"fixturesManager",
					(initialFixtures, seasonShortName, leagueShortName) => ({
						allFixtures: initialFixtures || [],
						_initialFixtures: JSON.parse(JSON.stringify(initialFixtures || [])),
						seasonShortName: seasonShortName,
						leagueShortName: leagueShortName,

						// UI state
						selectedGameWeek: null,
						unsavedChanges: false,
						isSaving: false,
						isGenerating: false,
						generateRounds: null,

						init() {
							this.generateRounds =
								this.availableRounds.length > 0 ? this.availableRounds[0] : 1;
						},

						// Drag state
						draggedFixture: null,
						dropTarget: null,

						// Computed
						get unallocatedFixtures() {
							return this.allFixtures
								.filter((f) => f.gameWeek === null)
								.sort((a, b) => a.round - b.round || a.id - b.id);
						},

						get allGameWeekNumbers() {
							const weeks = new Set();
							for (const f of this.allFixtures) {
								if (f.gameWeek !== null) {
									weeks.add(f.gameWeek);
								}
							}
							// Also include manually added empty weeks
							for (const w of this._emptyWeeks || []) {
								weeks.add(w);
							}
							return [...weeks].sort((a, b) => a - b);
						},

						get existingRounds() {
							const rounds = new Set();
							for (const f of this.allFixtures) {
								rounds.add(f.round);
							}
							return rounds;
						},

						get availableRounds() {
							const taken = this.existingRounds;
							const maxTaken = taken.size > 0 ? Math.max(...taken) : 0;
							const limit = maxTaken + 5;
							const available = [];
							for (let i = 1; i <= limit; i++) {
								if (!taken.has(i)) available.push(i);
							}
							return available;
						},

						// Track empty weeks that user created
						// Default to [1] if no fixtures have game weeks assigned
						_emptyWeeks: (initialFixtures || []).some(
							(f) => f.gameWeek !== null,
						)
							? []
							: [1],

						getGameWeekFixtures(week) {
							return this.allFixtures
								.filter((f) => f.gameWeek === week)
								.sort((a, b) => a.round - b.round || a.id - b.id);
						},

						getFixtureCount(week) {
							return this.allFixtures.filter((f) => f.gameWeek === week).length;
						},

						getPreview(week) {
							return this.getGameWeekFixtures(week).slice(0, 3);
						},

						// Game week management
						addGameWeek() {
							const existing = this.allGameWeekNumbers;
							const next = existing.length > 0 ? Math.max(...existing) + 1 : 1;
							this._emptyWeeks.push(next);
							this.unsavedChanges = true;
						},

						deleteGameWeek(week) {
							if (this.getFixtureCount(week) > 0) return;
							this._emptyWeeks = this._emptyWeeks.filter((w) => w !== week);
							if (this.selectedGameWeek === week) {
								this.selectedGameWeek = null;
							}
							this.unsavedChanges = true;
						},

						selectGameWeek(week) {
							this.selectedGameWeek = week;
						},

						backToList() {
							this.selectedGameWeek = null;
						},

						// Drag and drop
						onDragStart(event, fixture) {
							this.draggedFixture = fixture;
							event.dataTransfer.effectAllowed = "move";
							event.dataTransfer.setData("text/plain", fixture.id);
						},

						onDragEnd() {
							this.draggedFixture = null;
							this.dropTarget = null;
						},

						onDrop(target) {
							if (!this.draggedFixture) return;

							const fixture = this.allFixtures.find(
								(f) => f.id === this.draggedFixture.id,
							);
							if (!fixture) return;

							if (target === "unallocated") {
								fixture.gameWeek = null;
							} else {
								fixture.gameWeek = target;
								// Remove from empty weeks if it now has fixtures
								this._emptyWeeks = this._emptyWeeks.filter((w) => w !== target);
							}

							this.unsavedChanges = true;
							this.draggedFixture = null;
							this.dropTarget = null;
						},

						unallocateFixture(fixture) {
							const f = this.allFixtures.find((ff) => ff.id === fixture.id);
							if (f) {
								const oldWeek = f.gameWeek;
								f.gameWeek = null;
								// If the old week is now empty, track it
								if (oldWeek !== null && this.getFixtureCount(oldWeek) === 0) {
									this._emptyWeeks.push(oldWeek);
								}
								this.unsavedChanges = true;
							}
						},

						// Validation
						canSave() {
							const weeks = this.allGameWeekNumbers;
							if (weeks.length === 0) return false;
							for (const week of weeks) {
								if (this.getFixtureCount(week) === 0) return false;
							}
							return true;
						},

						reset() {
							this.allFixtures = JSON.parse(
								JSON.stringify(this._initialFixtures),
							);
							this._emptyWeeks = this._initialFixtures.some(
								(f) => f.gameWeek !== null,
							)
								? []
								: [1];
							this.selectedGameWeek = null;
							this.unsavedChanges = false;
						},

						// Server actions
						generate() {
							if (this.generateRounds < 1) return;
							this.isGenerating = true;

							const form = new FormData();
							form.append("season_short_name", this.seasonShortName);
							form.append("league_short_name", this.leagueShortName);
							form.append("round", this.generateRounds);

							htmx
								.ajax("POST", "/fixtures/generate", {
									target: "#manage-fixtures-content",
									swap: "outerHTML",
									values: Object.fromEntries(form),
								})
								.finally(() => {
									this.isGenerating = false;
								});
						},

						save() {
							if (!this.canSave()) return;
							this.isSaving = true;

							const params = new URLSearchParams();
							params.append("season_short_name", this.seasonShortName);
							params.append("league_short_name", this.leagueShortName);

							this.allFixtures.forEach((f, i) => {
								params.append("allocations[" + i + "][id]", f.id);
								params.append(
									"allocations[" + i + "][game_week]",
									f.gameWeek !== null ? f.gameWeek : 0,
								);
							});

							fetch("/fixtures/update-game-weeks", {
								method: "POST",
								headers: {
									"Content-Type": "application/x-www-form-urlencoded",
								},
								body: params.toString(),
							})
								.then((response) => {
									if (response.ok) {
										this.unsavedChanges = false;
									}
									this.isSaving = false;
								})
								.catch(() => {
									this.isSaving = false;
								});
						},

						deleteAll() {
							const seasonShort = this.seasonShortName;
							const leagueShort = this.leagueShortName;

							window.dispatchEvent(
								new CustomEvent("confirm-action", {
									detail: {
										title: "Delete All Fixtures",
										message:
											"This will delete all fixtures for this league. This action cannot be undone.",
										action: () => {
											htmx.ajax(
												"DELETE",
												"/seasons/" +
													seasonShort +
													"/leagues/" +
													leagueShort +
													"/fixtures",
												{
													target: "#manage-fixtures-content",
													swap: "outerHTML",
												},
											);
										},
									},
								}),
							);
						},
					}),
				);
			});
		</script>
	</div>
}