'use client'

import { useState } from 'react'
import { Header } from '@/components/Header'
import { Footer } from '@/components/Footer'
import { api } from '@/lib/api'
import { Mail, ArrowLeft, CheckCircle, AlertCircle } from 'lucide-react'
import Link from 'next/link'
import clsx from 'clsx'

export default function ForgotPasswordPage() {
  const [email, setEmail] = useState('')
  const [loading, setLoading] = useState(false)
  const [success, setSuccess] = useState(false)
  const [error, setError] = useState<string | null>(null)

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setLoading(true)
    setError(null)

    try {
      await api.forgotPassword(email)
      setSuccess(true)
    } catch (err: any) {
      // Always show success message (security: don't reveal if email exists)
      setSuccess(true)
    } finally {
      setLoading(false)
    }
  }

  return (
    <>
      <Header />
      <main className="min-h-screen flex items-center justify-center p-4 pt-24">
        <div className="w-full max-w-md">
          <Link
            href="/login"
            className="inline-flex items-center gap-2 text-foreground-muted hover:text-foreground mb-8 transition-colors"
          >
            <ArrowLeft className="w-4 h-4" />
            Back to login
          </Link>

          {success ? (
            <div className="bg-background-secondary/50 border border-border rounded-2xl p-8 text-center">
              <div className="w-16 h-16 bg-accent/10 rounded-full flex items-center justify-center mx-auto mb-6">
                <CheckCircle className="w-8 h-8 text-accent" />
              </div>
              <h1 className="text-display-sm font-bold text-foreground mb-4">
                Check your inbox
              </h1>
              <p className="text-foreground-muted mb-6">
                If <strong className="text-foreground">{email}</strong> is registered, 
                you&apos;ll get a reset link. Valid for 1 hour.
              </p>
              <p className="text-body-sm text-foreground-subtle">
                Didn't receive the email? Check your spam folder or{' '}
                <button
                  onClick={() => setSuccess(false)}
                  className="text-accent hover:underline"
                >
                  try again
                </button>
              </p>
            </div>
          ) : (
            <div className="bg-background-secondary/50 border border-border rounded-2xl p-8">
              <div className="text-center mb-8">
                <h1 className="text-display-sm font-bold text-foreground mb-2">
                  Reset your password
                </h1>
                <p className="text-foreground-muted">
                  Enter your email. We&apos;ll send a reset link.
                </p>
              </div>

              <form onSubmit={handleSubmit} className="space-y-6">
                {error && (
                  <div className="flex items-center gap-3 p-4 bg-danger/10 border border-danger/20 rounded-xl text-danger">
                    <AlertCircle className="w-5 h-5 flex-shrink-0" />
                    <p className="text-body-sm">{error}</p>
                  </div>
                )}

                <div>
                  <label htmlFor="email" className="block text-body-sm font-medium text-foreground mb-2">
                    Email address
                  </label>
                  <div className="relative">
                    <Mail className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-foreground-muted" />
                    <input
                      id="email"
                      type="email"
                      value={email}
                      onChange={(e) => setEmail(e.target.value)}
                      required
                      placeholder="you@example.com"
                      className="w-full pl-12 pr-4 py-3 bg-background-tertiary border border-border rounded-xl text-foreground placeholder:text-foreground-subtle focus:outline-none focus:ring-2 focus:ring-accent/30 focus:border-accent transition-all"
                    />
                  </div>
                </div>

                <button
                  type="submit"
                  disabled={loading}
                  className={clsx(
                    'w-full py-3 px-4 bg-accent text-background font-medium rounded-xl transition-all',
                    loading
                      ? 'opacity-50 cursor-not-allowed'
                      : 'hover:bg-accent-hover active:scale-[0.98]'
                  )}
                >
                  {loading ? 'Sending...' : 'Send reset link'}
                </button>
              </form>
            </div>
          )}
        </div>
      </main>
      <Footer />
    </>
  )
}

