import { Layout } from "../layout.tsx";

interface RegisterProps {
    error?: string;
}

export function Register({ error }: RegisterProps) {
    return (
        <Layout user={null} title="Register">
            <div class="auth-container">
                <h1 class="page-title">Create account</h1>
                {error && <p class="form-error">{error}</p>}
                <form method="POST" action="/register" class="auth-form">
                    <div class="form-group">
                        <label for="username">Username</label>
                        <input
                            id="username"
                            name="username"
                            type="text"
                            required
                            autocomplete="username"
                            pattern="[a-zA-Z0-9_-]+"
                            title="Letters, numbers, hyphens and underscores only"
                        />
                    </div>
                    <div id="passkey-section" style="display:none">
                        <button
                            id="passkey-register-btn"
                            class="btn btn-secondary btn-block"
                            type="button"
                        >
                            Register with passkey
                        </button>
                        <div class="auth-divider">
                            <span>or</span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="password">Password</label>
                        <input
                            id="password"
                            name="password"
                            type="password"
                            autocomplete="new-password"
                            minlength="8"
                        />
                    </div>
                    <div class="form-group">
                        <label for="password2">Confirm password</label>
                        <input
                            id="password2"
                            name="password2"
                            type="password"
                            autocomplete="new-password"
                            minlength="8"
                        />
                    </div>
                    <button type="submit" class="btn btn-primary btn-block">
                        Register with password
                    </button>
                </form>
                <p class="auth-footer">
                    Already have an account? <a href="/login">Sign in</a>
                </p>
            </div>
            <script type="module">{`
        import { startRegistration } from '/assets/simplewebauthn-browser.js';
        const usernameInput = document.getElementById('username');
        document.getElementById('passkey-section').style.display = 'block';
        document.getElementById('passkey-register-btn').addEventListener('click', async () => {
          const username = usernameInput.value.trim();
          if (!username) { usernameInput.focus(); return; }
          if (!/^[a-zA-Z0-9_-]+$/.test(username)) {
            alert('Username may only contain letters, numbers, hyphens, and underscores');
            return;
          }
          try {
            const createResp = await fetch('/auth/passkey/create-user', {
              method: 'POST',
              headers: { 'Content-Type': 'application/json' },
              body: JSON.stringify({ username }),
            });
            if (!createResp.ok) {
              const err = await createResp.json();
              alert(err.error ?? 'Failed to create account');
              return;
            }
            await createResp.json();
            const optsResp = await fetch('/auth/passkey/register/options', { method: 'POST' });
            const opts = await optsResp.json();
            const result = await startRegistration({ optionsJSON: opts });
            const verResp = await fetch('/auth/passkey/register/verify', {
              method: 'POST',
              headers: { 'Content-Type': 'application/json' },
              body: JSON.stringify(result),
            });
            if (verResp.ok) {
              window.location.href = '/';
            } else {
              const err = await verResp.json();
              alert(err.error ?? 'Passkey registration failed');
            }
          } catch (e) {
            alert('Passkey registration failed: ' + e.message);
          }
        });
      `}</script>
        </Layout>
    );
}