"use client";

import { useActionState } from "react";
import { useFormStatus } from "react-dom";
import Link from "next/link";
import { forgotPassword } 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 ? "Sending..." : "Send reset link"}
    </button>
  );
}

export default function ForgotPasswordPage() {
  const [state, formAction] = useActionState(forgotPassword, 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">Forgot your password?</h2>
          <p className="text-sm text-muted mb-6">Enter your email and we&apos;ll send you a reset link.</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>
          )}

          <form action={formAction} className="space-y-4">
            <div>
              <label htmlFor="email" className="block text-sm font-medium text-fg mb-1">Email</label>
              <input
                id="email"
                name="email"
                type="email"
                required
                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="your@email.com"
              />
            </div>
            <SubmitButton />
          </form>

          <div className="mt-4 text-center">
            <Link href="/login" className="text-sm text-accent hover:text-accent-hover">
              Back to login
            </Link>
          </div>
        </div>
      </div>
    </div>
  );
}