import React, { useState } from "react";
import {
  TextField,
  Button,
  Typography,
  Box,
  Link as MuiLink,
} from "@mui/material";
import { useNavigate, Link } from "react-router-dom";
import toast from "react-hot-toast";
import axiosInstance from "../../api/axiosInstance";

const ForgotPasswordForm = () => {
  const navigate = useNavigate();
  const [mobile, setMobile] = useState("");
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState("");

  const handleChange = (e) => {
    const value = e.target.value;
    // Allow only numbers
    if (/^\d*$/.test(value)) {
      setMobile(value);
      if (error) setError("");
    }
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    
    if (!mobile) {
      setError("Mobile number is required");
      return;
    }
    if (mobile.length !== 10) {
      setError("Enter a valid 10-digit mobile number");
      return;
    }

    setLoading(true);
    try {
      // API call with query parameter as requested
      const response = await axiosInstance.post(`/forgot_password_send_otp?mobile=${mobile}`);
      
      const successMessage = response.data?.message || "OTP sent successfully!";
      toast.success(successMessage);
      
      // Optional: Navigate to verify OTP page if needed
      // navigate('/verify-otp', { state: { mobile } });
      
    } catch (err) {
      console.error("Forgot password error:", err);
      const errorMessage = err.response?.data?.message || 
                           err.response?.data?.error || 
                           "Failed to send OTP. Please try again.";
      toast.error(errorMessage);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="bg-white p-8 rounded-lg shadow-sm h-full flex flex-col justify-center border border-gray-100">
      <Typography variant="h4" fontWeight="700" color="primary" gutterBottom align="center">
        Forgot Password
      </Typography>
      <Typography variant="body1" color="text.secondary" mb={4} align="center">
        Enter your mobile number to receive an OTP
      </Typography>

      <form onSubmit={handleSubmit} autoComplete="off">
        <Box display="flex" flexDirection="column" gap={3}>
          <TextField
            fullWidth
            label="Mobile Number"
            name="mobile"
            value={mobile}
            onChange={handleChange}
            error={Boolean(error)}
            helperText={error}
            variant="outlined"
            placeholder="Enter 10-digit mobile number"
            inputProps={{ maxLength: 10, inputMode: "numeric" }}
            disabled={loading}
          />

          <Button
            type="submit"
            variant="contained"
            color="primary"
            size="large"
            fullWidth
            disabled={loading}
            sx={{
              py: 1.5,
              fontSize: "1rem",
              fontWeight: "bold",
              textTransform: "none",
              borderRadius: 2,
            }}
          >
            {loading ? "Sending..." : "Send OTP"}
          </Button>

          <Box mt={2} textAlign="center">
            <Typography variant="body2" color="text.secondary">
              Remember your password?{" "}
              <MuiLink
                component={Link}
                to="/login"
                underline="hover"
                fontWeight="bold"
                color="primary"
              >
                Login
              </MuiLink>
            </Typography>
          </Box>
        </Box>
      </form>
    </div>
  );
};

export default ForgotPasswordForm;