import { useEffect, useMemo, useState } from "react"
import useStudentStore from "../store/useStudentStore.js"
import { useParams, useNavigate, Link } from "react-router-dom"

function StudentEdit() {
    const navigate = useNavigate()
    const { id } = useParams()
    const { student, editStudent, getStudent } = useStudentStore()

    const initialForm = useMemo(() => {
        const s = student?.student
        return {
            name: s?.name || "",
            email: s?.email || "",
            parentName: s?.parentName || "",
            course: s?.course || "",
        }
    }, [student?.student])

    const [formData, setFormData] = useState(initialForm)

    useEffect(() => {
        getStudent(id)
    }, [id, getStudent])

    // Only set once per loaded student (prevents render loops / cascading updates)
    useEffect(() => {
        setFormData(initialForm)
    }, [initialForm])

    const handleSubmit = async (e) => {
        e.preventDefault()
        await editStudent(id, formData)
        navigate("/student")
    }

    return (
        <div className="flex flex-col items-center justify-center content-center w-full my-8 rounded">
            <div className="w-1/3 bg-slate-800 flex flex-col items-center content-center justify-center rounded-xl px-6 py-12 gap-4">
                <h1 className="text-2xl hover:scale-104 transition duration-300">Student Edit</h1>
            <form onSubmit={handleSubmit} className="flex flex-col w-full">
                <div className="flex flex-col gap-2 w-full">
                    <label className="text-xl">Name</label>
                    <input
                        value={formData.name}
                        onChange={(e) => setFormData({ ...formData, name: e.target.value })}
                        type="text"
                        name="name"
                        required
                        className="border-2 border-gray-500 rounded-md w-[99%] py-2 px-4 text-xl shadow-md outline-none"
                    />
                </div>
                <div className="flex flex-col gap-2 w-full">
                    <label className="text-xl">Email</label>
                    <input
                        value={formData.email}
                        onChange={(e) => setFormData({ ...formData, email: e.target.value })}
                        type="email"
                        name="email"
                        required
                        className="border-2 border-gray-500 rounded-md w-[99%] py-2 px-4 text-xl shadow-md outline-none"
                    />
                </div>
                <div className="flex flex-col gap-2 w-full">
                    <label className="text-xl">Parent Name</label>
                    <input
                        value={formData.parentName}
                        onChange={(e) => setFormData({ ...formData, parentName: e.target.value })}
                        type="text"
                        name="parentName"
                        required
                        className="border-2 border-gray-500 rounded-md w-[99%] py-2 px-4 text-xl shadow-md outline-none"
                    />
                </div>
                <div className="mt-4">
                    <label className="text-xl">Course</label>
                    <select
                        value={formData.course}
                        onChange={(e) => setFormData({ ...formData, course: e.target.value })}
                        name="course"
                        required
                        className="border-2 border-gray-500 rounded-md w-[99%] py-2 px-4 text-xl shadow-md outline-none"
                    >
                        <option value="">Select Course</option>
                        <option value="L4MMP">L4MMP</option>
                        <option value="L5SOD">L5SOD</option>
                        <option value="L4SOD">L4SOD</option>
                        <option value="L3NIT">L3NIT</option>
                        <option value="L4NIT">L4NIT</option>
                        <option value="L5NIT">L5NIT</option>
                    </select>
                </div>
                <div className="mt-4 flex flex-col gap-2 ">
                     <button className="rounded-md w-[99%] py-2 px-4 text-xl shadow-md outline-none bg-purple-500 hover:scale-103 transition duration-300" type="submit">Edit Student</button>
                     <Link to="/student" className="rounded-md text-center w-[99%] py-2 px-4 text-xl shadow-md outline-none bg-blue-500 hover:scale-103 transition duration-300">go back</Link>
                </div>
            </form>
            </div>
        </div>
    )
}

export default StudentEdit
