import React, { useEffect, useState } from "react";
import { getReports } from "../api/api";

export default function Reports() {
  const [reports, setReports] = useState({});

  useEffect(() => {
    getReports()
      .then((res) => setReports(res.data))
      .catch((err) => console.log(err));
  }, []);

  return (
    <div>
      <h1 className="text-xl font-bold text-gray-800 mb-4 hover:text-olive-600 cursor-pointer">Reports</h1>

      <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-6">
        <div className="bg-white border border-gray-200 rounded-lg p-4">
          <h2 className="text-sm font-semibold text-gray-600 mb-2 hover:text-olive-600 cursor-pointer">Daily</h2>
          <p className="text-sm">Stock In: <span className="font-bold">{reports.dailyStockIn?.length || 0}</span></p>
          <p className="text-sm">Stock Out: <span className="font-bold">{reports.dailyStockOut?.length || 0}</span></p>
        </div>
        <div className="bg-white border border-gray-200 rounded-lg p-4">
          <h2 className="text-sm font-semibold text-gray-600 mb-2 hover:text-olive-600 cursor-pointer">Weekly</h2>
          <p className="text-sm">Stock In: <span className="font-bold">{reports.weeklyStockIn?.length || 0}</span></p>
          <p className="text-sm">Stock Out: <span className="font-bold">{reports.weeklyStockOut?.length || 0}</span></p>
        </div>
        <div className="bg-white border border-gray-200 rounded-lg p-4">
          <h2 className="text-sm font-semibold text-gray-600 mb-2 hover:text-olive-600 cursor-pointer">Monthly</h2>
          <p className="text-sm">Stock In: <span className="font-bold">{reports.monthlyStockIn?.length || 0}</span></p>
          <p className="text-sm">Stock Out: <span className="font-bold">{reports.monthlyStockOut?.length || 0}</span></p>
        </div>
      </div>

      <div className="bg-white border border-gray-200 rounded-lg p-4">
        <h2 className="text-sm font-semibold text-gray-600 mb-3 hover:text-olive-600 cursor-pointer">Available Stock</h2>
        <table className="w-full text-sm">
          <thead>
            <tr className="border-b border-gray-200">
              <th className="text-left py-2 pr-4 font-medium text-gray-500">Product</th>
              <th className="text-left py-2 pr-4 font-medium text-gray-500">Category</th>
              <th className="text-left py-2 pr-4 font-medium text-gray-500">Quantity</th>
              <th className="text-left py-2 font-medium text-gray-500">Price</th>
            </tr>
          </thead>
          <tbody>
            {reports.availableStock?.map((p) => (
              <tr key={p._id} className="border-b border-gray-100">
                <td className="py-2 pr-4">{p.ProductName}</td>
                <td className="py-2 pr-4 text-gray-600">{p.Category}</td>
                <td className="py-2 pr-4">{p.QuantityInStock}</td>
                <td className="py-2">{p.UnitPrice}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}
