ember-market-frontend/components/analytics/AnalyticsDashboard.tsx

"use client"

import { useState, useEffect } from 'react';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { 
  TrendingUp, 
  ShoppingCart, 
  Users, 
  Package, 
  DollarSign, 
  BarChart3,
  PieChart,
  Activity,
  RefreshCw
} from "lucide-react";
import { clientFetch } from "@/lib/api";
import { useToast } from "@/hooks/use-toast";
import RevenueChart from "./RevenueChart";
import ProductPerformanceChart from "./ProductPerformanceChart";
import CustomerInsightsChart from "./CustomerInsightsChart";
import OrderAnalyticsChart from "./OrderAnalyticsChart";
import MetricsCard from "./MetricsCard";

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;
  };
}

interface AnalyticsDashboardProps {
  initialData: AnalyticsOverview;
}

export default function AnalyticsDashboard({ initialData }: AnalyticsDashboardProps) {
  const [data, setData] = useState<AnalyticsOverview>(initialData);
  const [isLoading, setIsLoading] = useState(false);
  const [timeRange, setTimeRange] = useState('30');
  const { toast } = useToast();

  const refreshData = async () => {
    try {
      setIsLoading(true);
      const newData = await clientFetch<AnalyticsOverview>("/analytics/overview");
      setData(newData);
      toast({
        title: "Data refreshed",
        description: "Analytics data has been updated successfully.",
      });
    } catch (error) {
      toast({
        title: "Error",
        description: "Failed to refresh analytics data.",
        variant: "destructive",
      });
    } finally {
      setIsLoading(false);
    }
  };

  const metrics = [
    {
      title: "Total Revenue",
      value: `$${data.revenue.total.toLocaleString()}`,
      description: "All-time revenue",
      icon: DollarSign,
      trend: data.revenue.monthly > 0 ? "up" : "neutral",
      trendValue: `$${data.revenue.monthly.toLocaleString()} this month`
    },
    {
      title: "Total Orders",
      value: data.orders.total.toLocaleString(),
      description: "All-time orders",
      icon: ShoppingCart,
      trend: data.orders.completed > 0 ? "up" : "neutral",
      trendValue: `${data.orders.completed} completed`
    },
    {
      title: "Unique Customers",
      value: data.customers.unique.toLocaleString(),
      description: "Total customers",
      icon: Users,
      trend: "neutral",
      trendValue: "Lifetime customers"
    },
    {
      title: "Products",
      value: data.products.total.toLocaleString(),
      description: "Active products",
      icon: Package,
      trend: "neutral",
      trendValue: "In your store"
    }
  ];

  return (
    <div className="space-y-6">
      {/* Header with refresh button */}
      <div className="flex items-center justify-between">
        <div>
          <h2 className="text-2xl font-semibold">Performance Overview</h2>
          <p className="text-muted-foreground">
            Key metrics and insights about your store performance
          </p>
        </div>
        <Button 
          onClick={refreshData} 
          disabled={isLoading}
          variant="outline"
          className="flex items-center gap-2"
        >
          <RefreshCw className={`h-4 w-4 ${isLoading ? 'animate-spin' : ''}`} />
          Refresh Data
        </Button>
      </div>

      {/* Key Metrics Cards */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        {metrics.map((metric) => (
          <MetricsCard key={metric.title} {...metric} />
        ))}
      </div>

      {/* Completion Rate Card */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Activity className="h-5 w-5" />
            Order Completion Rate
          </CardTitle>
          <CardDescription>
            Percentage of orders that have been successfully completed
          </CardDescription>
        </CardHeader>
        <CardContent>
          <div className="flex items-center gap-4">
            <div className="text-3xl font-bold">
              {data.orders.completionRate}%
            </div>
            <div className="flex-1">
              <div className="w-full bg-secondary rounded-full h-2">
                <div 
                  className="bg-primary h-2 rounded-full transition-all duration-300"
                  style={{ width: `${data.orders.completionRate}%` }}
                />
              </div>
            </div>
            <Badge variant="secondary">
              {data.orders.completed} / {data.orders.total}
            </Badge>
          </div>
        </CardContent>
      </Card>

      {/* Analytics Tabs */}
      <Tabs defaultValue="revenue" className="space-y-6">
        <TabsList className="grid w-full grid-cols-4">
          <TabsTrigger value="revenue" className="flex items-center gap-2">
            <TrendingUp className="h-4 w-4" />
            Revenue
          </TabsTrigger>
          <TabsTrigger value="products" className="flex items-center gap-2">
            <Package className="h-4 w-4" />
            Products
          </TabsTrigger>
          <TabsTrigger value="customers" className="flex items-center gap-2">
            <Users className="h-4 w-4" />
            Customers
          </TabsTrigger>
          <TabsTrigger value="orders" className="flex items-center gap-2">
            <BarChart3 className="h-4 w-4" />
            Orders
          </TabsTrigger>
        </TabsList>

        <TabsContent value="revenue" className="space-y-6">
          <div className="flex items-center justify-between">
            <div>
              <h3 className="text-lg font-semibold">Revenue Trends</h3>
              <p className="text-muted-foreground">
                Track your revenue performance over time
              </p>
            </div>
            <Select value={timeRange} onValueChange={setTimeRange}>
              <SelectTrigger className="w-32">
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="7">7 days</SelectItem>
                <SelectItem value="30">30 days</SelectItem>
                <SelectItem value="90">90 days</SelectItem>
              </SelectContent>
            </Select>
          </div>
          <RevenueChart timeRange={timeRange} />
        </TabsContent>

        <TabsContent value="products" className="space-y-6">
          <div>
            <h3 className="text-lg font-semibold">Product Performance</h3>
            <p className="text-muted-foreground">
              Analyze which products are performing best
            </p>
          </div>
          <ProductPerformanceChart />
        </TabsContent>

        <TabsContent value="customers" className="space-y-6">
          <div>
            <h3 className="text-lg font-semibold">Customer Insights</h3>
            <p className="text-muted-foreground">
              Understand your customer base and behavior
            </p>
          </div>
          <CustomerInsightsChart />
        </TabsContent>

        <TabsContent value="orders" className="space-y-6">
          <div>
            <h3 className="text-lg font-semibold">Order Analytics</h3>
            <p className="text-muted-foreground">
              Detailed analysis of order patterns and status distribution
            </p>
          </div>
          <OrderAnalyticsChart timeRange={timeRange} />
        </TabsContent>
      </Tabs>
    </div>
  );
}