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

function Reports() {
  const [summary, setSummary] = useState(null);
  const [error, setError] = useState('');

  const headers = {
    Authorization: `Bearer ${localStorage.getItem('token')}`,
  };

  const fetchSummary = async () => {
    try {
      const res = await axios.get('http://localhost:5001/api/reports/summary', { headers });
      setSummary(res.data);
    } catch (err) {
      console.error(err);
      setError('Failed to load report data');
    }
  };

  useEffect(() => {
    fetchSummary();
  }, []);

  return (
    <div className="max-w-3xl">
      <h1 className="text-xl font-semibold text-brand-900 mb-1">Reports</h1>
      <p className="text-sm text-slate-500 mb-6">Summary of your sales records.</p>

      {error && <p className="alert-error mb-4">{error}</p>}

      {!summary ? (
        <p className="text-sm text-slate-500">Loading report summary...</p>
      ) : (
        <>
          <div className="grid gap-3 sm:grid-cols-3 mb-6">
            <div className="card p-4">
              <p className="text-xs text-slate-500 uppercase tracking-wide">Customers</p>
              <p className="text-2xl font-semibold text-brand-900 mt-1">{summary.customerCount}</p>
            </div>
            <div className="card p-4">
              <p className="text-xs text-slate-500 uppercase tracking-wide">Products</p>
              <p className="text-2xl font-semibold text-brand-900 mt-1">{summary.productCount}</p>
            </div>
            <div className="card p-4">
              <p className="text-xs text-slate-500 uppercase tracking-wide">Sales</p>
              <p className="text-2xl font-semibold text-brand-900 mt-1">{summary.salesCount}</p>
            </div>
          </div>

          <div className="grid gap-3 sm:grid-cols-3">
            <div className="card p-4">
              <p className="text-xs text-slate-500 uppercase tracking-wide">Daily</p>
              <p className="text-lg font-semibold text-brand-900 mt-1">
                RWF {summary.dailySalesTotal.toFixed(2)}
              </p>
              <p className="text-xs text-slate-500 mt-1">{summary.dailySalesCount} transactions</p>
            </div>
            <div className="card p-4">
              <p className="text-xs text-slate-500 uppercase tracking-wide">Weekly</p>
              <p className="text-lg font-semibold text-brand-900 mt-1">
                RWF {summary.weeklySalesTotal.toFixed(2)}
              </p>
              <p className="text-xs text-slate-500 mt-1">{summary.weeklySalesCount} transactions</p>
            </div>
            <div className="card p-4">
              <p className="text-xs text-slate-500 uppercase tracking-wide">Monthly</p>
              <p className="text-lg font-semibold text-brand-900 mt-1">
                RWF {summary.monthlySalesTotal.toFixed(2)}
              </p>
              <p className="text-xs text-slate-500 mt-1">{summary.monthlySalesCount} transactions</p>
            </div>
          </div>
        </>
      )}
    </div>
  );
}

export default Reports;
