import { useEffect } from 'react'
import useReportStore from "../store/useReportStore.js"
import { Link } from "react-router-dom"
import { easeIn, motion } from "framer-motion"
function Dashboard() {
  const { report, getReport } = useReportStore()
  useEffect(() => {
    getReport()
  }, [])
  
  const variants = {
    initial: { opacity: 0, x: 100 },
    enter: { opacity: 1, x: 0, transition: { staggerChildren: 0.1, easeIn, duration: 0.8 } },
    exit: { opacity: 0, x: -100 },
  }
  const variants2 = {
    initial: { opacity: 0, x: 100 },
    enter: { opacity: 1, x: 0 },
    exit: { opacity: 0, x: -100 },
  }
  return (
    <motion.div className='w-full flex flex-col items-center'>
      <motion.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'>Dashboard</h1>
      <motion.div variants={variants} initial="initial" exit="hidden" animate="enter" className='grid grid-cols-3 gap-8'>
          <motion.div variants={variants2} className='italic hover:scale-104 transition duration-300 flex flex-col justify-center items-center py-8 px-8 bg-slate-400 rounded-lg shadow-lg'>
            <p className='text-2xl text-amber-300'>Total students</p>
            <span className='text-4xl text-slate-700'>{report?.totalStudents}</span>
          </motion.div>
          <motion.div variants={variants2} className='italic hover:scale-104 transition duration-300 flex flex-col justify-center items-center py-8 px-8 bg-slate-400 rounded-lg shadow-lg'>
            <p  className='text-2xl text-amber-300'>Total Payments</p>
            <span className='text-4xl text-slate-700'>{report ? report.paymentsRecords : "0"}</span>
          </motion.div>
          <motion.div variants={variants2} className='italic hover:scale-104 transition duration-300 flex flex-col justify-center items-center py-8 px-8 bg-slate-400 rounded-lg shadow-lg'>
            <p className='text-2xl text-amber-300'>Total Payed Amount</p>
            <span className='text-4xl text-slate-700'>{report ? report.totalPayedAmount : "0"}$</span>
          </motion.div>
          <motion.div variants={variants2} className='italic hover:scale-104 transition duration-300 flex flex-col justify-center items-center py-8 px-8 bg-slate-400 rounded-lg shadow-lg'>
            <p className='text-2xl text-amber-300'>Average of Students Who Payed</p>
            <span className='text-4xl text-slate-700'>{report ? report.averageOfStudentWhoPayed : 0}</span>
          </motion.div>
      </motion.div>
          <motion.div className='py-8 gap-4 flex flex-col'>
            <h2 className='text-2xl text-amber-300'>Other Actions</h2>
           <div className='flex gap-4'>
             <Link className='bg-blue-600 shadow-lg rounded-lg px-4 py-8 text-xl italic hover:scale-104 transition duration-300' to="/student">Click To Manage Student</Link>
              <Link className='bg-blue-600 shadow-lg rounded-lg px-4 py-8 text-xl italic hover:scale-104 transition duration-300' to="/payment">Click To Manage Payment</Link>
           </div>
          </motion.div>
      </motion.div>
    </motion.div>
  )
}

export default Dashboard