import { useEffect, useState } from 'react'
import useCourseStore from '../stores/useCourseStore.js'
function Courses() {
  const { courses, isLoading, getCourses, createCourse, updateCourse, deleteCourse } = useCourseStore()
  const [course_name, setCourseName] = useState("")
  const [duration, setDuration] = useState("")
  const [editId, setEditId] = useState(null)
  useEffect(() => {
    getCourses()
  }, [])

  const handleSubmit = async(e) => {
    e.preventDefault()
    if(editId) {
      await updateCourse(editId, course_name, duration)
      setEditId(null)
    } else {
      await createCourse(course_name, duration)
    }
    setCourseName("")
    setDuration("")
  }
  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-4xl mx-auto">
          <h1 className="text-2xl font-bold text-slate-800 mb-6">Courses</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 gap-4">
                  <div>
                      <label htmlFor="course_name" className="block text-sm font-medium text-slate-700 mb-1">Course Name</label>
                      <input value={course_name} required onChange={e => setCourseName(e.target.value)} type="text" id="course_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="duration" className="block text-sm font-medium text-slate-700 mb-1">Duration (months)</label>
                      <input value={duration} required onChange={e => setDuration(e.target.value)} type="number" id="duration" 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>
              <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 Course" : "Create Course"}</button>
                  {editId && <button type="button" onClick={() => {
                      setEditId(null)
                      setCourseName("")
                      setDuration("")
                  }} 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">Course Name</th>
                          <th className="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wider">Duration</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">
                      {courses.length > 0 ? courses.map((course) => (
                          <tr key={course.id} className="hover:bg-slate-50">
                              <td className="px-6 py-4 whitespace-nowrap text-slate-800">{course.course_name}</td>
                              <td className="px-6 py-4 whitespace-nowrap text-slate-600">{course.duration} months</td>
                              <td className="px-6 py-4 whitespace-nowrap">
                                  <button onClick={() => {
                                      setEditId(course.id)
                                      setCourseName(course.course_name || "")
                                      setDuration(course.duration || "")
                                  }} className="text-indigo-600 hover:text-indigo-700 font-medium mr-4">Edit</button>
                                  <button onClick={() => deleteCourse(course.id)} className="text-red-600 hover:text-red-700 font-medium">Delete</button>
                              </td>
                          </tr>
                      )) : <tr><td colSpan={3} className="px-6 py-4 text-center text-slate-500">No Courses Found</td></tr>}
                  </tbody>
              </table>
          </div>
      </div>
    </div>
  )
}

export default Courses