import { Loader2 } from "lucide-react"
import { useDashboardStats } from "./hooks"
import {
  EnabledFeaturesCard,
  GettingStartedCard,
  HowToCard,
  BlogPostsCard,
  WooCommerceNotice,
} from "./components"

export function Dashboard() {
  const { stats, loading } = useDashboardStats()

  if (loading) {
    return (
      <div className="flex flex-1 items-center justify-center p-6">
        <div className="text-center">
          <Loader2 className="h-8 w-8 animate-spin mx-auto text-primary" />
          <p className="mt-4 text-sm text-muted-foreground">Loading dashboard...</p>
        </div>
      </div>
    )
  }

  return (
    <div className="flex flex-1 flex-col gap-6 p-6">
      {/* WooCommerce Requirement Notice */}
      <WooCommerceNotice />

      {/* Welcome Header */}
      <div className="text-left">
        <h1 className="text-2xl font-bold tracking-tight">Welcome to Swift Commerce</h1>
        <p className="text-muted-foreground mt-1">
          Supercharge your WooCommerce store with powerful features. Let's get started!
        </p>
      </div>

      {/* Main Content Grid - 3 columns */}
      <div className="grid gap-6 lg:grid-cols-3">
        {/* Column 1 - Getting Started + Latest Blog Posts */}
        <div className="space-y-6">
          <GettingStartedCard />
          <BlogPostsCard />
        </div>

        {/* Column 2 - How To */}
        <div className="space-y-6">
          <HowToCard />
        </div>

        {/* Column 3 - Enabled Features */}
        <div className="space-y-6">
          <EnabledFeaturesCard 
            features={stats.features}
            enabledCount={stats.enabledFeatures}
            totalCount={stats.totalFeatures}
          />
        </div>
      </div>
    </div>
  )
}