"use client";

import { useState } from "react";
import Image from "next/image";
import MainBg from "@/images/main-bg.webp";
import MeetVector from "@/images/meet-vector.webp";

export default function ForgotPasswordPage() {
  const [email, setEmail] = useState("");
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState("");
  const [message, setMessage] = useState("");

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setEmail(e.target.value);
  };

  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();

    setLoading(true);
    setError("");
    setMessage("");

    try {
      const res = await fetch("/api/student/forgot-password", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({ email }),
      });

      const data = await res.json();

      if (!res.ok || !data.success) {
        setError(data.message || "Something went wrong.");
        return;
      }

      setMessage(data.message);
      setEmail("");
    } catch (error) {
      console.error(error);
      setError("Something went wrong.");
    } finally {
      setLoading(false);
    }
  };

  return (
    <main
      className="mainsection"
      style={{
        backgroundImage: `url(${MainBg.src})`,
      }}
    >
      <section className="logincontainer">
        <div className="container">
          <div className="row justify-content-center">
            <div className="col-xxl-8 col-xl-9 col-lg-12 col-md-12 col-sm-12 col-12">
              <div className="logininner">
                <div className="row gx-xl-0">
                  <div className="col-xxl-7 col-xl-7 col-lg-6 col-md-6 col-sm-12 col-12 d-none d-md-block mb-3 mb-md-0">
                    <div className="loginleftbx">
                      <div className="w-100 position-relative z-index-1">
                        <h2>Welcome Back <br />Student!</h2>
                        <p>Rhythm Kuchipudi Dance Academy</p>
                        <p>Join Thousands of Students Learning the Art of Kuchipudi</p>
                      </div>
                      <div className="loginvector">
                        <Image src={MeetVector} alt="Vector" />
                      </div>
                    </div>
                  </div>
                  <div className="col-xxl-5 col-xl-5 col-lg-6 col-md-6 col-sm-12 col-12">
                    <div className="loginbx">
                      <h2>Forgot Password</h2>
                      <p className="text-muted small mb-3">
                        Enter your registered email and we'll send you a link to reset your password.
                      </p>

                      {error && (
                        <div
                          style={{
                            color: "red",
                            marginBottom: 15,
                          }}
                        >
                          {error}
                        </div>
                      )}

                      {message && (
                        <div
                          style={{
                            color: "green",
                            marginBottom: 15,
                          }}
                        >
                          {message}
                        </div>
                      )}

                      <form className="loginform" onSubmit={handleSubmit}>
                        <div className="form-group">
                          {/* <label>Email</label> */}
                          <div className="input-groups">
                            <span className="login-icon">
                              <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16">
                                <path d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1zm13 2.383-4.708 2.825L15 11.105zm-.034 6.876-5.64-3.471L8 9.583l-1.326-.795-5.64 3.47A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.741M1 11.105l4.708-2.897L1 5.383z" />
                              </svg>
                            </span>
                            <input
                              type="email"
                              name="email"
                              className="form-control"
                              placeholder="Enter email"
                              value={email}
                              onChange={handleChange}
                              required
                            />
                          </div>
                        </div>

                        <button type="submit" disabled={loading} className="theme-btn">
                          {loading ? "Sending Link..." : "Send"}
                        </button>
                      </form>

                      <p className="donthaveaccount">
                        Remember password? <a href="/student/login">Login</a>
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}