import Link from "next/link";
import AuthBrandMark from "@/components/AuthBrandMark";
import { requestOtp, verifyOtp } from "@/lib/actions/customer-auth";
import { loginWithPassword } from "@/lib/actions/customer-password-auth";

export const metadata = { title: "Sign in — Iniyaval Return Gifts" };

export default async function CustomerLoginPage({
  searchParams,
}: {
  searchParams: Promise<{ step?: string; email?: string; error?: string; mode?: string }>;
}) {
  const { step, email, error, mode } = await searchParams;
  const showCodeStep = step === "code" && !!email;
  const passwordMode = mode !== "otp";

  return (
    <div className="mx-auto flex min-h-[70vh] max-w-sm flex-col justify-center px-4">
      <AuthBrandMark />
      <div className="mt-6 rounded-xl border border-rose-100 bg-white p-6 shadow-sm">
      <h1 className="font-[family-name:var(--font-heading)] text-xl font-bold text-stone-800">
        {showCodeStep ? "Enter your code" : "Sign in"}
      </h1>
      <p className="mt-1 text-sm text-stone-500">
        {showCodeStep
          ? `We emailed a 6-digit code to ${email}.`
          : passwordMode
            ? "Sign in with your email or mobile number and password."
            : "Sign in with your email to see your order history and wishlist. No password needed."}
      </p>

      {error && <p className="mt-4 rounded-md bg-red-50 px-3 py-2 text-sm text-red-700">{decodeURIComponent(error)}</p>}

      {showCodeStep ? (
        <form action={verifyOtp} className="mt-6 space-y-4">
          <input type="hidden" name="email" value={email} />
          <div>
            <label className="text-sm font-medium text-stone-700">6-digit code</label>
            <input
              type="text"
              name="code"
              inputMode="numeric"
              pattern="[0-9]{6}"
              maxLength={6}
              required
              autoFocus
              className="mt-1 block w-full rounded-md border border-stone-300 px-3 py-2 text-center text-lg tracking-[0.5em] focus:border-rose-400 focus:outline-none"
            />
          </div>
          <button type="submit" className="w-full rounded-md bg-rose-700 py-2.5 text-sm font-semibold text-white hover:bg-rose-800">
            Verify &amp; sign in
          </button>
        </form>
      ) : passwordMode ? (
        <form action={loginWithPassword} className="mt-6 space-y-4">
          <div>
            <label className="text-sm font-medium text-stone-700">Email or mobile number</label>
            <input
              type="text"
              name="identifier"
              required
              autoFocus
              className="mt-1 block w-full rounded-md border border-stone-300 px-3 py-2 text-sm focus:border-rose-400 focus:outline-none"
            />
          </div>
          <div>
            <div className="flex items-center justify-between">
              <label className="text-sm font-medium text-stone-700">Password</label>
              <Link href="/account/forgot-password" className="text-xs font-medium text-rose-700 hover:underline">
                Forgot password?
              </Link>
            </div>
            <input
              type="password"
              name="password"
              required
              className="mt-1 block w-full rounded-md border border-stone-300 px-3 py-2 text-sm focus:border-rose-400 focus:outline-none"
            />
          </div>
          <button type="submit" className="w-full rounded-md bg-rose-700 py-2.5 text-sm font-semibold text-white hover:bg-rose-800">
            Sign in
          </button>
        </form>
      ) : (
        <form action={requestOtp} className="mt-6 space-y-4">
          <div>
            <label className="text-sm font-medium text-stone-700">Email</label>
            <input
              type="email"
              name="email"
              required
              autoFocus
              className="mt-1 block w-full rounded-md border border-stone-300 px-3 py-2 text-sm focus:border-rose-400 focus:outline-none"
            />
          </div>
          <button type="submit" className="w-full rounded-md bg-rose-700 py-2.5 text-sm font-semibold text-white hover:bg-rose-800">
            Send code
          </button>
        </form>
      )}

      {showCodeStep && (
        <form action={requestOtp} className="mt-3">
          <input type="hidden" name="email" value={email} />
          <button type="submit" className="w-full text-center text-xs font-medium text-rose-700 hover:underline">
            Resend code
          </button>
        </form>
      )}

      {!showCodeStep && (
        <div className="mt-6 space-y-2 border-t border-rose-100 pt-4 text-center text-xs text-stone-500">
          {passwordMode ? (
            <p>
              <Link href="/account/login?mode=otp" className="font-medium text-rose-700 hover:underline">
                Use email code instead
              </Link>
            </p>
          ) : (
            <p>
              Have a password?{" "}
              <Link href="/account/login" className="font-medium text-rose-700 hover:underline">
                Sign in with it
              </Link>
            </p>
          )}
          <p>
            New here?{" "}
            <Link href="/account/register" className="font-medium text-rose-700 hover:underline">
              Create an account
            </Link>
          </p>
        </div>
      )}
      </div>
    </div>
  );
}