import React from 'react';

function ReportPage({ reportData }) {
  if (!reportData) return <div className="text-slate-500 text-center">Loading current financial logs view...</div>;

  return (
    <div className="space-y-6">
      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div className="glass-panel p-6 rounded-2xl border border-slate-800">
          <h3 className="text-xs font-semibold text-slate-400 uppercase mb-1">Shift Execution Date</h3>
          <div className="text-2xl font-black">{reportData.date}</div>
        </div>
        <div className="glass-panel p-6 rounded-2xl border border-slate-800">
          <h3 className="text-xs font-semibold text-slate-400 uppercase mb-1">Total Verified Revenue Generated</h3>
          <div className="text-2xl font-black text-emerald-400">{parseFloat(reportData.totalRevenue).toLocaleString()} RWF</div>
        </div>
      </div>

      <div className="glass-panel p-6 rounded-2xl border border-slate-800">
        <h3 className="text-lg font-bold mb-4">Settled Table Logs Overview</h3>
        <div className="space-y-2">
          {reportData.tablesServed.map((t, idx) => (
            <div key={idx} className="p-3 bg-slate-900/50 border border-slate-800 rounded-xl flex justify-between text-sm">
              <span>Table {t.TableNumber} - Lead: {t.CustomerName} (Staff: {t.WaiterName})</span>
              <span className="font-bold text-emerald-400">+{parseFloat(t.AmountPaid).toLocaleString()} RWF</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

export default ReportPage;