package views

import (
	"fmt"

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

templ EditResourcePage(params EditResourcePageParams) {
	@layouts.Base(layouts.BaseParams{Title: "edit resource"}) {
		@partials.Header(partials.HeaderProps{User: params.User})
		<div class="container mx-auto px-4 py-8 max-w-2xl">
			<form
				class="card mb-8 group"
				hx-post={ templ.SafeURL(fmt.Sprintf("/resource/edit/%s", params.Resource.Rkey)) }
				hx-swap="none"
				hx-disabled-elt="#save-button,#cancel-button"
			>
				<div>
					<h1 class="text-3xl font-bold">Edit Custom Resource</h1>
				</div>
				<div class="flex flex-col sm:flex-row gap-2 justify-between">
					<div class="flex flex-col gap-2 w-full">
						<label for="title" class="font-medium text-sm">Title</label>
						<div x-data={ templ.JSONString(JsonText{Text: params.Resource.Title}) }>
							<input
								x-model="text"
								id="title"
								name="title"
								placeholder="e.g., Korean grammar Guide"
								class="input w-full"
								maxLength="100"
							/>
							<div class="text-right text-sm text-text-muted mt-1">
								<span x-text="text.length"></span> / 100
							</div>
						</div>
					</div>
					<div x-data={ templ.JSONString(JsonText{Text: params.Resource.Type.String()}) }>
						<div class="flex flex-col gap-2 w-full">
							<label for="type" class="font-medium text-sm">Type</label>
							<select name="type" id="type" x-model="text" class="input">
								<option value="" disabled="true">
									Select a resource type...
								</option>
								for _, l := range params.SortedResourceTypes {
									<option value={ l }>
										{ db.ToTitleCase(l.String()) }
									</option>
								}
							</select>
						</div>
					</div>
				</div>
				<div class="flex flex-col gap-2">
					<label for="link" class="font-medium text-sm">Author</label>
					<div x-data={ templ.JSONString(JsonText{Text: params.Resource.Author}) }>
						<input
							x-model="text"
							id="author"
							name="author"
							placeholder="e.g., Jinwoo Kim"
							class="input w-full"
							maxLength="100"
						/>
						<div class="text-right text-sm text-text-muted mt-1">
							<span x-text="text.length"></span> / 100
						</div>
					</div>
				</div>
				<div class="flex flex-col gap-2">
					<label for="link" class="font-medium text-sm">Link (optional)</label>
					{{
	link := ""
	if params.Resource.Link != nil {
		link = *params.Resource.Link
	}
					}}
					<div
						x-data={ fmt.Sprintf(`{
                            link: '%s',
                            isValid: true,
                            validateLink() {
                                if (this.link.trim() === '') {
                                    this.isValid = true;
                                    return;
                                }
                                this.isValid = this.link.startsWith('http://') || this.link.startsWith('https://');
                            }
                        }`, link) }
					>
						<input
							type="url"
							value={ link }
							name="link"
							id="link"
							class="input w-full"
							placeholder="https://..."
							x-model="link"
							@input="validateLink()"
							:class="{ 'border-red-500 focus:border-red-500 focus:ring-red-500': !isValid }"
						/>
						<div class="flex items-center text-sm text-text-muted mt-1">
							<span x-show="!isValid" x-transition class="text-red-500">
								Please enter a valid URL starting with http:// or https://
							</span>
							<div class="ml-auto">
								<span x-text="link.length"></span> / 2000
							</div>
						</div>
					</div>
				</div>
				<div class="flex flex-col gap-2 w-full">
					<label for="description" class="font-medium text-sm">Description</label>
					<div x-data="{ text: '' }" x-init="text = $el.querySelector('textarea').value">
						<textarea
							x-model="text"
							id="description"
							name="description"
							placeholder="Brief description of how this resource helped you..."
							class="input w-full"
							maxLength="256"
						>
							{ params.Resource.Description }
						</textarea>
						<div class="text-right text-sm text-text-muted mt-1">
							<span x-text="text.length"></span> / 256
						</div>
					</div>
				</div>
				<div class="flex flex-col sm:flex-row gap-4 mt-4">
					<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"
						onclick="window.location.href = '/profile/resources'"
						type="button"
						class="btn btn-secondary"
					>
						Cancel
					</button>
				</div>
			</form>
			<div class="flex flex-col sm:flex-row gap-4 items-center bg-bg-light text-red-500 rounded border w-full p-6">
				<div class="flex flex-col gap-1">
					<h3 class="font-medium">Delete this resource</h3>
					<p class="text-sm text-text-muted">
						This action cannot be undone. This will permanently delete this resource.
					</p>
				</div>
				<button
					id="delete-button"
					hx-disabled-elt="#delete-button,#save-button,#cancel-button"
					hx-delete={ templ.SafeURL(fmt.Sprintf("/resource/%s", params.Resource.Rkey)) }
					class="btn btn-dangerous w-full sm:w-fit whitespace-nowrap group"
					type="button"
				>
					<i class="w-4 h-4" data-lucide="trash-2"></i>
					Delete Resource
					<i class="w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" data-lucide="loader-circle"></i>
				</button>
			</div>
		</div>
	}
}