package templates

import "backend/internal/web/ui"

// SignupPage renders the full /signup page wrapped in the base Layout.
// It delegates the form section to SignupFormFragment so HTMX can swap just the
// form on validation errors without re-rendering the surrounding shell.
templ SignupPage(form SignupForm, errs SignupErrors, csrfToken string, providers AuthProviderButtons) {
	@Layout("Sign up", nil, csrfToken) {
		<div class="flex min-h-[60vh] items-start justify-center pt-16">
			@ui.Card(ui.CardProps{Body: signupCardBody(form, errs, csrfToken, providers)})
		</div>
	}
}

templ signupCardBody(form SignupForm, errs SignupErrors, csrfToken string, providers AuthProviderButtons) {
	<div class="w-full max-w-sm px-6 py-8">
		<h1 class="mb-6 text-2xl font-semibold">Create your account</h1>
		@AuthProviderButtonsBlock(providers)
		@SignupFormFragment(form, errs, csrfToken)
	</div>
}

// SignupFormFragment is the bare form used for HTMX swaps.
// hx-post targets this component itself so the form can be replaced inline
// on validation failure (D-19, D-25).
// The outer id="signup-form" must match the hx-target on this element.
templ SignupFormFragment(form SignupForm, errs SignupErrors, csrfToken string) {
	<form
		id="signup-form"
		method="POST"
		action="/signup"
		hx-post="/signup"
		hx-target="#signup-form"
		hx-swap="outerHTML"
		class="space-y-5"
	>
		@ui.CSRFField(csrfToken)
		@GeneralError(errs.General)
		<div>
			<label for="email" class="block text-sm font-medium text-slate-700">Email address</label>
			<input
				id="email"
				type="email"
				name="email"
				value={ form.Email }
				required
				autocomplete="email"
				class="mt-1 block w-full rounded border border-slate-300 px-3 py-2 text-sm placeholder-slate-400 focus:border-slate-500 focus:outline-none"
				placeholder="you@example.com"
			/>
			@FieldError(errs.Email)
		</div>
		<div>
			<label for="password" class="block text-sm font-medium text-slate-700">Password</label>
			<input
				id="password"
				type="password"
				name="password"
				required
				autocomplete="new-password"
				class="mt-1 block w-full rounded border border-slate-300 px-3 py-2 text-sm placeholder-slate-400 focus:border-slate-500 focus:outline-none"
				placeholder="12 characters minimum"
			/>
			@FieldError(errs.Password)
		</div>
		@ui.Button(ui.ButtonProps{
			Label:   "Create account",
			Variant: ui.ButtonVariantDefault,
			Tone:    ui.ButtonToneSolid,
			Size:    ui.SizeMD,
			Type:    "submit",
		})
	</form>
}
