import { useState,useEffect } from "react";
import axios from "axios";

function Report (){
    const [records, setRecords] = useState([])
    const [payments, setPayments] = useState([])

    const getAllRecords = async () => {
        try{

         
        const res = await axios.get('http://localhost:5000/api/parkingRecords')
        setRecords(res.data)
    }catch(error){
console.log('error')
    }
}

const getAllPayments = async () => {
    try{
        const res = await axios.get('http://localhost:5000/api/payments')
        setPayments(res.data)
    }catch(error){
        console.log('erro')
    }
}
useEffect(() => {
    getAllPayments()
    getAllRecords()
}, [])

const calculateFee = (duration) => {
        if (!duration || duration <= 0) return 500
    return Math.ceil(duration) * 500
}
const today = new Date(). toDateString()

const todayPayment = payments.filter((payment) => {
    return new Date(payment.paymentDate). toDateString() === today
})

return(
    <div className="min-h-screen bg-gray-400">
        <h2 className="text-2xl font-bold  text-gray-800 mb-6">Payment</h2>
        <h3 className="text-lg  font-semibold text-black-500 mb-3">Bill</h3>
        <div className="bg-white rounded-xl border border-gray-200 overflow-hidden mb-8"> 
        <table className="w-full text-sm flex">
            <thead className="bg-gray-50 text-gray-500 text-left">
                <tr>
                      <th className="px-4 py-2">Car</th>
            <th  className="px-4 py-2">Entry Time</th>
            <th  className="px-4 py-2">Exit Time</th>
            <th  className="px-4 py-2">Duration (hrs)</th>
            <th  className="px-4 py-2">Amount (Rwf)</th>
                </tr>
            </thead>
            <tbody>
                {records.map((record) => (
                    <tr key={record._id} className="border-t">
                        <td className="px-4 py-2">{record.car}</td>
                        <td  className="px-4 py-2">{record.entryTime}</td>
                        <td  className="px-4 py-2">{record.exitTime}</td>
                        <td  className="px-4 py-2">{record.duration}</td>
                        <td  className="px-4 py-2 text-orange-600 font-semibold" >{calculateFee(record.duration)}</td>
                    </tr>
                ))}
            </tbody>
        </table>
</div>
        <h3 className="text-lg font-semibold text-black-100 mb-2">Daily Parking Payment Record</h3>
        <p className="mb-2 text-gray-700">Date:{today}</p>
        <div className="bg-white rounded-xl  border border-gray-200 overflow-hidden">

         
        <table className="w-full text-sm">
            <thead className="bg-gray-50 text-gray-500 text-left">
                <tr>
                    <td className="px-4 py-2">Record ID</td>
                    <td  className="px-4 py-2">Amount Paid</td>
                    <td  className="px-4 py-2">Payment Date</td>
                </tr>
            </thead>
            <tbody>
                {todayPayment.map((payment) => (
                    <tr key={payment._id} className="border-t">
                        <td className="px-3 py-2">{payment.record}</td>
                        <td className="px-3 py-2 text-orange-300 font-semibold">{payment.amountPaid}</td>
                        <td className="px-3 py-2">{new Date(payment.paymentDate).toLocaleDateString()}</td>
                    </tr>
                ))}
            </tbody>
        </table>
</div>
    </div>
)
}

export default Report