import { Card } from "@/components/ui/card"
import { StockMetrics } from "@/components/overview/StockMetrics"
import { PurchaseMetrics } from "@/components/overview/PurchaseMetrics"
import { ReplenishmentMetrics } from "@/components/overview/ReplenishmentMetrics"
import { TopReplenishProducts } from "@/components/overview/TopReplenishProducts"
import { OverstockMetrics } from "@/components/overview/OverstockMetrics"
import { TopOverstockedProducts } from "@/components/overview/TopOverstockedProducts"
import { BestSellers } from "@/components/overview/BestSellers"
import { ForecastMetrics } from "@/components/overview/ForecastMetrics"
import { SalesMetrics } from "@/components/overview/SalesMetrics"
import { motion } from "motion/react"

export function Overview() {
  return (
    <motion.div layout className="flex-1 space-y-4 p-4 md:p-8 pt-6">
      <div className="flex items-center justify-between space-y-2">
        <h2 className="text-3xl font-bold tracking-tight">Overview</h2>
      </div>
      
      {/* First row - Stock and Purchase metrics */}
      <div className="grid gap-4 grid-cols-7">
        <Card className="col-span-4">
          <StockMetrics />
        </Card>
        <Card className="col-span-3">
          <PurchaseMetrics />
        </Card>
      </div>

      {/* Second row - Replenishment section */}
      <div className="grid gap-4 grid-cols-3">
        <Card className="col-span-2">
          <TopReplenishProducts />
        </Card>
        <div className="col-span-1 grid gap-4">
          <Card>
            <ReplenishmentMetrics />
          </Card>
          <Card>
            <ForecastMetrics />
          </Card>
        </div>
      </div>

      {/* Third row - Overstock section */}
      <div className="grid gap-4 grid-cols-3">
        <Card className="col-span-1">
          <OverstockMetrics />
        </Card>
        <Card className="col-span-2">
          <TopOverstockedProducts />
        </Card>
      </div>

      {/* Fourth row - Best Sellers and Sales */}
      <div className="grid gap-4 grid-cols-3">
        <Card className="col-span-2">
          <BestSellers />
        </Card>
        <Card className="col-span-1">
          <SalesMetrics />
        </Card>
      </div>
    </motion.div>
  )
}

export default Overview 