---
import BaseLayout from "@/layouts/BaseLayout.astro";
import Logo from "@/components/ui/Logo.astro";
import { getCsrfToken } from "@/middleware/csrf";

if (Astro.locals.user) {
  return Astro.redirect("/dashboard");
}

const { token, cookie } = getCsrfToken(Astro.request);
Astro.response.headers.append("Set-Cookie", cookie);
---

<BaseLayout title="Sign up for OpenCodeHub">
  <div class="flex min-h-[calc(100vh-8rem)] items-center justify-center py-12 px-4">
    <div class="w-full max-w-sm space-y-6">
      <!-- Logo -->
      <div class="text-center space-y-2">
        <a href="/" class="inline-flex items-center gap-2.5 hover:opacity-90 transition-opacity">
          <Logo class="h-9 w-9 text-foreground" />
          <span class="text-xl font-bold text-foreground tracking-tight">OpenCodeHub</span>
        </a>
        <h1 class="text-xl font-semibold text-foreground">Create your account</h1>
      </div>

      <!-- Register Card -->
      <div class="rounded-xl border border-border bg-card/60 backdrop-blur-xl p-6 sm:p-7 shadow-sm">
        <form id="register-form" class="space-y-4">
          <div class="space-y-1.5">
            <label for="username" class="block text-xs font-medium text-muted-foreground">
              Username
            </label>
            <input
              id="username"
              name="username"
              type="text"
              placeholder="johndoe"
              required
              minlength="2"
              maxlength="39"
              autofocus
              class="w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:border-foreground focus:ring-1 focus:ring-foreground transition-all"
            />
            <p class="text-[11px] text-muted-foreground">Only letters, numbers, and hyphens.</p>
          </div>

          <div class="space-y-1.5">
            <label for="email" class="block text-xs font-medium text-muted-foreground">
              Email address
            </label>
            <input
              id="email"
              name="email"
              type="email"
              placeholder="you@example.com"
              required
              class="w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:border-foreground focus:ring-1 focus:ring-foreground transition-all"
            />
          </div>

          <div class="space-y-1.5">
            <label for="password" class="block text-xs font-medium text-muted-foreground">
              Password
            </label>
            <input
              id="password"
              name="password"
              type="password"
              placeholder="At least 8 characters"
              required
              minlength="8"
              class="w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:border-foreground focus:ring-1 focus:ring-foreground transition-all"
            />
          </div>

          <div
            id="error-message"
            class="text-xs text-red-400 bg-red-500/10 border border-red-500/20 rounded-md p-2.5 hidden"
            role="alert"
          >
          </div>

          <input type="hidden" name="_csrf" id="csrf-token" value={token} />

          <button
            type="submit"
            id="submit-btn"
            class="w-full py-2 px-4 rounded-md bg-[#238636] hover:bg-[#2ea043] text-white font-semibold text-sm shadow-sm transition-all focus:outline-none focus:ring-2 focus:ring-[#238636]"
          >
            Create account
          </button>
        </form>

        <p class="text-[11px] text-muted-foreground text-center mt-4">
          By creating an account, you agree to our{" "}
          <a href="#" class="text-muted-foreground hover:text-foreground underline">Terms</a> and{" "}
          <a href="#" class="text-muted-foreground hover:text-foreground underline">Privacy Policy</a>
        </p>
      </div>

      <!-- Footer Callout -->
      <div class="rounded-xl border border-border bg-card/40 p-4 text-center text-xs text-muted-foreground">
        Already have an account?{" "}
        <a href="/login" class="text-[#58a6ff] hover:underline font-medium">
          Sign in
        </a>
      </div>
    </div>
  </div>
</BaseLayout>

<script>
  const form = document.getElementById("register-form") as HTMLFormElement;
  const errorMessage = document.getElementById("error-message");
  const submitBtn = document.getElementById("submit-btn");

  form?.addEventListener("submit", async (e) => {
    e.preventDefault();
    errorMessage?.classList.add("hidden");
    errorMessage!.textContent = "";

    const formData = new FormData(form);
    const data = Object.fromEntries(formData);

    const originalBtnText = submitBtn!.textContent;
    submitBtn!.textContent = "Creating account...";
    submitBtn!.setAttribute("disabled", "true");

    try {
      const csrfToken = (document.getElementById("csrf-token") as HTMLInputElement)?.value || "";
      const response = await fetch("/api/auth/register", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          "x-csrf-token": csrfToken,
        },
        body: JSON.stringify(data),
      });

      const result = await response.json();

      if (result.success) {
        window.location.href = "/dashboard";
      } else {
        errorMessage?.classList.remove("hidden");
        errorMessage!.textContent = result.error?.message || "Failed to create account";
        submitBtn!.textContent = originalBtnText;
        submitBtn!.removeAttribute("disabled");
      }
    } catch (error) {
      errorMessage?.classList.remove("hidden");
      errorMessage!.textContent = "An unexpected error occurred";
      submitBtn!.textContent = originalBtnText;
      submitBtn!.removeAttribute("disabled");
    }
  });
</script>