"use client";

import { useState } from "react";
import Image from "next/image";
import { useRouter } from "next/navigation";
import MainBg from "@/images/main-bg.webp";
import MeetVector from "@/images/meet-vector.webp";
import Link from "next/link";
export default function StudentLoginPage() {
  const router = useRouter();

  const [form, setForm] = useState({
    email: "",
    password: "",
  });

  const [loading, setLoading] = useState(false);
  const [error, setError] = useState("");

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setForm((prev) => ({
      ...prev,
      [e.target.name]: e.target.value,
    }));
  };

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

    setLoading(true);
    setError("");

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

      const data = await res.json();

      if (!res.ok) {
        setError(data.message || "Login failed.");
        return;
      }

      router.push("/student/dashboard");
      router.refresh();
    } 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>Student Login</h2>

                      {error && (
                        <div
                          style={{
                            color: "red",
                            marginBottom: 15,
                          }}
                        >
                          {error}
                        </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={form.email} onChange={handleChange} required />
                          </div>
                        </div>

                        <div className="form-group">
                          <label>Password</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 fill-rule="evenodd" d="M8 0a4 4 0 0 1 4 4v2.05a2.5 2.5 0 0 1 2 2.45v5a2.5 2.5 0 0 1-2.5 2.5h-7A2.5 2.5 0 0 1 2 13.5v-5a2.5 2.5 0 0 1 2-2.45V4a4 4 0 0 1 4-4M4.5 7A1.5 1.5 0 0 0 3 8.5v5A1.5 1.5 0 0 0 4.5 15h7a1.5 1.5 0 0 0 1.5-1.5v-5A1.5 1.5 0 0 0 11.5 7zM8 1a3 3 0 0 0-3 3v2h6V4a3 3 0 0 0-3-3" />
                              </svg>
                            </span>
                            <input
                              type="password" name="password" className="form-control" placeholder="Enter password" value={form.password} onChange={handleChange} required />
                          </div>
                        </div>

                        <button type="submit" disabled={loading} className="theme-btn">{loading ? "Logging in..." : "Login"}</button>
                      </form>

                      <p className="donthaveaccount">Don't have an account? <a href="/student/register">Register</a></p>
                      <Link href='/student/forgot-password' className="donthaveaccount">Forget Password?</Link>

                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}