import { useState } from "react"
import { useNavigate } from "react-router"
import { CheckCircle2 } from "lucide-react"

import { PasswordResetRequestForm } from "@crema/arcadia-auth-ui"
import { pageTitle } from "~/lib/page-meta"
import { AuthBrand, AuthShell } from "~/components/auth/auth-shell"

export const meta = () => pageTitle("Reset password")

export default function ForgotPasswordRoute() {
  const navigate = useNavigate()
  const [sentTo, setSentTo] = useState<string | null>(null)

  if (sentTo) {
    return (
      <AuthShell>
        <div
          className="flex w-full max-w-sm flex-col items-center gap-3 rounded-xl border bg-card p-6 text-center text-sm"
          style={{ borderColor: "var(--border)" }}
        >
          <CheckCircle2 className="size-8 text-emerald-500" />
          <h1 className="text-base font-semibold">Check your email</h1>
          <p className="text-muted-foreground">
            If an account exists for <strong>{sentTo}</strong>, we've sent a link
            to reset your password.
          </p>
          <button
            type="button"
            onClick={() => navigate("/login")}
            className="mt-2 text-xs font-medium text-primary hover:underline"
            data-action="forgot-back-to-login"
          >
            Back to sign in
          </button>
        </div>
      </AuthShell>
    )
  }

  return (
    <AuthShell>
      <PasswordResetRequestForm
        brand={<AuthBrand />}
        onBack={() => navigate("/login")}
        onSuccess={(email) => setSentTo(email)}
      />
    </AuthShell>
  )
}