import AnalyticsDashboard from "@/components/analytics/AnalyticsDashboard";
import { fetchServer } from '@/lib/api';

interface AnalyticsOverview {
  orders: {
    total: number;
    completed: number;
    pending: number;
    completionRate: string;
  };
  revenue: {
    total: number;
    monthly: number;
    weekly: number;
    averageOrderValue: number;
  };
  products: {
    total: number;
  };
  customers: {
    unique: number;
  };
}

export default async function AnalyticsPage() {
  const analyticsData = await fetchServer<AnalyticsOverview>("/analytics/overview");

  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-3xl font-bold text-foreground">Analytics Dashboard</h1>
        <p className="text-muted-foreground mt-2">
          Comprehensive insights into your store performance, sales trends, and customer behavior.
        </p>
      </div>
      
      <AnalyticsDashboard initialData={analyticsData} />
    </div>
  );
}