import {
  RiBox3Line,
  RiStackLine,
  RiMoneyDollarCircleLine,
} from "@remixicon/react";
import { StatCard } from "./stat-card";
import {
  formatCurrency,
  formatNumber,
  computeProfit,
  computeTotalSales,
} from "../lib/format-utils";
import type { InventoryProduct } from "../types";
import { useMemo } from "react";

interface SummaryCardsProps {
  products: InventoryProduct[];
}

export function SummaryCards({ products }: SummaryCardsProps) {
  const stats = useMemo(() => {
    const totalProducts = products.length;
    const totalStock = products.reduce((sum, p) => sum + p.stock, 0);
    const totalSales = products.reduce(
      (sum, p) => sum + computeTotalSales(p),
      0,
    );
    const totalProfit = products.reduce((sum, p) => sum + computeProfit(p), 0);

    // For demo purposes, we use fixed comparison percentages.
    // In a real app, these would come from comparing to the previous period.
    return {
      totalProducts,
      totalStock,
      totalSales,
      totalProfit,
    };
  }, [products]);

  return (
    <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
      <StatCard
        title="Total Products"
        value={formatNumber(stats.totalProducts)}
        change="+4.2%"
        changeType="positive"
        icon={RiBox3Line}
      />
      <StatCard
        title="Total Stock"
        value={formatNumber(stats.totalStock)}
        change="+2.1%"
        changeType="positive"
        icon={RiStackLine}
      />
      <StatCard
        title="Total Sales"
        value={formatCurrency(stats.totalSales)}
        change="+12.5%"
        changeType="positive"
        icon={RiMoneyDollarCircleLine}
      />
      <StatCard
        title="Total Profit"
        value={formatCurrency(stats.totalProfit)}
        change="+8.4%"
        changeType="positive"
      />
    </div>
  );
}