import useStudentStore from '../stores/useStudentStore.js'
import useCourseStore from '../stores/useCourseStore.js'
import { useEffect, useState } from 'react'
function Students() {
  const { students, isLoading, getStudents, createStudent, updateStudent, deleteStudent } = useStudentStore()
  const { courses, getCourses } = useCourseStore()
  const [first_name, setFirstName] = useState("")
  const [last_name, setLastName] = useState("")
  const [gender, setGender] = useState("")
  const [email, setEmail] = useState("")
  const [phone, setPhone] = useState("")
  const [course_id, setCourseId] = useState("")
    const [editId, setEditId] = useState(null)
  useEffect(() => {
    getStudents()
    getCourses()
  }, [])

  const handleSubmit = async(e) => {
    e.preventDefault()
        if(editId) {
            await updateStudent(editId, first_name, last_name, gender, email, phone, course_id)
            setEditId(null)
        } else {
            await createStudent(first_name, last_name, gender, email, phone, course_id)
        }
    setFirstName("")
    setLastName("")
    setGender("")
    setEmail("")
    setPhone("")
    setCourseId("")
  }
  if(isLoading) return <div className="flex items-center justify-center min-h-screen text-slate-500">Loading...</div>
  return (
    <div className="min-h-screen bg-slate-100 p-6">
      <div className="max-w-6xl mx-auto">
          <h1 className="text-2xl font-bold text-slate-800 mb-6">Students</h1>
          <form onSubmit={handleSubmit} className="bg-white p-6 rounded-lg shadow-md mb-6">
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                  <div>
                      <label htmlFor="first_name" className="block text-sm font-medium text-slate-700 mb-1">First Name</label>
                      <input required value={first_name} onChange={e => setFirstName(e.target.value)} type="text" id="first_name" className="w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition-all" />
                  </div>
                  <div>
                      <label htmlFor="last_name" className="block text-sm font-medium text-slate-700 mb-1">Last Name</label>
                      <input required value={last_name} onChange={e => setLastName(e.target.value)} type="text" id="last_name" className="w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition-all" />
                  </div>
                  <div>
                      <label htmlFor="gender" className="block text-sm font-medium text-slate-700 mb-1">Gender</label>
                      <select value={gender} onChange={e => setGender(e.target.value)} id="gender" className="w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition-all">
                          <option value="">Select gender</option>
                          <option value="male">Male</option>
                          <option value="female">Female</option>
                      </select>
                  </div>
                  <div>
                      <label htmlFor="email" className="block text-sm font-medium text-slate-700 mb-1">Email</label>
                      <input required value={email} onChange={e => setEmail(e.target.value)} type="email" id="email" className="w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition-all" />
                  </div>
                  <div>
                      <label htmlFor="phone" className="block text-sm font-medium text-slate-700 mb-1">Phone</label>
                      <input required value={phone} onChange={e => setPhone(e.target.value)} type="number" id="phone" className="w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition-all" />
                  </div>
                  <div>
                      <label htmlFor="course_id" className="block text-sm font-medium text-slate-700 mb-1">Course</label>
                      <select value={course_id} onChange={e => setCourseId(e.target.value)} id="course_id" className="w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition-all">
                          <option value="">Select a course</option>
                          {courses.length > 0 ? courses.map((course) => (
                              <option key={course.id} value={course.id}>{course.course_name}</option>
                          )) : <option value="">No Courses Found</option>}
                      </select>
                  </div>
              </div>
              <div className="mt-4 flex gap-3">
                  <button type="submit" className="bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-2 px-6 rounded-lg transition-colors">{editId ? "Update Student" : "Create Student"}</button>
                  {editId && <button type="button" onClick={() => {
                      setEditId(null)
                      setFirstName("")
                      setLastName("")
                      setGender("")
                      setEmail("")
                      setPhone("")
                      setCourseId("")
                  }} className="bg-slate-500 hover:bg-slate-600 text-white font-medium py-2 px-6 rounded-lg transition-colors">Cancel</button>}
              </div>
          </form>
          <div className="bg-white rounded-lg shadow-md overflow-hidden">
              <table className="w-full">
                  <thead className="bg-slate-50">
                      <tr>
                          <th className="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wider">First Name</th>
                          <th className="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wider">Last Name</th>
                          <th className="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wider">Gender</th>
                          <th className="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wider">Email</th>
                          <th className="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wider">Phone</th>
                          <th className="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wider">Course</th>
                          <th className="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wider">Actions</th>
                      </tr>
                  </thead>
                  <tbody className="divide-y divide-slate-200">
                      {students && students.length > 0 ? students.map((s) => (
                      <tr key={s.id} className="hover:bg-slate-50">
                          <td className="px-6 py-4 whitespace-nowrap text-slate-800">{s.first_name}</td>
                          <td className="px-6 py-4 whitespace-nowrap text-slate-800">{s.last_name}</td>
                          <td className="px-6 py-4 whitespace-nowrap text-slate-600 capitalize">{s.gender}</td>
                          <td className="px-6 py-4 whitespace-nowrap text-slate-600">{s.email}</td>
                          <td className="px-6 py-4 whitespace-nowrap text-slate-600">{s.phone}</td>
                          <td className="px-6 py-4 whitespace-nowrap text-slate-600">{s.course_id}</td>
                          <td className="px-6 py-4 whitespace-nowrap">
                              <button onClick={() => {
                                  setEditId(s.id)
                                  setFirstName(s.first_name || "")
                                  setLastName(s.last_name || "")
                                  setGender(s.gender || "")
                                  setEmail(s.email || "")
                                  setPhone(s.phone || "")
                                  setCourseId(s.course_id ? String(s.course_id) : "")
                              }} className="text-indigo-600 hover:text-indigo-700 font-medium mr-4">Edit</button>
                              <button onClick={() => deleteStudent(s.id)} className="text-red-600 hover:text-red-700 font-medium">Delete</button>
                          </td>
                      </tr>
                  )) : <tr><td colSpan={7} className="px-6 py-4 text-center text-slate-500">No students found</td></tr>}
              </tbody>
          </table>
      </div>
    </div>
    </div>
  )
}

export default Students