---
import SettingsLayout from "@/layouts/SettingsLayout.astro";
import { MFASetup } from "@/components/settings/MFASetup";

const user = Astro.locals.user;

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

<SettingsLayout title="Security 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">
        Manage your security preferences and two-factor authentication.
      </p>
    </div>

    <!-- 2FA Section -->
    <div class="py-5 border-t border-border">
      <h3 class="text-base font-semibold text-foreground mb-1">Two-factor authentication</h3>

      {user.twoFactorEnabled ? (
        <div class="mt-3 rounded-md border border-[#238636]/40 bg-[#238636]/10 p-4">
          <div class="flex items-start gap-3">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-[#3fb950] mt-0.5 flex-shrink-0"><path d="M20 6 9 17l-5-5"/></svg>
            <div>
              <p class="text-sm font-medium text-foreground">Two-factor authentication is enabled</p>
              <p class="text-xs text-muted-foreground mt-1">
                Your account is protected with an additional layer of security.
              </p>
              <button
                type="button"
                id="disable-2fa-btn"
                class="mt-3 px-3 py-1 rounded-md border border-[#da3633]/40 text-xs font-medium text-[#da3633] hover:bg-[#da3633]/10 transition-colors"
              >
                Disable 2FA
              </button>
            </div>
          </div>
        </div>
      ) : (
        <p class="text-sm text-muted-foreground mb-4">
          Two-factor authentication adds an additional layer of security to your account.
        </p>
        <MFASetup client:load />
      )}
    </div>

    <!-- Active Sessions -->
    <div class="py-5 border-t border-border">
      <h3 class="text-base font-semibold text-foreground mb-1">Session history</h3>
      <p class="text-sm text-muted-foreground mb-4">
        This lists all active sessions for your account. You can revoke any session.
      </p>
      <div class="rounded-md border border-border">
        <div class="p-4 flex items-center justify-between">
          <div>
            <p class="text-sm font-medium text-foreground">Current session</p>
            <p class="text-xs text-muted-foreground mt-0.5">Signed in from this browser</p>
          </div>
          <span class="text-xs text-[#3fb950] font-medium">Active</span>
        </div>
      </div>
    </div>
  </div>
</SettingsLayout>

<script>
  const disableBtn = document.getElementById("disable-2fa-btn") as HTMLButtonElement | null;

  disableBtn?.addEventListener("click", async () => {
    if (confirm("Are you sure you want to disable 2FA? This will make your account less secure.")) {
      disableBtn.textContent = "Disabling...";
      disableBtn.disabled = true;

      try {
        const response = await fetch("/api/auth/2fa/disable", { method: "POST" });
        if (response.ok) {
          window.location.reload();
        } else {
          alert("Failed to disable 2FA");
          disableBtn.textContent = "Disable 2FA";
          disableBtn.disabled = false;
        }
      } catch (error) {
        console.error("Error disabling 2FA:", error);
        disableBtn.textContent = "Disable 2FA";
        disableBtn.disabled = false;
      }
    }
  });
</script>