---
import SettingsLayout from "@/layouts/SettingsLayout.astro";

const user = Astro.locals.user;

if (!user) {
  return Astro.redirect("/login");
}
---

<SettingsLayout title="Account settings">
  <div class="max-w-[640px]">
    <div class="mb-6">
      <h2 class="text-[28px] font-semibold text-foreground">Password and authentication</h2>
      <p class="text-sm text-muted-foreground mt-1">
        Change your password or configure two-factor authentication.
      </p>
    </div>

    <!-- Change Password -->
    <div class="py-5 border-t border-border">
      <h3 class="text-base font-semibold text-foreground mb-4">Change password</h3>
      <form id="password-form" class="space-y-4">
        <div>
          <label for="currentPassword" class="block text-sm font-medium text-foreground mb-1">
            Current password
          </label>
          <input
            type="password"
            name="currentPassword"
            id="currentPassword"
            required
            class="w-full max-w-md rounded-md border border-border bg-background px-3 py-1.5 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:border-[#58a6ff] focus:ring-1 focus:ring-[#58a6ff]/30 transition-colors"
          />
        </div>
        <div>
          <label for="newPassword" class="block text-sm font-medium text-foreground mb-1">
            New password
          </label>
          <input
            type="password"
            name="newPassword"
            id="newPassword"
            required
            minlength="8"
            class="w-full max-w-md rounded-md border border-border bg-background px-3 py-1.5 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:border-[#58a6ff] focus:ring-1 focus:ring-[#58a6ff]/30 transition-colors"
          />
          <p class="text-xs text-muted-foreground mt-1">At least 8 characters.</p>
        </div>
        <div>
          <label for="confirmPassword" class="block text-sm font-medium text-foreground mb-1">
            Confirm new password
          </label>
          <input
            type="password"
            name="confirmPassword"
            id="confirmPassword"
            required
            minlength="8"
            class="w-full max-w-md rounded-md border border-border bg-background px-3 py-1.5 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:border-[#58a6ff] focus:ring-1 focus:ring-[#58a6ff]/30 transition-colors"
          />
        </div>
        <div class="flex justify-start">
          <button
            type="submit"
            class="px-4 py-1.5 rounded-md bg-[#238636] border border-[#2ea043] text-sm font-medium text-white hover:bg-[#2ea043] transition-colors"
          >
            Update password
          </button>
        </div>
      </form>
    </div>

    <!-- Delete Account -->
    <div class="py-5 border-t border-border">
      <h3 class="text-base font-semibold text-foreground mb-1">Delete account</h3>
      <p class="text-sm text-muted-foreground mb-4">
        Once you delete your account, there is no going back. Please be certain.
      </p>
      <button
        type="button"
        id="delete-account-btn"
        class="px-4 py-1.5 rounded-md border border-[#da3633] bg-transparent text-sm font-medium text-[#da3633] hover:bg-[#da3633]/10 transition-colors"
      >
        Delete account
      </button>
    </div>
  </div>
</SettingsLayout>

<script>
  const passwordForm = document.getElementById("password-form") as HTMLFormElement;
  const deleteBtn = document.getElementById("delete-account-btn");

  passwordForm?.addEventListener("submit", async (e) => {
    e.preventDefault();
    const formData = new FormData(passwordForm);
    const data = Object.fromEntries(formData);

    if (data.newPassword !== data.confirmPassword) {
      alert("New passwords do not match");
      return;
    }

    const submitBtn = passwordForm.querySelector('button[type="submit"]') as HTMLButtonElement;
    const originalText = submitBtn.textContent;
    submitBtn.disabled = true;
    submitBtn.textContent = "Updating...";

    try {
      const response = await fetch("/api/auth/password", {
        method: "PATCH",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(data),
      });

      if (response.ok) {
        submitBtn.textContent = "Updated!";
        passwordForm.reset();
        setTimeout(() => {
          submitBtn.textContent = originalText;
          submitBtn.disabled = false;
        }, 3000);
      } else {
        const error = await response.json();
        alert(error.message || "Failed to update password");
        submitBtn.textContent = originalText;
        submitBtn.disabled = false;
      }
    } catch (error) {
      console.error("Error updating password:", error);
      alert("An error occurred while updating password");
      submitBtn.textContent = originalText;
      submitBtn.disabled = false;
    }
  });

  deleteBtn?.addEventListener("click", async () => {
    if (confirm("Are you sure you want to delete your account? This action cannot be undone.")) {
      try {
        const response = await fetch("/api/auth/me", { method: "DELETE" });
        if (response.ok) {
          window.location.href = "/";
        } else {
          const error = await response.json();
          alert(error.message || "Failed to delete account");
        }
      } catch (error) {
        console.error("Error deleting account:", error);
        alert("An error occurred while deleting account");
      }
    }
  });
</script>