"use client";

import Link from "next/link";
import { useState } from "react";
import { trpc } from "~/lib/trpc/client.js";

export default function ForgotPasswordPage() {
  const [email, setEmail] = useState("");
  const [submitted, setSubmitted] = useState(false);

  const mutation = trpc.auth.requestPasswordReset.useMutation({
    onSuccess: () => setSubmitted(true),
    onError: () => setSubmitted(true), // never reveal failure
  });

  function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    mutation.mutate({ email });
  }

  return (
    <div className="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-950 p-4">
      <div className="w-full max-w-md rounded-2xl bg-white dark:bg-gray-900 shadow-lg p-8">
        {submitted ? (
          <div className="text-center">
            <div className="text-4xl mb-4">📬</div>
            <h1 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-2">
              Check your email
            </h1>
            <p className="text-sm text-gray-500 mb-6">
              If <span className="font-medium">{email}</span> is registered, you will receive a
              password reset link within a few minutes.
            </p>
            <Link
              href="/auth/signin"
              className="text-sm text-brand-600 hover:text-brand-700 dark:text-brand-400"
            >
              Back to sign in
            </Link>
          </div>
        ) : (
          <>
            <div className="mb-6">
              <h1 className="text-xl font-bold text-gray-900 dark:text-gray-100">
                Reset your password
              </h1>
              <p className="mt-1 text-sm text-gray-500">
                Enter your email address and we will send you a reset link.
              </p>
            </div>

            <form onSubmit={handleSubmit} className="space-y-4">
              <div>
                <label
                  htmlFor="email"
                  className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1"
                >
                  Email
                </label>
                <input
                  id="email"
                  type="email"
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  required
                  placeholder="you@company.com"
                  className="w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-900 px-3 py-2 text-sm text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-brand-400"
                />
              </div>

              <button
                type="submit"
                disabled={mutation.isPending}
                className="w-full rounded-lg bg-brand-600 px-4 py-2 text-sm font-semibold text-white hover:bg-brand-700 transition-colors disabled:opacity-50"
              >
                {mutation.isPending ? "Sending…" : "Send reset link"}
              </button>

              <div className="text-center">
                <Link
                  href="/auth/signin"
                  className="text-sm text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
                >
                  Back to sign in
                </Link>
              </div>
            </form>
          </>
        )}
      </div>
    </div>
  );
}
