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

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

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

  useEffect(() => {
    axios
      .get('http://localhost:5001/api/reports/summary', { headers })
      .then((res) => setReport(res.data))
      .catch((err) => {
        console.error(err);
        setError('Failed to load reports');
      });
  }, []);

  return (
    <div className="page-content">
      <h1 className="page-title">Reports</h1>
      <p className="page-subtitle">Summary of your supply chain activity</p>

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

      {!report ? (
        <p className="text-sm text-muted">Loading report summary...</p>
      ) : (
        <>
          <div className="grid gap-4 md:grid-cols-3 mb-6">
            <div className="stat-card">
              <h2>Suppliers</h2>
              <p>Total: {report.suppliers.total}</p>
              <p>Daily: {report.suppliers.daily}</p>
              <p>Weekly: {report.suppliers.weekly}</p>
              <p>Monthly: {report.suppliers.monthly}</p>
            </div>
            <div className="stat-card">
              <h2>Shipments</h2>
              <p>Total: {report.shipments.total}</p>
              <p>Daily: {report.shipments.daily}</p>
              <p>Weekly: {report.shipments.weekly}</p>
              <p>Monthly: {report.shipments.monthly}</p>
            </div>
            <div className="stat-card">
              <h2>Deliveries</h2>
              <p>Total: {report.deliveries.total}</p>
              <p>Daily: {report.deliveries.daily}</p>
              <p>Weekly: {report.deliveries.weekly}</p>
              <p>Monthly: {report.deliveries.monthly}</p>
            </div>
          </div>

          <div className="grid gap-4 md:grid-cols-2">
            <div className="stat-card">
              <h2>Recent Shipments</h2>
              {report.recentShipments.length === 0 ? (
                <p className="text-sm text-muted">No recent shipments.</p>
              ) : (
                report.recentShipments.map((shipment) => (
                  <div key={shipment._id} className="mb-3 pb-3 border-b border-slate-100 last:border-0 last:mb-0 last:pb-0">
                    <p className="text-sm font-medium text-brand-800">{shipment.shipmentNumber}</p>
                    <p className="text-sm text-muted">Destination: {shipment.destination}</p>
                    <p className="text-sm text-muted">Status: {shipment.shipmentStatus}</p>
                  </div>
                ))
              )}
            </div>

            <div className="stat-card">
              <h2>Recent Deliveries</h2>
              {report.recentDeliveries.length === 0 ? (
                <p className="text-sm text-muted">No recent deliveries.</p>
              ) : (
                report.recentDeliveries.map((delivery) => (
                  <div key={delivery._id} className="mb-3 pb-3 border-b border-slate-100 last:border-0 last:mb-0 last:pb-0">
                    <p className="text-sm font-medium text-brand-800">{delivery.deliveryCode}</p>
                    <p className="text-sm text-muted">Quantity: {delivery.quantityDelivered}</p>
                    <p className="text-sm text-muted">Status: {delivery.deliveryStatus}</p>
                  </div>
                ))
              )}
            </div>
          </div>
        </>
      )}
    </div>
  );
}

export default Reports;
