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

export default function Reports() {
  const [reportData, setReportData] = useState({ tablesServed: [], totalRevenue: 0 });

  useEffect(() => {
    const fetchDailyReport = async () => {
      const res = await axios.get('http://localhost:5000/api/reports/daily');
      setReportData(res.data);
    };
    fetchDailyReport();
  }, []);

  return (
    <div className="space-y-6">
      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div className="bg-gradient-to-br from-amber-500/20 to-amber-600/5 border border-amber-500/20 rounded-2xl p-6">
          <p className="text-sm font-medium text-slate-400 uppercase tracking-wider">Gross Daily Revenue</p>
          <h3 className="text-4xl font-black text-amber-400 mt-2">{reportData.totalRevenue.toLocaleString()} <span className="text-lg font-normal text-white">Rwf</span></h3>
        </div>
        <div className="bg-white/5 border border-white/10 rounded-2xl p-6">
          <p className="text-sm font-medium text-slate-400 uppercase tracking-wider">Tables Closed Today</p>
          <h3 className="text-4xl font-black text-white mt-2">{reportData.tablesServed.length}</h3>
        </div>
      </div>

      <div className="bg-white/5 border border-white/10 rounded-2xl p-6">
        <h3 className="text-lg font-bold text-white mb-4">Closing Statements</h3>
        {reportData.tablesServed.length === 0 ? (
          <p className="text-sm text-slate-400">No tables finalized today yet.</p>
        ) : (
          <div className="overflow-x-auto">
            <table className="w-full text-left text-sm text-slate-300">
              <thead className="bg-white/5 text-white">
                <tr>
                  <th className="p-3">Ref ID</th>
                  <th className="p-3">Table #</th>
                  <th className="p-3">Customer</th>
                  <th className="p-3">Assigned Hand</th>
                  <th className="p-3 text-right">Settled Amount</th>
                </tr>
              </thead>
              <tbody className="divide-y divide-white/5">
                {reportData.tablesServed.map(item => (
                  <tr key={item.PaymentID} className="hover:bg-white/5">
                    <td className="p-3 text-xs text-slate-500">#{item.PaymentID}</td>
                    <td className="p-3 font-medium text-white">Table {item.TableNumber}</td>
                    <td className="p-3">{item.CustomerName}</td>
                    <td className="p-3"><span className="text-xs font-semibold text-blue-400">{item.WaiterName}</span></td>
                    <td className="p-3 text-right font-bold text-emerald-400">{parseFloat(item.AmountPaid).toLocaleString()} Rwf</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}
      </div>
    </div>
  );
}