package views

import (
	"fmt"

	"yoten.app/internal/db"
	"yoten.app/internal/server/views/layouts"
	"yoten.app/internal/server/views/partials"
)

templ EditProfilePage(params EditProfilePageParams) {
	@layouts.Base(layouts.BaseParams{Title: "edit profile"}) {
		@partials.Header(partials.HeaderProps{User: params.User})
		<div class="container mx-auto px-4 py-8 max-w-2xl">
			<form
				hx-post="/profile/edit"
				hx-swap="none"
				hx-disabled-elt="#save-button,#cancel-button"
				class="flex flex-col gap-8 group"
			>
				<div>
					<h1 class="text-3xl font-bold">Edit Profile</h1>
					<p class="text-text-muted mt-1">Update your display name and learning languages</p>
				</div>
				<div class="card">
					<h1 class="text-2xl font-bold">Profile Information</h1>
					<div class="flex flex-col gap-1">
						<label for="display-name" class="font-medium text-sm">Display Name</label>
						<div x-data={ templ.JSONString(JsonText{Text: params.Profile.DisplayName}) }>
							<input
								x-model="text"
								id="display-name"
								name="display_name"
								value={ params.Profile.DisplayName }
								placeholder="Enter your display name"
								class="input w-full"
								maxLength="64"
							/>
							<div class="text-right text-sm text-text-muted mt-1">
								<span x-text="text.length"></span> / 64
							</div>
						</div>
					</div>
					<div class="flex flex-col gap-1">
						<label for="location" class="font-medium text-sm">Location</label>
						<div x-data={ templ.JSONString(JsonText{Text: params.Profile.Location}) }>
							<input
								x-model="text"
								id="location"
								name="location"
								value={ params.Profile.Location }
								placeholder="Where are you based?"
								class="input w-full"
								maxLength="40"
							/>
							<div class="text-right text-sm text-text-muted mt-1">
								<span x-text="text.length"></span> / 40
							</div>
						</div>
					</div>
					<div class="flex flex-col gap-1">
						<label for="description" class="font-medium text-sm">About You</label>
						<div
							x-data="{ text: '' }"
							x-init="text = $el.querySelector('textarea').value"
						>
							<textarea
								x-model="text"
								id="description"
								name="description"
								placeholder="Tell others about your language learning journey, interests, or goals..."
								class="input w-full"
								maxLength="256"
								rows="3"
							>
								{ params.Profile.Description }
							</textarea>
							<div class="text-right text-sm text-text-muted mt-1">
								<span x-text="text.length"></span> / 256
							</div>
						</div>
					</div>
				</div>
				<div
					class="card"
					x-data="languagePicker()"
				>
					<div class="flex flex-col sm:flex-row gap-2 justify-between sm:items-center">
						<h1 class="text-2xl font-bold">Languages You're Learning</h1>
						<div class="pill pill-muted">
							<span x-text="selected.length"></span>/10 selected
						</div>
					</div>
					<p class="text-sm text-text-muted mt-1">
						Select up to 10 languages you're currently learning.
					</p>
					<div class="relative mt-4">
						<i data-lucide="search" class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-text-muted"></i>
						<input type="text" x-model.debounce.300ms="search" placeholder="Search languages..." class="input w-full pl-9"/>
					</div>
					<div x-show="selected.length > 0" class="mt-4">
						<h3 class="text-sm font-medium mb-2">Selected Languages:</h3>
						<div class="flex flex-wrap gap-2">
							<template x-for="lang in selectedObjects" :key="lang.Code">
								<div class="pill pill-primary flex items-center justify-center gap-2" x-init="lucide.createIcons()">
									<span x-text="lang.Flag + ' ' + lang.Name"></span>
									<button type="button" @click="toggle(lang.Code)" class="hover:text-text hover:cursor-pointer">
										<i class="w-4 h-4" data-lucide="x"></i>
									</button>
								</div>
							</template>
						</div>
					</div>
					<div class="grid grid-cols-1 md:grid-cols-2 gap-3 mt-4 border-t pt-4 max-h-72 overflow-y-auto">
						for _, l := range params.AllLanguages {
							<div
								key={ l.Code }
								x-show={ fmt.Sprintf("search === '' || '%s'.toLowerCase().includes(search.toLowerCase())", db.Languages[l.Code].Name) }
								@click={ fmt.Sprintf("toggle('%s')", l.Code) }
								:class={ fmt.Sprintf("isSelected('%s') ? 'btn-primary' : 'btn-secondary'", l.Code) }
								class="input flex items-center gap-3 cursor-pointer"
							>
								<input
									type="checkbox"
									name="languages[]"
									value={ l.Code }
									:checked={ fmt.Sprintf("isSelected('%s')", l.Code) }
									:disabled={ fmt.Sprintf("!isSelected('%s') && selected.length >= 10", l.Code) }
									class="pointer-events-none"
								/>
								<label class="pointer-events-none">
									<span>{ l.Flag } { l.Name }</span>
									if l.NativeName != nil {
										<span class="text-text-muted">({ *l.NativeName })</span>
									}
								</label>
							</div>
						}
					</div>
				</div>
				<div class="flex flex-col sm:flex-row gap-4 w-full">
					<button id="save-button" type="submit" class="btn btn-primary">
						<i class="w-4 h-4" data-lucide="save"></i>
						Save
						<i class="w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" data-lucide="loader-circle"></i>
					</button>
					<button id="cancel-button" type="button" class="w-full">
						<a href={ templ.SafeURL(fmt.Sprintf("/%s", params.User.Did)) } class="btn btn-secondary">
							Cancel
						</a>
					</button>
				</div>
			</form>
		</div>
		<script>
			function languagePicker() {
				return {
					search: '',
					all: {{ params.AllLanguages }} || [],
					selected: {{ params.InitialSelectedLanguages }} || [],

					get selectedObjects() {
						return this.all.filter(lang => this.selected.includes(lang.Code));
					},

					get filteredLanguages() {
						if (!this.search) return this.all;
						return this.all.filter(lang =>
							lang.Name.toLowerCase().includes(this.search.toLowerCase())
						);
					},

					isSelected(code) {
						return this.selected.includes(code);
					},

					toggle(code) {
						if (this.isSelected(code)) {
							this.selected = this.selected.filter(c => c !== code);
						} else {
							if (this.selected.length < 10) {
								this.selected.push(code);
							}
						}
					}
				}
			}
		</script>
	}
}