package forms

import (
	"fmt"
	"strconv"
	"errors"
	"github.com/onsonr/sonr/pkg/blocks/layout"
)

type CreateProfileData struct {
	TurnstileSiteKey string
	FirstNumber      int
	LastNumber       int
}

func (d CreateProfileData) IsHumanLabel() string {
	return fmt.Sprintf("What is %d + %d?", d.FirstNumber, d.LastNumber)
}

func ValidateCreateProfileForm(formData map[string][]string) error {
	// Validate ishuman slider
	ishumanValues := formData["is_human"]
	if len(ishumanValues) == 0 {
		return errors.New("human verification is required")
	}

	ishumanSum, err := strconv.Atoi(ishumanValues[0])
	if err != nil {
		return errors.New("invalid human verification value")
	}

	// Get the expected sum from the form data
	firstNum, _ := strconv.Atoi(formData["first_number"][0])
	lastNum, _ := strconv.Atoi(formData["last_number"][0])
	expectedSum := firstNum + lastNum

	if ishumanSum != expectedSum {
		return errors.New("incorrect sum for human verification")
	}

	return nil
}

// ProfileForm is a standard form styled like a card
templ CreateProfile(action string, method string, data CreateProfileData) {
	<form action={ templ.SafeURL(action) } method={ method }>
		<sl-card class="card-form gap-4 max-w-lg">
			<div slot="header">
				<div class="w-full py-1">
					<sl-progress-bar value="50"></sl-progress-bar>
				</div>
			</div>
			@layout.Rows() {
				<sl-input name="first_name" placeholder="Steve" type="text" label="First Name" required autofocus></sl-input>
				<sl-input name="last_name" placeholder="J" maxlength="1" type="text" label="Last Initial"></sl-input>
			}
			@layout.Spacer()
			<sl-input name="handle" placeholder="thoughtdiff" type="text" label="Handle" minlength="4" maxlength="12" required>
				<div slot="prefix">
					<sl-icon name="at-sign" library="sonr"></sl-icon>
				</div>
			</sl-input>
			@layout.Spacer()
			<sl-range 
				name="is_human" 
				label={ data.IsHumanLabel() } 
				help-text="Prove you are a human." 
				min="0" 
				max={ fmt.Sprint(data.FirstNumber + data.LastNumber) }
				step="1"
				onchange="validateSum(this)"
			></sl-range>
			<script>
				function validateSum(slider) {
					const expectedSum = { fmt.Sprint(data.FirstNumber + data.LastNumber) };
					const value = parseInt(slider.value);
					if (value !== expectedSum) {
						slider.setCustomValidity("Please select the correct sum");
					} else {
						slider.setCustomValidity("");
					}
				}
			</script>
			<div slot="footer">
				<sl-button href="/" outline>
					<sl-icon slot="prefix" name="arrow-left" library="sonr"></sl-icon>
					Cancel
				</sl-button>
				<sl-button type="submit">
					Next
					<sl-icon slot="suffix" name="arrow-right" library="sonr"></sl-icon>
				</sl-button>
			</div>
			<style>
  		.card-form [slot='footer'] {
    		display: flex;
    		justify-content: space-between;
    		align-items: center;
  		}
		</style>
		</sl-card>
	</form>
}

templ isHumanSlider(targetSum string) {
}