"use client";

import { useState } from "react";
import Link from "next/link";
import BrandLogo from "@/components/brand-logo";

export default function ForgotPasswordPage() {
  const [email, setEmail] = useState("");
  const [sent, setSent] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [loading, setLoading] = useState(false);

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    setError(null);
    setLoading(true);

    const res = await fetch("/api/auth/password/forgot", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ email }),
    }).catch(() => null);
    const data = res ? await res.json().catch(() => ({})) : {};

    if (!res || !res.ok) {
      setError(data.error ?? "Something went wrong. Please try again.");
      setLoading(false);
      return;
    }
    setSent(true);
    setLoading(false);
  }

  return (
    <div className="min-h-screen flex flex-col items-center justify-center bg-bg px-4 py-12">
      <Link href="/" className="mb-8 inline-flex" aria-label="VibePass Tickets — home">
        <BrandLogo size="md" showTagline />
      </Link>

      <div className="w-full max-w-sm rounded-2xl border border-line bg-panel p-8 shadow-2xl shadow-black/40">
        <h1 className="text-xl font-semibold text-ink mb-1">Forgot your password?</h1>

        {sent ? (
          <>
            <p className="text-sm text-muted mb-6">
              If an account exists for <span className="text-ink">{email}</span>, we&apos;ve emailed a
              link to reset its password. The link expires in 1 hour — check your spam folder if it
              doesn&apos;t arrive within a few minutes.
            </p>
            <Link href="/login" className="text-sm text-brand-green-h hover:underline">
              Back to sign in
            </Link>
          </>
        ) : (
          <>
            <p className="text-sm text-muted mb-6">
              Enter the email you sign in with and we&apos;ll send you a reset link.
            </p>
            <form onSubmit={handleSubmit} className="space-y-4">
              <div>
                <label className="block text-sm font-medium text-ink mb-1">Email</label>
                <input
                  type="email"
                  required
                  autoFocus
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  className="input"
                />
              </div>

              {error && <p className="text-sm text-red-400">{error}</p>}

              <button
                type="submit"
                disabled={loading}
                className="w-full rounded-md bg-brand-green text-white py-2 text-sm font-semibold hover:bg-brand-green-h disabled:opacity-50"
              >
                {loading ? "Please wait…" : "Send reset link"}
              </button>

              <Link href="/login" className="inline-block text-sm text-brand-green-h hover:underline">
                Back to sign in
              </Link>
            </form>
          </>
        )}
      </div>
    </div>
  );
}