import type { Metadata } from "next";
import Link from "next/link";
import { ArrowLeft, Shield, LogOut } from "lucide-react";
import { Container } from "@/components/Container";
import { requireUser } from "@/lib/auth/admin-guard";
import { ChangePasswordForm } from "./ChangePasswordForm";
import { signOutAllDevices } from "./actions";

export const metadata: Metadata = {
  title: "Account security",
  robots: { index: false, follow: false },
};

export default async function AccountSecurityPage() {
  await requireUser();
  return (
    <section className="bg-white pt-10 pb-16 md:pt-14 md:pb-24">
      <Container>
        <div className="mx-auto max-w-xl">
          <Link
            href="/account"
            className="inline-flex items-center gap-1 text-[13px] font-semibold text-[var(--color-slate)] hover:text-[var(--color-blue)]"
          >
            <ArrowLeft className="h-3.5 w-3.5" aria-hidden />
            Back to account
          </Link>

          <div className="mt-4 inline-flex items-center gap-2 rounded-full border border-[var(--color-line)] bg-[var(--color-mist)] px-3 py-1 text-[11px] font-bold uppercase tracking-wider text-[var(--color-blue)]">
            <Shield className="h-3 w-3" aria-hidden />
            Security
          </div>
          <h1 className="mt-4 font-display text-[32px] md:text-[40px] font-extrabold leading-[1.05] tracking-[-0.02em] text-[var(--color-ink)]">
            Change your password
          </h1>
          <p className="mt-3 text-[15px] leading-relaxed text-[var(--color-slate)]">
            Choose a new password with at least 10 characters, including
            uppercase, lowercase, and a number. You&rsquo;ll receive an email
            confirmation once it&rsquo;s updated.
          </p>

          <div className="mt-8 rounded-2xl border border-[var(--color-line)] bg-white p-6 shadow-sm md:p-8">
            <ChangePasswordForm />
          </div>

          <div className="mt-6 rounded-2xl border border-red-200 bg-red-50/40 p-6 shadow-sm">
            <h2 className="flex items-center gap-2 font-display text-[18px] font-extrabold text-red-700">
              <LogOut className="h-5 w-5" aria-hidden />
              Sign out of every device
            </h2>
            <p className="mt-2 text-[14px] leading-relaxed text-[var(--color-ink)]/80">
              If you used OrthoGlobe on a public computer or think someone else
              has access, revoking all sessions forces every browser (including
              this one) to sign in again. Your password won&rsquo;t change.
            </p>
            <form action={signOutAllDevices} className="mt-4">
              <button
                type="submit"
                className="inline-flex items-center gap-2 rounded-lg border border-red-300 bg-white px-4 py-2 text-[13px] font-semibold text-red-700 transition-colors hover:bg-red-50"
              >
                <LogOut className="h-3.5 w-3.5" aria-hidden />
                Sign out of every device
              </button>
            </form>
          </div>
        </div>
      </Container>
    </section>
  );
}
