package pages

import "tankstopp/internal/views/components"

templ AuthLayout(title string) {
	<!DOCTYPE html>
	<html lang="en">
		<head>
			<meta charset="UTF-8"/>
			<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
			<title>{ title } - TankStopp</title>
			<link href="https://cdn.jsdelivr.net/npm/@tabler/core@1.0.0-beta17/dist/css/tabler.min.css" rel="stylesheet"/>
			<link href="https://cdn.jsdelivr.net/npm/@tabler/icons@latest/icons-sprite.svg" rel="stylesheet"/>
			<link href="/static/style.css" rel="stylesheet"/>
		</head>
		<body class="d-flex flex-column">
			<div class="page page-center">
				<div class="container container-tight py-4">
					<div class="text-center mb-4">
						<a href="/" class="navbar-brand navbar-brand-autodark">
							@components.Icon("fuel", 48)
							TankStopp
						</a>
					</div>
					{ children... }
				</div>
			</div>
			<script src="https://cdn.jsdelivr.net/npm/@tabler/core@1.0.0-beta17/dist/js/tabler.min.js"></script>
			<script>
            function togglePassword(fieldName) {
                const passwordInput = document.querySelector(`input[name="${fieldName}"]`);
                const icon = passwordInput.nextElementSibling.querySelector('svg');

                if (passwordInput.type === 'password') {
                    passwordInput.type = 'text';
                    icon.innerHTML = `
                        <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                        <line x1="3" y1="3" x2="21" y2="21"/>
                        <path d="M10.584 10.587a2 2 0 0 0 2.828 2.83"/>
                        <path d="M9.363 5.365a9.466 9.466 0 0 1 2.637 -.365c4 0 7.333 2.333 10 7c-.778 1.361 -1.612 2.524 -2.503 3.488m-2.14 1.861c-1.631 1.1 -3.415 1.651 -5.357 1.651c-4 0 -7.333 -2.333 -10 -7c1.369 -2.395 2.913 -4.175 4.632 -5.341"/>
                    `;
                } else {
                    passwordInput.type = 'password';
                    icon.innerHTML = `
                        <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                        <circle cx="12" cy="12" r="2"/>
                        <path d="M22 12c-2.667 4.667 -6 7 -10 7s-7.333 -2.333 -10 -7c2.667 -4.667 6 -7 10 -7s7.333 2.333 10 7"/>
                    `;
                }
            }
        </script>
		</body>
	</html>
}

templ LoginPage(errorMessage string) {
	@AuthLayout("Login") {
		<div class="card card-md">
			<div class="card-body">
				<h2 class="h2 text-center mb-4">Login to your account</h2>
				if errorMessage != "" {
					@components.Alert("danger", errorMessage)
				}
				@components.Form("post", "/login") {
					@components.FormGroup("Username", "") {
						@components.Input("username", "text", "Enter your username", "", true)
					}
					@components.FormGroup("Password", "") {
						@components.PasswordInput("password", "Enter your password", true)
					}
					<div class="form-footer">
						<button type="submit" class="btn btn-primary w-100">
							@components.Icon("lock", 24)
							Sign in
						</button>
					</div>
				}
			</div>
		</div>
		<div class="text-center text-muted mt-3">
			Don't have an account yet?
			<a href="/register" tabindex="-1">Sign up</a>
		</div>
	}
}

templ RegisterPage(errorMessage string) {
	@AuthLayout("Register") {
		<div class="card card-md">
			<div class="card-body">
				<h2 class="h2 text-center mb-4">Create new account</h2>
				if errorMessage != "" {
					@components.Alert("danger", errorMessage)
				}
				@components.Form("post", "/register") {
					@components.FormGroup("Username", "Choose a unique username") {
						@components.Input("username", "text", "Enter your username", "", true)
					}
					@components.FormGroup("Email", "Enter a valid email address") {
						@components.Input("email", "email", "Enter your email", "", true)
					}
					@components.FormGroup("Password", "Password must be at least 8 characters") {
						@components.PasswordInput("password", "Enter your password", true)
					}
					@components.FormGroup("Confirm Password", "") {
						@components.PasswordInput("confirm_password", "Confirm your password", true)
					}
					@components.FormGroup("Base Currency", "Choose your preferred currency for fuel prices") {
						@components.Select("base_currency", true) {
							@components.Option("EUR", "EUR - Euro", false)
							@components.Option("USD", "USD - US Dollar", false)
							@components.Option("GBP", "GBP - British Pound", false)
							@components.Option("CHF", "CHF - Swiss Franc", false)
							@components.Option("JPY", "JPY - Japanese Yen", false)
							@components.Option("CAD", "CAD - Canadian Dollar", false)
							@components.Option("AUD", "AUD - Australian Dollar", false)
						}
					}
					<div class="form-footer">
						<button type="submit" class="btn btn-primary w-100">
							@components.Icon("user", 24)
							Create account
						</button>
					</div>
				}
			</div>
		</div>
		<div class="text-center text-muted mt-3">
			Already have an account?
			<a href="/login" tabindex="-1">Sign in</a>
		</div>
	}
}
