'use client'
import React, { useState } from 'react'
import { Alert, Button, TextField } from '@mui/material'

function ForgetPassword() {
    const [email, setEmail] = useState('')
    const [loading, setLoading] = useState(false)
    const [alertMsg, setAlertMsg] = useState('');
    const [alertType, setAlertType] = useState<'success' | 'error'>('success');


    const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
        e.preventDefault()
        e.stopPropagation()
        setLoading(true)
        if (!email) {
            setAlertType('error');
            setAlertMsg('Please enter your email');
            setLoading(false);
            return
        }
        try {
            const response = await fetch('/api/forgot-password', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ email }),
            });

            const data = await response.json();

            if (!response.ok) {
                setAlertType('error');
                setAlertMsg(data.message || data.error || 'Failed to send password');
                return;
            }

            setAlertType('success');
            setAlertMsg(data.message || 'Password sent to your email');
            setEmail('');
        } catch (error) {
            setAlertType('error');
            setAlertMsg('Network error. Please try again.');
        } finally {
            setLoading(false);
        }

    }
    return (
        <div>
            <div className='mb-5'>
                <h2 className='text-[25px] font-semibold'>Forgot Password</h2>
                <p>Enter your email to receive a password on your email</p>
            </div>
            {alertMsg && (
                <Alert severity={alertType} className="mb-6" onClose={() => setAlertMsg('')}>
                    {alertMsg}
                </Alert>
            )}
            <form onSubmit={handleSubmit}>
                <div className='mb-4'>
                    <TextField
                        fullWidth
                        id="email"
                        label="Email"
                        type="email"
                        variant="outlined"
                        size="small"
                        value={email}
                        onChange={(e) => setEmail(e.target.value)}
                        required
                        sx={
                            {
                                backgroundColor: 'white',
                                borderRadius: '50px',
                                '& .MuiInputBase-root': {
                                    borderRadius: '55px',
                                },
                            }
                        }
                    />
                </div>
                <Button type="submit" variant="contained" disabled={loading}
                    sx={{
                        borderRadius: '50px',
                        padding: '5px 50px',
                        fontSize: '16px',
                        fontWeight: 'bold',
                        textTransform: 'none',
                        backgroundColor: '#c4262e',
                        '&:hover': {
                            backgroundColor: '#c4262e',
                        },
                    }}
                >
                    Send
                </Button>
            </form>
        </div>
    );
}

export default ForgetPassword;