"use client";

import { useActionState } from "react";
import { useFormStatus } from "react-dom";
import { useSearchParams } from "next/navigation";
import Link from "next/link";
import { resetPassword } from "@/app/actions/auth";

function SubmitButton() {
  const { pending } = useFormStatus();
  return (
    <button
      type="submit"
      disabled={pending}
      className="w-full bg-accent text-accent-on font-bold py-3 rounded-xl border-b-4 border-accent-active hover:bg-accent-hover active:translate-y-0.5 active:border-b-0 transition-all disabled:opacity-50 cursor-pointer"
    >
      {pending ? "Resetting..." : "Reset password"}
    </button>
  );
}

export default function ResetPasswordForm() {
  const searchParams = useSearchParams();
  const token = searchParams.get("token") ?? "";
  const [state, formAction] = useActionState(resetPassword, undefined);

  return (
    <div className="min-h-screen flex items-center justify-center bg-bg px-4">
      <div className="w-full max-w-md">
        <div className="text-center mb-8">
          <div className="w-14 h-14 rounded-2xl bg-accent flex items-center justify-center mx-auto mb-4 shadow-[0_4px_0_0_var(--accent-active)]">
            <span className="text-accent-on font-bold text-xl">OL</span>
          </div>
          <h1 className="font-display text-2xl font-bold text-fg">Order Loop</h1>
        </div>

        <div className="bg-surface border-2 border-border rounded-2xl p-6 shadow-card">
          <h2 className="font-display text-xl font-bold text-fg mb-2">
            Reset your password
          </h2>
          <p className="text-sm text-muted mb-6">
            Enter your new password below.
          </p>

          {state?.message && (
            <div
              className={`mb-4 p-3 rounded-xl text-sm font-medium ${
                state.success
                  ? "bg-green-50 border border-green-200 text-green-700"
                  : "bg-danger/10 border border-danger/20 text-danger"
              }`}
            >
              {state.message}
            </div>
          )}

          {state?.success ? (
            <Link
              href="/login"
              className="block w-full text-center bg-accent text-accent-on font-bold py-3 rounded-xl"
            >
              Go to login
            </Link>
          ) : (
            <form action={formAction} className="space-y-4">
              <input type="hidden" name="token" value={token} />
              <div>
                <label
                  htmlFor="password"
                  className="block text-sm font-medium text-fg mb-1"
                >
                  New password
                </label>
                <input
                  id="password"
                  name="password"
                  type="password"
                  required
                  minLength={8}
                  className="w-full border-2 border-border rounded-xl px-4 py-2.5 text-sm bg-bg text-fg focus:outline-none focus:border-accent"
                  placeholder="At least 8 characters"
                />
              </div>
              <div>
                <label
                  htmlFor="confirmPassword"
                  className="block text-sm font-medium text-fg mb-1"
                >
                  Confirm password
                </label>
                <input
                  id="confirmPassword"
                  name="confirmPassword"
                  type="password"
                  required
                  minLength={8}
                  className="w-full border-2 border-border rounded-xl px-4 py-2.5 text-sm bg-bg text-fg focus:outline-none focus:border-accent"
                  placeholder="Repeat password"
                />
              </div>
              <SubmitButton />
            </form>
          )}
        </div>
      </div>
    </div>
  );
}