import React, { useState, useEffect } from 'react';
import axios from '../axiosInstance'

export default function Cars() {
  const [cars, setCars] = useState([]);
  const [form, setForm] = useState({ number: '', type: '', model: '', manufacturingYear: '', driverName: '', mechanicName: '' });

  useEffect(() => { fetchCars(); }, []);
  
  const fetchCars = async () => {
    const res = await axios.get('http://localhost:5000/api/car');
    setCars(res.data);
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    await axios.post('http://localhost:5000/api/car', form);
    setForm({ number: '', type: '', model: '', manufacturingYear: '', driverName: '', mechanicName: '' });
    fetchCars();
  };

  const deleteCar = async (id) => {
    await axios.delete(`http://localhost:5000/api/car/${id}`);
    fetchCars();
  };

  return (
    <div className="p-6 max-w-7xl mx-auto space-y-6">
      <form onSubmit={handleSubmit} className="bg-white p-6 rounded-2xl border border-slate-200 grid grid-cols-2 md:grid-cols-3 gap-4 shadow-sm ">
        <input className="border p-3 rounded-xl text-sm font-bold text-black" placeholder="Plate Number" value={form.number} onChange={e => setForm({...form, number: e.target.value})} required />
        <input className="border p-3 rounded-xl text-sm font-bold text-black" placeholder="Vehicle Type" value={form.type} onChange={e => setForm({...form, type: e.target.value})} required />
        <input className="border p-3 rounded-xl text-sm font-bold text-black" placeholder="Model" value={form.model} onChange={e => setForm({...form, model: e.target.value})} required />
        <input className="border p-3 rounded-xl text-sm font-bold text-black" type="number" placeholder="Year" value={form.manufacturingYear} onChange={e => setForm({...form, manufacturingYear: e.target.value})} required />
        <input className="border p-3 rounded-xl text-sm font-bold text-black" placeholder="Driver Name" value={form.driverName} onChange={e => setForm({...form, driverName: e.target.value})} required />
        <input className="border p-3 rounded-xl text-sm font-bold text-black" placeholder="Mechanic Name" value={form.mechanicName} onChange={e => setForm({...form, mechanicName: e.target.value})} required />
        <button type="submit" className="col-span-full bg-blue-600 text-white font-semibold py-3 rounded-xl hover:bg-blue-700 transition">Register New Car</button>
      </form>

      <div className="bg-white border border-slate-200 rounded-2xl overflow-hidden shadow-sm">
        <table className="w-full text-left text-sm text-slate-600">
          <thead className="bg-slate-50 text-xs uppercase font-bold text-slate-500 border-b border-slate-200">
            <tr>
              <th className="p-4">Plate</th><th className="p-4">Model</th><th className="p-4">Driver</th><th className="p-4">Mechanic</th><th className="p-4 text-center">Action</th>
            </tr>
          </thead>
          <tbody className="divide-y divide-slate-100">
            {cars.map(c => (
              <tr key={c._id} className="hover:bg-slate-50">
                <td className="p-4 font-mono font-bold text-slate-900">{c.number}</td>
                <td className="p-4">{c.type} {c.model}</td>
                <td className="p-4">{c.driverName}</td>
                <td className="p-4">{c.mechanicName}</td>
                <td className="p-4 text-center">
                  <button onClick={() => deleteCar(c._id)} className="bg-rose-50 text-rose-600 px-3 py-1.5 rounded-lg text-xs font-semibold hover:bg-rose-100 transition">Remove</button>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}
