"use client";

import { useState } from "react";
import Link from "next/link";
import { createClient } from "@/lib/supabase/client";
import { Field, Input } from "@/components/ui/Input";
import Button from "@/components/ui/Button";
import { AlertCircle, CheckCircle2, KeyRound } from "lucide-react";

export default function ForgotPasswordPage() {
  const supabase = createClient();
  const [email, setEmail] = useState("");
  const [error, setError] = useState("");
  const [sent, setSent] = useState(false);
  const [loading, setLoading] = useState(false);

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

    const { error: resetError } = await supabase.auth.resetPasswordForEmail(
      email.trim(),
      {
        redirectTo: `${window.location.origin}/reset-password`,
      }
    );

    setLoading(false);

    // Always show the same success state regardless of whether the email
    // exists — this avoids leaking which emails are registered.
    if (resetError) {
      console.error("Reset password error:", resetError.message);
    }
    setSent(true);
  }

  return (
    <main className="flex min-h-screen items-center justify-center bg-sand px-4 py-10 text-ink">
      <div className="w-full max-w-md">
        <div className="mb-6 flex flex-col items-center text-center">
          <div className="mb-3 flex h-14 w-14 items-center justify-center rounded-card bg-emerald text-white">
            <KeyRound size={28} />
          </div>
          <h1 className="text-2xl font-extrabold tracking-tight">
            Forgot your password?
          </h1>
          <p className="mt-1 text-sm text-muted">
            Enter your account email and we&apos;ll send you a reset link.
          </p>
        </div>

        <div className="rounded-card border border-sand-dark/60 bg-white p-6 shadow-card">
          {sent ? (
            <div className="flex items-start gap-2 rounded-card bg-emerald-light/40 px-3 py-3 text-sm text-[#0F6E56]">
              <CheckCircle2 size={16} className="mt-0.5 shrink-0" />
              <span>
                If an account exists for <strong>{email}</strong>, a password
                reset link has been sent. Please check your inbox (and spam
                folder).
              </span>
            </div>
          ) : (
            <form onSubmit={handleSubmit} className="space-y-4">
              <Field label="Email">
                <Input
                  type="email"
                  autoComplete="email"
                  required
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  placeholder="you@example.com"
                />
              </Field>

              {error && (
                <div className="flex items-start gap-2 rounded-card bg-red-50 px-3 py-2.5 text-sm text-error">
                  <AlertCircle size={16} className="mt-0.5 shrink-0" />
                  <span>{error}</span>
                </div>
              )}

              <Button type="submit" disabled={loading} className="w-full">
                {loading ? "Sending…" : "Send reset link"}
              </Button>
            </form>
          )}
        </div>

        <p className="mt-5 text-center text-sm">
          Remembered your password?{" "}
          <Link href="/login" className="font-semibold text-emerald hover:underline">
            Back to sign in
          </Link>
        </p>
      </div>
    </main>
  );
}