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

function ParkingRecord(){
     
  const [car, setCar] = useState('')
  const [slot, setSlot] = useState('')
  const [entryTime, setEntryTime] = useState('')
  const [exitTime, setExitTime] = useState('')
  const [duration, setDuration] = useState('')
  const [record, setRecord] = useState([])
  const [editId, setEditId] = useState(null)

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

const handleSubmit = async (e) => {
    e.preventDefault()
    try{
        if (editId) {
        await axios.put(`http://localhost:5000/api/parkingRecords/${editId}`, {
            car,
          slot,
          entryTime,
          exitTime,
          duration,

        })
        alert ('record succussefully updated')
        setEditId(null)
    } else {
        await axios.post('http://localhost:5000/api/parkingRecords', {
              car,
          slot,
          entryTime,
          exitTime,
          duration,
        })
        alert ('Record added succussfully')
    }
    setCar('')
    setDuration('')
    setEntryTime('')
    setExitTime('')
    setSlot('')
    getAllRecords()
    
}catch(error){
alert('failed to record')
}

}
const handleEdit = (record)  => {
    setEditId(record._id)
    setCar(record.car)
    setSlot(record.slot)
    setEntryTime(record.entryTime)
    setDuration(record.duration)
    setExitTime(record.exitTime)
}
const handleDelete = async (id) => {
    try{
        await axios.delete(`http://localhost:5000/api/parkingRecords/${id}`)
        alert('deleted successfully')
        getAllRecords()
    }catch(error){
        alert('failed to delete')
    }
}
return (
    <div className="bg-amber-50 p-6 min-h-screen">
<h2 className="text-2xl font-bold text-gray-800 mb-6">ParkingRecord</h2>
<form onSubmit={handleSubmit} className="bg-white rounded-x1 border border-gray-200 
p-6 mb-8 flex flex-col gap-4 max-w-md m-7">

    <label className="text-sm font-medium text-gray-600"> Car Id</label>
    <input type="text" value={car} 
    onChange={(e) => setCar(e.target.value)} required
    className="border border-gray-300 rounded-lg px-3 py-2 yext-sm focus:outline-none
    focus:border-orange-400"
    />
 <label className="text-sm font-medium text-gray-500">Slot ID</label>
        <input
          type="text"
          value={slot}
          onChange={(e) => setSlot(e.target.value)}
          required
          className="border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none
          focus:border-orange-400 "
        />
        <label className="text-sm font-medium text-gray-300">Entry Time</label>
        <input
          type="datetime-local"
          value={entryTime}
          onChange={(e) => setEntryTime(e.target.value)}
          required
          className="border border-gray-500 rounded-lg px-4 py-2 text-sm focus:outline-none
          focus:border-orange-800"
        />
        <label className="text-sm font-medium text-gray-400">Exit Time</label>
        <input
          type="datetime-local"
          value={exitTime}
          onChange={(e) => setExitTime(e.target.value)}
          className="border border-gray-500 text-sm rounded-lg px-4 py-2 focus:outline-none
          focus:border-orange-800"
        />
        <label className="text-sm font-medium border-gray-400">Duration (hours)</label>
        <input
          type="number"
          value={duration}
          onChange={(e) => setDuration(e.target.value)}
          className="border border-gray-400 rounded-lg text-sm px-4 py-2 
          focus:outline-none focus:border-orange-800"
        />
        <button type="submit" className="bg-orange-300 text-white font-medium 
        py-2 rounded-lg hover:bg-orange-800 transition-colors"> 
        {editId? 'update Record': 'Add record'}
</button>
</form>

<h3 className="font-medium text-sm text-gray-500 mb-2">Record list</h3>
<div className="shadow-sm bg-white rounded-xl border border-gray-400 overflow-hidden"> 
<table className="w-full text-sm">
    <thead className="bg-gray-400 text-gray-400 text-left">
        <tr >
              <th  className="px-4 py-2 font-medium">Car</th>
            <th  className="px-4 py-2 font-medium">Slot</th>
            <th  className="px-4 py-2 font-medium">Entry Time</th>
            <th  className="px-4 py-2 font-medium">Exit Time</th>
            <th  className="px-4 py-2 font-medium">Duration</th>
            <th  className="px-4 py-2 font-medium">Actions</th>
        </tr>
    </thead>
    <tbody className="divide-y divide-gray-100">
        {record.map((record) => (
            <tr key={record._id} className="hover:bg-gray-50">
                   <td className="px-4 py-2 text-gray-800">{record.car}</td>
              <td  className="px-4 py-2 text-gray-800">{record.slot}</td>
              <td  className="px-4 py-2 text-gray-800">{record.entryTime}</td>
              <td  className="px-4 py-2 text-gray-800">{record.exitTime}</td>
              <td  className="px-4 py-2 text-gray-800">{record.duration}</td>
              <td className="px-4 py-2">
                <button onClick={() => handleEdit(record)} className="px-3 py-2 bg-orange-400 text-orange-700
                rounded-lg hover:bg-orange-600 transition-colors"
                    >Edit</button>
                <button onClick={() => handleDelete(record._id)} className="px-3 py-2 bg-orange-400 text-orange-500
                rounded-lg hover:bg-orange-500 transition-colors">Delete</button>
              </td>
            </tr>
        ))}
    </tbody>
</table>
</div>
    </div>
)
}

export default ParkingRecord