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, DollarSign, ShoppingCart } from "lucide-react" // Importing icons

interface ReplenishmentMetricsData {
  productsToReplenish: number
  unitsToReplenish: number
  replenishmentCost: number
  replenishmentRetail: number
  topVariants: {
    id: number
    title: string
    currentStock: number
    replenishQty: number
    replenishCost: number
    replenishRetail: number
    status: string
    planningPeriod: string
  }[]
}

export function ReplenishmentMetrics() {
  const { data, error, isLoading } = useQuery<ReplenishmentMetricsData>({
    queryKey: ["replenishment-metrics"],
    queryFn: async () => {
      const response = await fetch(`${config.apiUrl}/dashboard/replenishment/metrics`)
      if (!response.ok) {
        const text = await response.text();
        console.error('API Error:', text);
        throw new Error(`Failed to fetch replenishment metrics: ${response.status} ${response.statusText} - ${text}`)
      }
      const data = await response.json();
      return data;
    },
  })

  if (isLoading) return <div className="p-8 text-center">Loading replenishment metrics...</div>;
  if (error) return <div className="p-8 text-center text-red-500">Error: {error.message}</div>;
  if (!data) return <div className="p-8 text-center">No replenishment data available</div>;

  return (
    <>
      <CardHeader>
        <CardTitle className="text-xl font-medium">Replenishment</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">Units to Replenish</p>
            </div>
            <p className="text-lg font-bold">{data.unitsToReplenish.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">Replenishment Cost</p>
            </div>
            <p className="text-lg font-bold">{formatCurrency(data.replenishmentCost || 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">Replenishment Retail</p>
            </div>
            <p className="text-lg font-bold">{formatCurrency(data.replenishmentRetail || 0)}</p>
          </div>
        </div>
      </CardContent>
    </>
  )
} 