import useReport from '../stores/useReport.js'
import { useEffect } from 'react'
function Dashboard() {
  const { report, isLoading, getReport } = useReport()
  useEffect(() => {
    getReport()
  }, [])
  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">Dashboard</h1>
          <div className="bg-white p-6 rounded-lg shadow-md">
              <h2 className="text-lg font-semibold text-slate-700 mb-4">System Report</h2>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div className="bg-indigo-50 p-6 rounded-lg border border-indigo-100">
                    <p className="text-sm text-indigo-600 font-medium mb-1">Total Courses</p>
                    <p className="text-3xl font-bold text-indigo-700">{report?.totalCourse || 0}</p>
                  </div>
                  <div className="bg-green-50 p-6 rounded-lg border border-green-100">
                    <p className="text-sm text-green-600 font-medium mb-1">Total Students</p>
                    <p className="text-3xl font-bold text-green-700">{report?.totalStudents || 0}</p>
                  </div>
                  <div className="bg-amber-50 p-6 rounded-lg border border-amber-100">
                    <p className="text-sm text-amber-600 font-medium mb-1">Avg Students per Course</p>
                    <p className="text-3xl font-bold text-amber-700">{(report?.averageStudentsPerCourse || 0).toFixed(2)}</p>
                  </div>
                  <div className="bg-slate-50 p-6 rounded-lg border border-slate-200">
                    <p className="text-sm text-slate-600 font-medium mb-1">Avg Courses per Student</p>
                    <p className="text-3xl font-bold text-slate-700">{(report?.averageCoursesPerStudent || 0).toFixed(2)}</p>
                  </div>
              </div>
          </div>
      </div>
    </div>
  )
}

export default Dashboard