import { useEffect, useState } from "react"
import useStudentStore from "../store/useStudentStore.js"
import { Link } from "react-router-dom"
function Student() {
  const { students, addStudent, deleteStudent, getStudents } = useStudentStore()
  const[ formData, setFormData ] = useState({
    name: "",
    email: "",
    parentName: "",
    course: ""
  })
  const [isAdding, setIsAdding] = useState(false)
  const handleSubmit = async(e) =>{
    e.preventDefault()
    await addStudent(formData)
    setFormData({
      name: "",
      email: "",
      parentName: "",
      course: ""
    })
  }
  useEffect(() => {
    getStudents()
  }, [])
  return (
    <div className="w-full flex flex-col items-center">
     <div className='flex flex-col justify-center items-center my-8 w-[98%] rounded-xl bg-slate-700 gap-4'>
       <h1 className="text-2xl hover:scale-104 transition duration-300 py-8"> Manage Students</h1>
       <button className="rounded-md  py-2 px-4 text-xl shadow-md outline-none bg-purple-500 hover:scale-103 transition duration-300" onClick={() => setIsAdding(!isAdding)}>{isAdding ? "Cancel" : "Add Student"}</button>
        <form onSubmit={handleSubmit} className={`flex flex-col bg-slate-800 rounded-lg gap-2  p-12 w-1/3 items-center ${isAdding ? "visible" : "hidden"}`}>
            <h1 className="text-2xl hover:scale-104 transition duration-300 py-2">{formData._id ? "Edit Student" : "Add Student"}</h1>
            <div className="flex flex-col w-full">
                <label>Name</label>
                <input className="border-2 border-gray-500 rounded-md w-full py-2 px-4 text-xl shadow-md outline-none" value={formData.name} onChange={e => setFormData({ ...formData, name: e.target.value })} type="text" name="name" required />
            </div>
            <div className="flex flex-col w-full py-2">
                <label>Email</label>
                <input className="border-2 border-gray-500 rounded-md w-full py-2 px-4 text-xl shadow-md outline-none" value={formData.email} onChange={e => setFormData({ ...formData, email: e.target.value })} type="email" name="email" required />
            </div>
            <div className="flex flex-col w-full py-2">
                <label>Parent Name</label>
                <input className="border-2 border-gray-500 rounded-md w-full py-2 px-4 text-xl shadow-md outline-none" value={formData.parentName} onChange={e => setFormData({ ...formData, parentName: e.target.value })} type="text" name="parentName" required />
            </div>
            <div className="flex flex-col w-full py-2">
                <label>Course</label> 
                <select className=" border-2 border-gray-500 rounded-md w-full py-2 px-4 text-xl shadow-md outline-none" value={formData.course} onChange={e => setFormData({ ...formData, course: e.target.value })} name="course" required>
                    <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>
            <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">Add</button>
        </form>
        <div className="w-full p-8 text-center">
            <h1 className="text-2xl hover:scale-104 transition duration-300 py-8">Students</h1>
            <table className="w-full">
              <thead>
                <tr className=" hover:scale-101 transition duration-300">
                  <th className="bg-slate-400 p-4 rounded-l-lg">Name</th>
                  <th className="bg-slate-400 p-4 ">Email</th>
                  <th className="bg-slate-400 p-4 ">Parent Name</th>
                  <th className="bg-slate-400 p-4 ">Course</th>
                  <th className="bg-slate-400 p-4 rounded-r-lg">Actions</th>
                </tr>
              </thead>
              <tbody>
                {Array.isArray(students) && students.length > 0 ? (
                  students.map((student) => (
                    <tr className="hover:scale-101 transition duration-300 hover:bg-slate-600" key={student._id}>
                      <td className="p-4 rounded-l-lg">{student.name}</td>
                      <td className="p-4">{student.email}</td>
                      <td className="p-4">{student.parentName}</td>
                      <td className="p-4">{student.course}</td>
                      <td className="p-4 rounded-r-lg flex gap-4 text-center items-center justify-center">
                        <Link className="rounded-md py-2 px-4 text-xl shadow-md outline-none bg-purple-500 hover:scale-103 transition duration-300" to={`/student/${student._id}/edit`}>Edit</Link>
                        <button className="rounded-md py-2 px-4 text-xl shadow-md outline-none bg-red-500 hover:scale-103 transition duration-300" onClick={() => deleteStudent(student._id)}>Delete</button>
                      </td>
                    </tr>
                  ))
                ) : (
                  <tr className="transition duration-300 hover:bg-slate-600">
                    <td colSpan={5} className="p-4 rounded-r-lg text-center">No student found</td>
                  </tr>
                )}
              </tbody>
            </table>
        </div>
     </div>
    </div>
  )
}

export default Student