---
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 in to 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">Sign in to your account</h1>
      </div>

      <!-- Login Card -->
      <div class="rounded-xl border border-border bg-card/60 backdrop-blur-xl p-6 sm:p-7 shadow-sm">
        <form id="login-form" class="space-y-4">
          <div class="space-y-1.5">
            <label for="login" class="block text-xs font-medium text-muted-foreground">
              Username or email address
            </label>
            <input
              id="login"
              name="login"
              type="text"
              required
              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"
            />
          </div>

          <div class="space-y-1.5">
            <div class="flex items-center justify-between">
              <label for="password" class="block text-xs font-medium text-muted-foreground">
                Password
              </label>
              <a href="/password-reset" class="text-xs text-[#58a6ff] hover:underline">
                Forgot password?
              </a>
            </div>
            <input
              id="password"
              name="password"
              type="password"
              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 id="totp-container" class="space-y-1.5 hidden">
            <label for="totpCode" class="block text-xs font-medium text-muted-foreground">
              Two-Factor Authentication Code
            </label>
            <input
              id="totpCode"
              name="totpCode"
              type="text"
              placeholder="000 000"
              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 font-mono tracking-widest text-center text-base"
              maxlength="6"
            />
          </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-foreground text-background font-semibold text-sm shadow-sm hover:bg-foreground/90 transition-all focus:outline-none focus:ring-2 focus:ring-foreground"
          >
            Sign in
          </button>

          { (import.meta.env.GITHUB_CLIENT_ID || import.meta.env.GOOGLE_CLIENT_ID) && (
            <div class="space-y-3 pt-2">
              <div class="flex items-center gap-3 my-2">
                <div class="flex-1 h-px bg-border"></div>
                <span class="text-[11px] text-muted-foreground">or continue with</span>
                <div class="flex-1 h-px bg-border"></div>
              </div>

              <div class="grid grid-cols-2 gap-2">
                {import.meta.env.GITHUB_CLIENT_ID && (
                  <a
                    href="/api/auth/github"
                    class="flex items-center justify-center gap-2 rounded-md border border-border bg-secondary/50 px-3 py-2 text-xs font-medium text-foreground hover:bg-secondary transition-all"
                  >
                    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M12 .5C5.65.5.5 5.65.5 12c0 5.08 3.29 9.39 7.86 10.91.58.11.79-.25.79-.56 0-.28-.01-1.02-.02-2-3.2.7-3.87-1.54-3.87-1.54-.52-1.33-1.28-1.68-1.28-1.68-1.04-.71.08-.7.08-.7 1.15.08 1.76 1.19 1.76 1.19 1.03 1.75 2.69 1.25 3.35.95.1-.74.4-1.25.72-1.54-2.55-.29-5.24-1.28-5.24-5.68 0-1.26.45-2.28 1.19-3.09-.12-.29-.52-1.46.11-3.05 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"/></svg>
                    GitHub
                  </a>
                )}
                {import.meta.env.GOOGLE_CLIENT_ID && (
                  <a
                    href="/api/auth/google"
                    class="flex items-center justify-center gap-2 rounded-md border border-border bg-secondary/50 px-3 py-2 text-xs font-medium text-foreground hover:bg-secondary transition-all"
                  >
                    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/><path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/><path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/><path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/></svg>
                    Google
                  </a>
                )}
              </div>
            </div>
          )}
        </form>
      </div>

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

<script>
  const form = document.getElementById("login-form") as HTMLFormElement;
  const errorMessage = document.getElementById("error-message");
  const totpContainer = document.getElementById("totp-container");
  const submitBtn = document.getElementById("submit-btn");
  const totpInput = document.getElementById("totpCode") as HTMLInputElement;

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

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

    if (data.totpCode) {
      data.totpCode = (data.totpCode as string).replace(/\s/g, "");
    }

    const originalBtnText = submitBtn!.textContent;
    submitBtn!.textContent = "Signing in...";
    submitBtn!.setAttribute("disabled", "true");

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

      const result = await response.json();

      if (result.success) {
        if (result.data?.requiresTwoFactor) {
          totpContainer?.classList.remove("hidden");
          totpInput?.focus();
          submitBtn!.textContent = "Verify & Sign in";
          submitBtn!.removeAttribute("disabled");
          return;
        }

        window.location.href = "/dashboard";
      } else {
        errorMessage?.classList.remove("hidden");
        errorMessage!.textContent = result.error?.message || "Failed to sign in";
        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>