import Link from "next/link";
import { getDictionary } from "@/lib/i18n";
import { getLocale } from "@/lib/locale";
import {
  completePasswordReset,
  requestPasswordReset,
  verifyPasswordReset,
} from "./actions";

export default async function ForgotPasswordPage({
  searchParams,
}: {
  searchParams: Promise<{
    step?: "verify" | "reset";
    requestId?: string;
    developmentOtp?: string;
    error?: string;
  }>;
}) {
  const params = await searchParams;
  const locale = await getLocale();
  const dictionary = getDictionary(locale);
  const copy = dictionary.forgotPassword;

  return (
    <main className="login-shell auth-single-shell">
      <section className="login-form-panel">
        <div className="login-card">
          <div className="brand-mark login-mobile-brand">ک+</div>
          <p className="eyebrow">{copy.eyebrow}</p>
          <h1>{copy.title}</h1>
          <p className="muted">{copy.helper}</p>
          {params.error ? <p className="error">{copy.error}</p> : null}
          {params.developmentOtp ? (
            <p className="development-otp">
              {copy.developmentOtp}: <b dir="ltr">{params.developmentOtp}</b>
            </p>
          ) : null}

          {!params.step ? (
            <form action={requestPasswordReset}>
              <input type="hidden" name="locale" value={locale} />
              <label htmlFor="phone">{copy.phone}</label>
              <input
                id="phone"
                name="phone"
                dir="ltr"
                inputMode="tel"
                placeholder="+989121234567"
                required
              />
              <button className="primary-button" type="submit">
                {copy.send}
              </button>
            </form>
          ) : null}

          {params.step === "verify" && params.requestId ? (
            <form action={verifyPasswordReset}>
              <input type="hidden" name="locale" value={locale} />
              <input type="hidden" name="requestId" value={params.requestId} />
              <label htmlFor="otp">{copy.otp}</label>
              <input
                id="otp"
                name="otp"
                dir="ltr"
                inputMode="numeric"
                autoComplete="one-time-code"
                minLength={6}
                maxLength={6}
                required
              />
              <button className="primary-button" type="submit">
                {copy.verify}
              </button>
            </form>
          ) : null}

          {params.step === "reset" ? (
            <form action={completePasswordReset}>
              <input type="hidden" name="locale" value={locale} />
              <label htmlFor="password">{copy.newPassword}</label>
              <input
                id="password"
                name="password"
                type="password"
                autoComplete="new-password"
                minLength={8}
                maxLength={128}
                required
              />
              <label htmlFor="passwordConfirmation">
                {copy.confirmPassword}
              </label>
              <input
                id="passwordConfirmation"
                name="passwordConfirmation"
                type="password"
                autoComplete="new-password"
                minLength={8}
                maxLength={128}
                required
              />
              <button className="primary-button" type="submit">
                {copy.change}
              </button>
            </form>
          ) : null}

          <div className="auth-links auth-links-centered">
            <Link href="/login">{copy.back}</Link>
          </div>
        </div>
      </section>
    </main>
  );
}