import { useState, useEffect } from "react"
import usePaymentStore from "../store/usePaymentStore.js"
import { Link } from "react-router-dom"
import { useNavigate } from "react-router-dom"
import useStudentStore from "../store/useStudentStore.js"
function Payment() {
    const navigate = useNavigate()
    const { payments, addPayment, getPayments, deletePayment } = usePaymentStore()
    const { students, getStudents } = useStudentStore()
    const [isAdding, setIsAdding] = useState(false)
    useEffect(() => {
        getPayments()
        getStudents()
    }, [])
    const [formData, setFormData] = useState({ student: 0, amount: "", date: "" })
    const handleSubmit = async (e) => {
        e.preventDefault()
        addPayment(formData)
        setFormData({ student: "", amount: "", date: "" })
        navigate("/payment")
    }
    console.log(payments)
    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 Payment</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 Payment"}</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-8">Add Payment</h1>
                    <div className="flex flex-col w-full">
                        <label>Student</label>
                        <select className="border-2 border-gray-500 rounded-md w-full py-2 px-4 text-xl shadow-md outline-none" value={formData.student} onChange={(e) => setFormData({ ...formData, student: e.target.value })} name="student" required>
                           <option value="">Select Student</option>
                            { students.map(student => (
                                <option value={student._id} key={student._id}>{student.name}</option>
                            ))}
                        </select>
                    </div>
                    <div className="flex flex-col w-full py-2">
                        <label>Amount</label>
                        <input className="border-2 border-gray-500 rounded-md w-full py-2 px-4 text-xl shadow-md outline-none" value={formData.amount} onChange={(e) => setFormData({ ...formData, amount: e.target.value })} type="number" name="amount" required />
                    </div>
                    <div className="flex flex-col w-full py-2">
                        <label>Date</label>
                        <input className="border-2 border-gray-500 rounded-md w-full py-2 px-4 text-xl shadow-md outline-none" value={formData.date} onChange={(e) => setFormData({ ...formData, date: e.target.value })} type="date" name="date" required />
                    </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 Payment</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">Amount</th>
                                <th className="bg-slate-400 p-4">Date</th>
                                <th className="bg-slate-400 p-4 rounded-r-lg">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            {
                                Array.isArray(payments) && payments.length > 0 ? (
                                    payments.map((payment) => (
                                        <tr className="hover:scale-101 transition duration-300 hover:bg-slate-600" key={payment._id}>
                                            <td className="p-4 rounded-l-lg">{payment.student?.name}</td>
                                            <td className="p-4">{payment.amount}$</td>
                                            <td className="p-4">{new Date(payment.date).toLocaleDateString()}</td>
                                            <td className="p-4 rounded-r-lg flex gap-4 text-center items-center justify-center">
                                                <button className="rounded-md py-2 px-4 text-xl shadow-md outline-none bg-red-500 hover:scale-103 transition duration-300" onClick={() => deletePayment(payment._id)}>Delete</button>
                                            </td>
                                        </tr>
                                    ))
                                ) : (
                                    <tr className="hover:scale-101 transition duration-300 hover:bg-slate-600">
                                        <td className="p-4 rounded-r-lg text-center" colSpan={5}>No payment found</td>
                                    </tr>
                                )  
                            }
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    )
}   
export default Payment