import { useState } from 'react'
import { Link } from 'react-router-dom'
import { authApi } from '@/api/auth'
import { BrandLogo } from '@/components/common/BrandLogo'
import { cn } from '@/lib/utils'

export function ForgotPasswordPage() {
  const [email, setEmail] = useState('')
  const [isLoading, setIsLoading] = useState(false)
  const [submitted, setSubmitted] = useState(false)

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    if (!email) return

    setIsLoading(true)
    try {
      await authApi.forgotPassword(email)
    } catch {
      // Always show success (anti-enumeration)
    } finally {
      setIsLoading(false)
      setSubmitted(true)
    }
  }

  return (
    <div className="flex min-h-screen items-center justify-center bg-card px-4">
      <div className="pointer-events-none fixed inset-0 bg-[radial-gradient(circle_at_50%_0%,rgba(100,100,120,0.03),transparent_50%)]" />

      <div className="relative w-full max-w-md space-y-8">
        <div className="text-center">
          <div className="mb-4 flex justify-center sm:mb-6">
            <div className="w-16 h-16 rounded-2xl bg-gradient-brand flex items-center justify-center sm:w-20 sm:h-20">
              <BrandLogo size="lg" className="h-10 w-10 invert sm:h-12 sm:w-12" />
            </div>
          </div>
          <h1 className="text-3xl font-bold text-foreground tracking-tight">
            Reset Password
          </h1>
          <p className="mt-2 text-sm text-muted-foreground">
            Enter your email and we'll send you a link to reset your password.
          </p>
        </div>

        {submitted ? (
          <div className="bg-card border border-border rounded-xl p-6 space-y-4">
            <div className="rounded-xl border border-green-400/20 bg-green-400/10 p-4 text-sm text-green-400">
              If an account with that email exists, we've sent a password reset link.
              Check your inbox and follow the instructions.
            </div>
            <div className="text-center">
              <Link
                to="/login"
                className="text-sm text-muted-foreground hover:text-foreground transition-colors"
              >
                Back to sign in
              </Link>
            </div>
          </div>
        ) : (
          <form onSubmit={handleSubmit} className="mt-8 space-y-6">
            <div className="bg-card border border-border rounded-xl p-6 space-y-4">
              <div>
                <label htmlFor="email" className="mb-1 block text-sm font-medium text-foreground">
                  Email Address
                </label>
                <input
                  id="email"
                  type="email"
                  autoComplete="email"
                  required
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  className={cn(
                    'block w-full rounded-xl border border-border bg-card px-3 py-2',
                    'text-foreground placeholder:text-muted-foreground',
                    'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20',
                    'transition-colors'
                  )}
                  placeholder="you@example.com"
                />
              </div>

              <button
                type="submit"
                disabled={isLoading || !email}
                className={cn(
                  'w-full rounded-xl px-4 py-2.5 text-sm font-semibold btn-press',
                  'bg-gradient-brand text-white shadow-lg shadow-primary/20 hover:opacity-90',
                  'focus:outline-none focus:ring-2 focus:ring-primary/30 focus:ring-offset-2 focus:ring-offset-background',
                  'disabled:cursor-not-allowed disabled:opacity-50',
                  'transition-all'
                )}
              >
                {isLoading ? 'Sending...' : 'Send Reset Link'}
              </button>

              <div className="text-center">
                <Link
                  to="/login"
                  className="text-sm text-muted-foreground hover:text-foreground transition-colors"
                >
                  Back to sign in
                </Link>
              </div>
            </div>
          </form>
        )}
      </div>
    </div>
  )
}

export default ForgotPasswordPage