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

export default function Dashboard() {
  const [metrics, setMetrics] = useState({ revenue: 0, cars: 0, records: 0 });

  useEffect(() => {
    async function fetchData() {
      const [p, c, r] = await Promise.all([
        axios.get('http://localhost:5000/api/payment'),
        axios.get('http://localhost:5000/api/car'),
        axios.get('http://localhost:5000/api/servicerecord')
      ]);
      const totalRev = p.data.reduce((sum, item) => sum + item.amountPaid, 0);
      setMetrics({ revenue: totalRev, cars: c.data.length, records: r.data.length });
    }
    fetchData().catch(console.error);
  }, []);

  return (
    <div className="p-6 max-w-7xl mx-auto space-y-6">
      <h2 className="text-3xl font-extrabold text-slate-800">Operational Overview</h2>
      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
        <div className="bg-white p-6 rounded-2xl shadow-sm border border-slate-100 flex flex-col">
          <span className="text-sm font-semibold text-slate-400 uppercase tracking-wider">Total Collection</span>
          <span className="text-4xl font-black text-emerald-600 mt-2">{metrics.revenue.toLocaleString()} RWF</span>
        </div>
        <div className="bg-white p-6 rounded-2xl shadow-sm border border-slate-100 flex flex-col">
          <span className="text-sm font-semibold text-slate-400 uppercase tracking-wider">Registered Fleet</span>
          <span className="text-4xl font-black text-blue-600 mt-2">{metrics.cars} Vehicles</span>
        </div>
        <div className="bg-white p-6 rounded-2xl shadow-sm border border-slate-100 flex flex-col">
          <span className="text-sm font-semibold text-slate-400 uppercase tracking-wider">Active Services</span>
          <span className="text-4xl font-black text-amber-600 mt-2">{metrics.records} Jobs</span>
        </div>
      </div>
    </div>
  );
}
