import { useQuery } from "@tanstack/react-query"
import { CardHeader, CardTitle, CardContent } from "@/components/ui/card"
import config from "@/config"
import { formatCurrency } from "@/lib/utils"
import { Package, Layers, DollarSign, ShoppingCart } from "lucide-react"

interface OverstockMetricsData {
  overstockedProducts: number
  total_excess_units: number
  total_excess_cost: number
  total_excess_retail: number
  category_data: {
    category: string
    products: number
    units: number
    cost: number
    retail: number
  }[]
}

export function OverstockMetrics() {
  const { data } = useQuery<OverstockMetricsData>({
    queryKey: ["overstock-metrics"],
    queryFn: async () => {
      const response = await fetch(`${config.apiUrl}/dashboard/overstock/metrics`)
      if (!response.ok) {
        throw new Error("Failed to fetch overstock metrics")
      }
      return response.json()
    },
  })

  return (
    <>
      <CardHeader>
        <CardTitle className="text-xl font-medium">Overstock</CardTitle>
      </CardHeader>
      <CardContent>
        <div className="flex flex-col gap-4">
          <div className="flex items-baseline justify-between">
            <div className="flex items-center gap-2">
              <Package className="h-4 w-4 text-muted-foreground" />
              <p className="text-sm font-medium text-muted-foreground">Overstocked Products</p>
            </div>
            <p className="text-lg font-bold">{data?.overstockedProducts.toLocaleString() || 0}</p>
          </div>
          <div className="flex items-baseline justify-between">
            <div className="flex items-center gap-2">
              <Layers className="h-4 w-4 text-muted-foreground" />
              <p className="text-sm font-medium text-muted-foreground">Overstocked Units</p>
            </div>
            <p className="text-lg font-bold">{data?.total_excess_units.toLocaleString() || 0}</p>
          </div>
          <div className="flex items-baseline justify-between">
            <div className="flex items-center gap-2">
              <DollarSign className="h-4 w-4 text-muted-foreground" />
              <p className="text-sm font-medium text-muted-foreground">Overstocked Cost</p>
            </div>
            <p className="text-lg font-bold">{formatCurrency(data?.total_excess_cost || 0)}</p>
          </div>
          <div className="flex items-baseline justify-between">
            <div className="flex items-center gap-2">
              <ShoppingCart className="h-4 w-4 text-muted-foreground" />
              <p className="text-sm font-medium text-muted-foreground">Overstocked Retail</p>
            </div>
            <p className="text-lg font-bold">{formatCurrency(data?.total_excess_retail || 0)}</p>
          </div>
        </div>
      </CardContent>
    </>
  )
} 