import Link from "next/link"
import { Logo } from "@/components/shared/logo"
import { updatePassword } from "@/app/actions/auth"

export default async function UpdatePasswordPage({
  searchParams,
}: {
  searchParams: Promise<{ error?: string; token?: string }>
}) {
  const params = await searchParams
  const error = params.error
  const token = params.token ?? ""

  return (
    <div className="w-full">
      <div className="mb-8 flex flex-col items-center">
        <Logo size="lg" />
        <h1 className="mt-6 text-2xl font-bold text-white">Set new password</h1>
        <p className="mt-2 text-sm text-white/60">Choose a strong password</p>
      </div>

      <div className="rounded-xl border border-white/10 bg-[#111118] p-8">
        {error && (
          <div className="mb-4 rounded-lg border border-red-500/20 bg-red-500/10 px-4 py-3 text-sm text-red-400">
            {decodeURIComponent(error)}
          </div>
        )}

        <form action={updatePassword} className="space-y-4">
          <input type="hidden" name="token" value={token} />
          <div>
            <label htmlFor="password" className="mb-1.5 block text-sm font-medium text-white/70">
              New password
            </label>
            <input
              id="password"
              name="password"
              type="password"
              required
              minLength={8}
              placeholder="Min 8 characters"
              className="w-full rounded-lg border border-white/10 bg-white/5 px-4 py-2.5 text-sm text-white placeholder-white/30 outline-none ring-indigo-500 transition focus:border-indigo-500/50 focus:ring-1"
            />
          </div>

          <button
            type="submit"
            className="w-full rounded-lg bg-indigo-600 px-4 py-2.5 text-sm font-semibold text-white transition hover:bg-indigo-500 active:scale-[0.98]"
          >
            Update password
          </button>
        </form>

        <p className="mt-6 text-center text-sm text-white/40">
          <Link href="/login" className="text-indigo-400 hover:text-indigo-300">
            Back to sign in
          </Link>
        </p>
      </div>
    </div>
  )
}