import { useState } from "react";
import api from "../services/api";

function ReportsPage() {
  const [date, setDate] = useState("");
  const [report, setReport] = useState(null);

  const loadReport = async (e) => {
    e.preventDefault();
    const { data } = await api.get(`/payments/reports/daily?date=${date}`);
    setReport(data);
  };

  return (
    <section className="rounded-xl bg-white p-5 shadow">
      <h2 className="mb-4 text-xl font-bold text-slate-800">Daily Report</h2>
      <form onSubmit={loadReport} className="mb-4 flex flex-wrap gap-2">
        <input type="date" className="rounded border px-3 py-2" value={date} onChange={(e) => setDate(e.target.value)} required />
        <button className="rounded bg-cyan-700 px-4 py-2 text-white">Generate</button>
      </form>
      {report ? (
        <div>
          <p className="mb-2 font-semibold">Total Paid: {report.totalAmountPaid} RWF</p>
          <div className="space-y-2 text-sm">
            {report.rows.map((row, idx) => (
              <div key={`${row.plateNumber}-${idx}`} className="rounded border p-2">
                {row.plateNumber} | {row.serviceName} | {row.amountPaid} RWF
              </div>
            ))}
          </div>
        </div>
      ) : null}
    </section>
  );
}

export default ReportsPage;
