membership-fe/src/pages/ForgotPassword.js

import React, { useState } from 'react';
import { Link } from 'react-router-dom';
import { useAuth } from '../context/AuthContext';
import { Button } from '../components/ui/button';
import { Input } from '../components/ui/input';
import { Label } from '../components/ui/label';
import { Card } from '../components/ui/card';
import { toast } from 'sonner';
import PublicNavbar from '../components/PublicNavbar';
import PublicFooter from '../components/PublicFooter';
import { ArrowRight, ArrowLeft, Mail, CheckCircle } from 'lucide-react';

const ForgotPassword = () => {
  const { forgotPassword } = useAuth();
  const [loading, setLoading] = useState(false);
  const [submitted, setSubmitted] = useState(false);
  const [email, setEmail] = useState('');

  const handleSubmit = async (e) => {
    e.preventDefault();
    setLoading(true);

    try {
      await forgotPassword(email);
      setSubmitted(true);
      toast.success('Password reset email sent!');
    } catch (error) {
      toast.error(error.response?.data?.detail || 'Failed to send reset email. Please try again.');
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="min-h-screen bg-background">
      <PublicNavbar />

      <div className="max-w-md mx-auto px-6 py-12">
        <div className="mb-8">
          <Link to="/login" className="inline-flex items-center text-brand-purple  hover:text-[var(--orange-light)] transition-colors">
            <ArrowLeft className="h-4 w-4 mr-2" />
            Back to Login
          </Link>
        </div>

        <Card className="p-8 md:p-12 bg-background rounded-2xl border border-[var(--neutral-800)] shadow-lg">
          {!submitted ? (
            <>
              <div className="mb-8 text-center">
                <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-[var(--lavender-300)] mb-4">
                  <Mail className="h-8 w-8 text-brand-purple " />
                </div>
                <h1 className="text-4xl md:text-5xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
                  Forgot Password?
                </h1>
                <p className="text-lg text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                  No worries! Enter your email and we'll send you reset instructions.
                </p>
              </div>

              <form onSubmit={handleSubmit} className="space-y-6">
                <div>
                  <Label htmlFor="email">Email Address</Label>
                  <Input
                    id="email"
                    name="email"
                    type="email"
                    required
                    value={email}
                    onChange={(e) => setEmail(e.target.value)}
                    placeholder="your.email@example.com"
                    className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
                  />
                </div>

                <Button
                  type="submit"
                  disabled={loading}
                  className="w-full bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-background rounded-full py-6 text-lg font-medium shadow-lg hover:scale-105 transition-transform disabled:opacity-50"
                >
                  {loading ? 'Sending...' : 'Send Reset Link'}
                  <ArrowRight className="ml-2 h-5 w-5" />
                </Button>

                <p className="text-center text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                  Remember your password?{' '}
                  <Link to="/login" className="text-[var(--orange-light)] hover:underline font-medium">
                    Login here
                  </Link>
                </p>
              </form>
            </>
          ) : (
            <div className="text-center">
              <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-[var(--green-bg)] mb-6">
                <CheckCircle className="h-8 w-8 text-[var(--green-success)]" />
              </div>
              <h1 className="text-4xl md:text-5xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
                Check Your Email
              </h1>
              <p className="text-lg text-brand-purple  mb-8" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                If an account exists for <span className="font-medium text-[var(--purple-ink)]">{email}</span>,
                you will receive a password reset link shortly.
              </p>
              <p className="text-sm text-brand-purple  mb-8" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                The link will expire in 1 hour. If you don't see the email, check your spam folder.
              </p>
              <Link to="/login">
                <Button className="bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-background rounded-full px-8 py-6 text-lg font-medium shadow-lg hover:scale-105 transition-transform">
                  Return to Login
                  <ArrowRight className="ml-2 h-5 w-5" />
                </Button>
              </Link>
            </div>
          )}
        </Card>
      </div>

      <PublicFooter />
    </div>
  );
};

export default ForgotPassword;