import Image from "next/image";
import { ThemeToggle } from "@/components/layout/theme";
import { PasswordForm } from "./password-form";

export function PasswordPage({
  mode,
  token,
}: {
  mode: "set" | "reset";
  token?: string;
}) {
  return (
    <main className="relative flex min-h-dvh">
      <section className="flex w-full items-center justify-center p-6 lg:w-1/2">
        <div className="auth-panel w-full max-w-md rounded-2xl border border-input/70 bg-card/80 p-6 backdrop-blur-xl sm:p-8">
          <h1 className="text-3xl font-semibold sm:text-4xl">
            {mode === "set" ? "Set Password" : "Reset Password"}
          </h1>
          <p className="mb-6 mt-2 text-sm text-auth-muted">
            {mode === "set"
              ? "Set your password to continue to the dashboard."
              : "Enter a new password using the reset link sent to your email."}
          </p>
          <PasswordForm mode={mode} token={token} />
        </div>
      </section>
      <aside className="relative hidden min-h-dvh w-1/2 items-center justify-center overflow-hidden bg-auth-cover lg:flex">
        <Image
          src="/branding/cover.png"
          alt=""
          fill
          priority
          sizes="50vw"
          className="object-cover opacity-30"
        />
        <Image
          src="/images/shape/grid-01.svg"
          alt=""
          width={540}
          height={250}
          className="absolute right-0 top-0 h-auto w-[540px] opacity-40"
        />
        <Image
          src="/images/shape/grid-01.svg"
          alt=""
          width={540}
          height={250}
          className="absolute bottom-0 left-0 h-auto w-[540px] rotate-180 opacity-40"
        />
        <div className="relative max-w-xs text-center text-white">
          <Image
            src="/branding/tiar-icon.svg"
            alt="Tiar"
            width={200}
            height={200}
            priority
            className="mx-auto mb-2"
          />
          <h2 className="mb-4 text-2xl font-bold">Parking+</h2>
          <p className="text-base text-white/60">
            Monetization and Reporting System for Your EV Charging Stations
          </p>
        </div>
      </aside>
      <div className="fixed bottom-6 right-6 hidden sm:block">
        <ThemeToggle />
      </div>
    </main>
  );
}