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

export default function Reports() {
  const [records, setRecords] = useState([]);

  useEffect(() => {
    axios.get('http://localhost:5000/api/payment')
      .then(res => setRecords(res.data))
      .catch(console.error);
  }, []);

  return (
    <div className="p-6 max-w-7xl mx-auto space-y-6">
      <h2 className="text-2xl font-black text-slate-800">Financial Ledger Reports</h2>
      <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 font-bold text-slate-500 uppercase border-b border-slate-200">
            <tr>
              <th className="p-4">Receipt #</th>
              <th className="p-4">Target Car</th>
              <th className="p-4">Action Taken</th>
              <th className="p-4 text-right">Cleared Cost</th>
            </tr>
          </thead>
          <tbody className="divide-y divide-slate-100">
            {records.map(r => (
              <tr key={r._id} className="hover:bg-slate-50">
                <td className="p-4 font-mono font-bold text-slate-900">{r.paymentNumber}</td>
                <td className="p-4 font-semibold text-slate-700">{r.serviceRecord?.car?.number || 'N/A'}</td>
                <td className="p-4">{r.serviceRecord?.service?.serviceName || 'N/A'}</td>
                <td className="p-4 text-right font-bold text-slate-900">{r.amountPaid?.toLocaleString()} RWF</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}
