import { useEffect, useState } from "react";
import { Database, RefreshCw } from "lucide-react";
import { getVehicles } from "../services/api";

export default function VehicleTable() {
  const [vehicles, setVehicles] = useState([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState("");

  async function fetchVehicles() {
    setLoading(true);
    setError("");
    try {
      const res = await getVehicles();
      if (res.success) {
        setVehicles(res.data || []);
      } else {
        setError(res.message || "Gagal memuat data");
      }
    } catch {
      setError("Backend belum aktif atau endpoint tidak tersedia.");
    } finally {
      setLoading(false);
    }
  }

  useEffect(() => {
    fetchVehicles();
  }, []);

  return (
    <div className="bg-white border border-slate-200 rounded-2xl shadow-sm overflow-hidden">
      <div className="p-4 border-b border-slate-100 flex items-center justify-between">
        <div className="flex items-center gap-2">
          <Database className="w-4 h-4 text-blue-600" />
          <h3 className="font-semibold text-slate-800 text-sm">Database Kendaraan</h3>
        </div>
        <button
          onClick={fetchVehicles}
          disabled={loading}
          className="text-slate-400 hover:text-blue-600 transition-colors cursor-pointer disabled:opacity-50"
        >
          <RefreshCw className={`w-4 h-4 ${loading ? "animate-spin" : ""}`} />
        </button>
      </div>

      {error && (
        <div className="px-4 py-3 text-sm text-red-600 bg-red-50">
          {error}
        </div>
      )}

      {loading ? (
        <div className="px-4 py-8 text-center text-sm text-slate-400">
          Memuat data...
        </div>
      ) : vehicles.length === 0 ? (
        <div className="px-4 py-8 text-center text-sm text-slate-400">
          Belum ada data kendaraan.
        </div>
      ) : (
        <div className="overflow-x-auto">
          <table className="w-full text-sm">
            <thead>
              <tr className="bg-slate-50 text-slate-500">
                <th className="px-4 py-2.5 text-left font-medium">No</th>
                <th className="px-4 py-2.5 text-left font-medium">Plat</th>
                <th className="px-4 py-2.5 text-left font-medium">Pemilik</th>
                <th className="px-4 py-2.5 text-left font-medium">Jenis</th>
                <th className="px-4 py-2.5 text-left font-medium">Keterangan</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-slate-100">
              {vehicles.map((v, i) => (
                <tr key={i} className="hover:bg-slate-50 transition-colors">
                  <td className="px-4 py-2.5 text-slate-400">{i + 1}</td>
                  <td className="px-4 py-2.5 font-mono font-medium text-slate-800">
                    {v.plat}
                  </td>
                  <td className="px-4 py-2.5 text-slate-700">{v.nama_pemilik}</td>
                  <td className="px-4 py-2.5 text-slate-600">{v.jenis_kendaraan}</td>
                  <td className="px-4 py-2.5 text-slate-500">{v.keterangan}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}
    </div>
  );
}