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

function Cars(){
    const [plateNumber, setPlateNumber] = useState('')
  const [driverName, setDriverName] = useState('')
  const [phoneNumber, setPhoneNumber] = useState('')
const [cars, setCars] = useState([])

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

const handleSubmit = async (e) => {
    e.preventDefault()
    try{
        await axios.post('http://localhost:5000/api/cars',{ 
            plateNumber,
            driverName,
            phoneNumber,
    })

    alert('Car added successfully!')
    setPlateNumber('')
    setPhoneNumber('')
    setDriverName('')
    getAllCars()
    }catch(error){
        alert('Failed to add car')
    }
}

    return(
        <div className="min-h-screen bg-gray-100 p-6"> 
        <h2 className="text-2xl font-bold text-gray-800 mb-6">Cars</h2>

         <form onSubmit={handleSubmit} className="bg-white rounded-2xl border border-gray-500
         p-6 mb-8 flex flex-col gap-4 max-w-md">

            <div className="flex flex-col gap-2"> 
          <label className="text-sm font-medium  text-gray-600">Plate Number</label>
          <input
            type="text"
            value={plateNumber}
            onChange={(e) => setPlateNumber(e.target.value)}
            required
          className="border border-black-300 rounded-1g  px-20 py-1 
            text-sm focus:outline-none focus:border-orange-400"
          />
        
        
          <label className="text-sm font-medium text-gray-600">Driver Name</label>
          <input
            type="text"
            value={driverName}
            onChange={(e) => setDriverName(e.target.value)}
            required className="border border-black-300 rounded-1g  px-20 py-1 
            text-sm focus:outline-none focus:border-orange-400"
          />
        
        
          <label className="text-sm font-medium text-gray-600">Phone Number</label>
          <input
            type="text"
            value={phoneNumber}
            onChange={(e) => setPhoneNumber(e.target.value)}
            required className="border border-black-300 rounded-1g  px-20 py-1 
            text-sm focus:outline-none focus:border-orange-400"
          />

          <button type="submit" 
          className=" bg-orange-500 text-white font-medium 
          py-2 rounded-lg hover:bg-orange-600 transition-color"
          >Add car</button>
          </div>
         </form>

           

         <h3 className="text-ig font-semibold text-gray-700 mb-3">Cars list</h3>
         <table className="bg-white rounded-x1 border border-gray-200 overflow-hidden">
            <thead className="bg-gray-50 text-gray-500 text-left">
                <tr>
               <th className="px-4 py-3 font-medium"> Plate  Number</th>
               <th className="px-4 py-3 font-medium">Driver Name</th>
               <th className="px-4 py-3 font-medium"> phone number</th>
                </tr>
            </thead>
            <tbody className="divide">

                {cars.map((car) => (
                    <tr key={car._id} className="hover:bg-gray-50 transition-colors"> 
              <td className="px-4 py-3 text-gray-800">{car.plateNumber}</td>
              <td className="px-4 py-3 text-gray-800">{car.driverName}</td>
              <td className="px-4 py-3 text-gray-800">{car.phoneNumber}</td>
              </tr>
                ))}
            </tbody>
         </table>
         </div>
    


)
}

export default Cars