"use client";

import { useEffect, useState } from "react";
import {
  Users,
  ShoppingBag,
  Package,
  Tag,
  DollarSign,
  ArrowUpRight,
  TrendingUp,
  CreditCard,
  ChevronRight,
  ChevronDown,
  ChevronUp,
  Calendar,
  Clock,
  ArrowRight,
  AlertCircle,
  CheckCircle2,
  Truck,
  BarChart3,
  Filter,
  XCircle,
} from "lucide-react";
import Image from "next/image";
import { $fetch } from "@/lib/api";
import { Link } from "@/i18n/routing";
import { useTranslations } from "next-intl";
import { PAGE_PADDING } from "@/app/[locale]/(dashboard)/theme-config";
import { StatsCard, statsCardColors } from "@/components/ui/card/stats-card";

interface DashboardData {
  totalRevenue: number;
  totalOrders: number;
  averageOrderValue: number;
  totalUnitsSold: number;
  newCustomers: number;
  revenueChange?: number;
  ordersChange?: number;
  averageOrderChange?: number;
  unitsSoldChange?: number;
  newCustomersChange?: number;
  revenueChartData?: number[];
  orderValueChartData?: number[];
  unitsSoldChartData?: number[];
  customersChartData?: number[];
  revenueByStatus: Record<string, number>;
  revenueByDay: Record<string, number>;
  ordersByProductType: Record<string, number>;
  topProducts: any[];
  chartData: {
    labels: string[];
    datasets: Array<{
      label: string;
      data: number[];
      borderColor?: string;
      backgroundColor?: string;
    }>;
  };
  recentOrders: any[];
  pendingOrders: number;
  outOfStockCount: number;
  rejectedOrders: number;
  completedOrders: number;
}
export default function DashboardClient() {
  const t = useTranslations("ext_admin");
  const tCommon = useTranslations("common");
  const tExt = useTranslations("ext");
  const [dashboardData, setDashboardData] = useState<DashboardData | null>(
    null
  );
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [timeRange, setTimeRange] = useState("week");
  const [activeChartType, setActiveChartType] = useState("revenue");
  const fetchDashboardData = async () => {
    try {
      setError(null);

      // Calculate date range based on timeRange
      const endDate = new Date();
      const startDate = new Date();
      if (timeRange === "week") {
        startDate.setDate(endDate.getDate() - 7);
      } else if (timeRange === "month") {
        startDate.setDate(endDate.getDate() - 30);
      } else if (timeRange === "year") {
        startDate.setFullYear(endDate.getFullYear() - 1);
      }

      // Fetch all dashboard data from single endpoint
      const { data, error: fetchError } = await $fetch({
        url: `/api/admin/ecommerce/dashboard?startDate=${startDate.toISOString()}&endDate=${endDate.toISOString()}&chartType=${activeChartType}`,
        silentSuccess: true,
      });
      if (fetchError) {
        throw new Error(fetchError || "Failed to fetch dashboard data");
      }
      if (data) {
        setDashboardData(data);
      } else {
        throw new Error("No data received from API");
      }
    } catch (err) {
      console.error("Error fetching dashboard data:", err);
      setError(
        err instanceof Error ? err.message : "Failed to load dashboard data"
      );
    }
  };
  useEffect(() => {
    const loadData = async () => {
      setIsLoading(true);
      await fetchDashboardData();
      setIsLoading(false);
    };
    loadData();
  }, [timeRange, activeChartType]);
  if (error) {
    return (
      <div className="space-y-6">
        <div className="flex flex-col items-center justify-center h-64 bg-white dark:bg-zinc-900/50 rounded-lg border border-gray-200 dark:border-zinc-800">
          <AlertCircle className="h-12 w-12 text-red-500 mb-4" />
          <h2 className="text-lg font-medium text-gray-900 dark:text-white mb-2">
            {tExt("failed_to_load_dashboard")}
          </h2>
          <p className="text-gray-500 dark:text-gray-400 text-center mb-4">
            {error}
          </p>
        </div>
      </div>
    );
  }
  const stats = dashboardData;
  const chartData = dashboardData?.chartData;
  const topSellingProducts = dashboardData?.topProducts || [];
  const recentOrders = dashboardData?.recentOrders || [];
  return (
    <div className={`container ${PAGE_PADDING} space-y-6`}>
      {/* Header with refresh button and date range selector */}
      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between bg-white dark:bg-zinc-900/50 p-4 rounded-lg border border-gray-200 dark:border-zinc-800">
        <div>
          <h1 className="text-xl font-bold text-gray-900 dark:text-white">
            {tCommon("dashboard")}
          </h1>
          <p className="mt-1 text-sm text-gray-500 dark:text-gray-400 flex items-center">
            <Calendar className="h-4 w-4 mr-1" />
            {new Date().toLocaleDateString("en-US", {
              weekday: "long",
              year: "numeric",
              month: "long",
              day: "numeric",
            })}
            <span className="mx-2">•</span>
            <Clock className="h-4 w-4 mr-1" />
            {new Date().toLocaleTimeString("en-US", {
              hour: "2-digit",
              minute: "2-digit",
            })}
          </p>
        </div>
        <div className="mt-4 sm:mt-0 flex flex-wrap items-center gap-2">
          <select
            value={timeRange}
            onChange={(e) => setTimeRange(e.target.value)}
            className="block pl-3 pr-10 py-1.5 text-sm border-gray-300 dark:border-zinc-600 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 rounded-md bg-white dark:bg-zinc-700 text-gray-900 dark:text-white"
          >
            <option value="week">{tCommon("last_7_days")}</option>
            <option value="month">{tCommon("last_30_days")}</option>
            <option value="year">{t("last_12_months")}</option>
          </select>
        </div>
      </div>

      {/* Key metrics */}
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
        <StatsCard
          label={t("total_revenue")}
          value={`$${stats?.totalRevenue?.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 }) || "0.00"}`}
          icon={DollarSign}
          index={0}
          change={stats?.revenueChange ? `${stats.revenueChange > 0 ? "+" : ""}${stats.revenueChange.toFixed(1)}%` : undefined}
          description={`From ${stats?.totalOrders || 0} orders`}
          sparklineData={stats?.revenueChartData}
          {...statsCardColors.green}
        />
        <StatsCard
          label={t("average_order")}
          value={`$${stats?.averageOrderValue?.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 }) || "0.00"}`}
          icon={ShoppingBag}
          index={1}
          change={stats?.averageOrderChange ? `${stats.averageOrderChange > 0 ? "+" : ""}${stats.averageOrderChange.toFixed(1)}%` : undefined}
          description={t("per_order")}
          sparklineData={stats?.orderValueChartData}
          {...statsCardColors.blue}
        />
        <StatsCard
          label={t("products_sold")}
          value={stats?.totalUnitsSold?.toLocaleString() || "0"}
          icon={Package}
          index={2}
          change={stats?.unitsSoldChange ? `${stats.unitsSoldChange > 0 ? "+" : ""}${stats.unitsSoldChange.toFixed(1)}%` : undefined}
          description={t("total_units")}
          sparklineData={stats?.unitsSoldChartData}
          {...statsCardColors.purple}
        />
        <StatsCard
          label={t("new_customers")}
          value={stats?.newCustomers?.toLocaleString() || "0"}
          icon={Users}
          index={3}
          change={stats?.newCustomersChange ? `${stats.newCustomersChange > 0 ? "+" : ""}${stats.newCustomersChange.toFixed(1)}%` : undefined}
          description={t("first_time_buyers")}
          sparklineData={stats?.customersChartData}
          {...statsCardColors.amber}
        />
      </div>

      {/* Sales chart */}
      <div className="bg-white dark:bg-zinc-900/50 rounded-lg border border-gray-200 dark:border-zinc-800 overflow-hidden">
        <div className="p-4 sm:p-6">
          <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between mb-4">
            <h2 className="text-lg font-medium text-gray-900 dark:text-white flex items-center">
              <TrendingUp className="h-5 w-5 mr-2 text-gray-500 dark:text-gray-400" />
              {t("sales_overview")}
            </h2>
            <div className="mt-3 sm:mt-0 flex flex-wrap items-center gap-2">
              <div className="flex p-1 bg-gray-100 dark:bg-zinc-700 rounded-md">
                <button
                  onClick={() => setActiveChartType("revenue")}
                  className={`px-3 py-1 text-xs font-medium rounded-md ${activeChartType === "revenue" ? "bg-white dark:bg-zinc-600 text-indigo-600 dark:text-indigo-400 shadow-sm" : "text-gray-500 dark:text-gray-400"}`}
                >
                  {t("revenue")}
                </button>
                <button
                  onClick={() => setActiveChartType("orders")}
                  className={`px-3 py-1 text-xs font-medium rounded-md ${activeChartType === "orders" ? "bg-white dark:bg-zinc-600 text-indigo-600 dark:text-indigo-400 shadow-sm" : "text-gray-500 dark:text-gray-400"}`}
                >
                  {tCommon("orders")}
                </button>
                <button
                  onClick={() => setActiveChartType("customers")}
                  className={`px-3 py-1 text-xs font-medium rounded-md ${activeChartType === "customers" ? "bg-white dark:bg-zinc-600 text-indigo-600 dark:text-indigo-400 shadow-sm" : "text-gray-500 dark:text-gray-400"}`}
                >
                  {t("customers")}
                </button>
              </div>
              <button className="p-1.5 text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white rounded-md hover:bg-gray-100 dark:hover:bg-zinc-700">
                <Filter className="h-4 w-4" />
              </button>
            </div>
          </div>

          {isLoading ? (
            <div className="h-64 flex items-center justify-center">
              <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-indigo-600 dark:border-indigo-400"></div>
            </div>
          ) : (
            <div className="h-64 relative">
              {chartData && chartData.labels && chartData.datasets ? (
                <div className="absolute inset-0 flex items-center justify-center">
                  <div className="w-full h-full px-5 pt-5">
                    <div className="relative h-full">
                      {/* Render actual chart data */}
                      <div className="absolute bottom-0 left-0 right-0 flex items-end justify-between h-[90%]">
                        {chartData.labels.map((label, i) => {
                          // Calculate height as percentage of max value
                          const maxValue = Math.max(
                            ...chartData.datasets[0].data
                          );
                          const value = chartData.datasets[0].data[i];
                          const height =
                            maxValue > 0 ? (value / maxValue) * 100 : 0;
                          return (
                            <div key={i} className="w-1/12 px-1 group relative">
                              <div
                                className="bg-gradient-to-t from-indigo-600 to-indigo-400 dark:from-indigo-500 dark:to-indigo-300 rounded-t-md group-hover:from-indigo-700 group-hover:to-indigo-500 dark:group-hover:from-indigo-600 dark:group-hover:to-indigo-400 transition-all duration-200"
                                style={{
                                  height: `${height}%`,
                                }}
                              ></div>
                              {/* Tooltip */}
                              <div className="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 px-2 py-1 bg-gray-800 text-white text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity duration-200 whitespace-nowrap pointer-events-none">
                                {activeChartType === "revenue" ? "$" : ""}
                                {value.toLocaleString()}
                                {activeChartType === "orders" ||
                                activeChartType === "customers"
                                  ? " units"
                                  : ""}
                              </div>
                            </div>
                          );
                        })}
                      </div>
                      {/* X-axis labels */}
                      <div className="absolute bottom-[-20px] left-0 right-0 flex justify-between">
                        {chartData.labels.map((label, i) => (
                          <div
                            key={i}
                            className="text-xs text-gray-500 dark:text-gray-400 truncate px-1 text-center"
                          >
                            {label}
                          </div>
                        ))}
                      </div>
                    </div>
                  </div>
                </div>
              ) : (
                <div className="flex items-center justify-center h-full">
                  <div className="text-center">
                    <AlertCircle className="h-8 w-8 text-gray-400 dark:text-gray-500 mx-auto mb-2" />
                    <p className="text-gray-500 dark:text-gray-400">
                      {tCommon("no_chart_data_available")}
                    </p>
                  </div>
                </div>
              )}
            </div>
          )}

          {/* Stats below chart */}
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mt-6 pt-6 border-t border-gray-200 dark:border-zinc-700">
            <div className="flex items-center p-3 bg-gray-50 dark:bg-zinc-700/50 rounded-lg">
              <div className="p-2 rounded-full bg-green-100 dark:bg-green-900/20">
                <CreditCard className="h-5 w-5 text-green-600 dark:text-green-400" />
              </div>
              <div className="ml-3">
                <p className="text-xs font-medium text-gray-500 dark:text-gray-400">
                  {tExt("total_sales")}
                </p>
                <p className="text-base font-semibold text-gray-900 dark:text-white">
                  ${stats?.totalRevenue?.toLocaleString("en-US", {
                    minimumFractionDigits: 2,
                  }) || "0.00"}
                </p>
                {stats?.revenueChange !== null &&
                  stats?.revenueChange !== undefined &&
                  stats?.revenueChange !== 0 && (
                    <p
                      className={`text-xs flex items-center ${stats.revenueChange > 0 ? "text-green-600 dark:text-green-400" : "text-red-600 dark:text-red-400"}`}
                    >
                      <ArrowUpRight className="h-3 w-3 mr-1" />
                      {stats.revenueChange > 0 ? "+" : ""}
                      {stats.revenueChange.toFixed(1)}% {t("from_last_period")}
                    </p>
                  )}
              </div>
            </div>
            <div className="flex items-center p-3 bg-gray-50 dark:bg-zinc-700/50 rounded-lg">
              <div className="p-2 rounded-full bg-blue-100 dark:bg-blue-900/20">
                <ShoppingBag className="h-5 w-5 text-blue-600 dark:text-blue-400" />
              </div>
              <div className="ml-3">
                <p className="text-xs font-medium text-gray-500 dark:text-gray-400">
                  {tCommon("orders")}
                </p>
                <p className="text-base font-semibold text-gray-900 dark:text-white">
                  {stats?.totalOrders || 0}
                </p>
                {stats?.ordersChange !== null &&
                  stats?.ordersChange !== undefined &&
                  stats?.ordersChange !== 0 && (
                    <p
                      className={`text-xs flex items-center ${stats.ordersChange > 0 ? "text-green-600 dark:text-green-400" : "text-red-600 dark:text-red-400"}`}
                    >
                      <ArrowUpRight className="h-3 w-3 mr-1" />
                      {stats.ordersChange > 0 ? "+" : ""}
                      {stats.ordersChange.toFixed(1)}% {t("from_last_period")}
                    </p>
                  )}
              </div>
            </div>
            <div className="flex items-center p-3 bg-gray-50 dark:bg-zinc-700/50 rounded-lg">
              <div className="p-2 rounded-full bg-amber-100 dark:bg-amber-900/20">
                <Users className="h-5 w-5 text-amber-600 dark:text-amber-400" />
              </div>
              <div className="ml-3">
                <p className="text-xs font-medium text-gray-500 dark:text-gray-400">
                  {t("customers")}
                </p>
                <p className="text-base font-semibold text-gray-900 dark:text-white">
                  {stats?.newCustomers || 0}
                </p>
                {stats?.newCustomersChange !== null &&
                  stats?.newCustomersChange !== undefined &&
                  stats?.newCustomersChange !== 0 && (
                    <p
                      className={`text-xs flex items-center ${stats.newCustomersChange > 0 ? "text-green-600 dark:text-green-400" : "text-red-600 dark:text-red-400"}`}
                    >
                      <ArrowUpRight className="h-3 w-3 mr-1" />
                      {stats.newCustomersChange > 0 ? "+" : ""}
                      {stats.newCustomersChange.toFixed(1)}%{" "}
                      {t("from_last_period")}
                    </p>
                  )}
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Dashboard grid */}
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        {/* Recent orders */}
        <div className="lg:col-span-2 bg-white dark:bg-zinc-900/50 rounded-lg border border-gray-200 dark:border-zinc-800 overflow-hidden">
          <div className="p-4 border-b border-gray-200 dark:border-zinc-700 flex justify-between items-center">
            <h2 className="text-base font-medium text-gray-900 dark:text-white flex items-center">
              <ShoppingBag className="h-4 w-4 mr-2 text-gray-500 dark:text-gray-400" />
              {t("recent_orders")}
            </h2>
            <Link
              href="/admin/ecommerce/orders"
              className="text-xs font-medium text-indigo-600 dark:text-indigo-400 hover:text-indigo-800 dark:hover:text-indigo-300 flex items-center"
            >
              {tCommon("view_all")}
              <ChevronRight className="h-4 w-4 ml-1" />
            </Link>
          </div>
          <div className="overflow-x-auto">
            {isLoading ? (
              <div className="p-4 flex justify-center">
                <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-indigo-600 dark:border-indigo-400"></div>
              </div>
            ) : recentOrders && recentOrders.length > 0 ? (
              <div className="divide-y divide-gray-200 dark:divide-zinc-700">
                {recentOrders.map((order) => {
                  return (
                    <div
                      key={order.id}
                      className="p-4 hover:bg-gray-50 dark:hover:bg-zinc-700/50 transition-colors duration-150"
                    >
                      <div className="flex items-center justify-between">
                        <div className="flex items-center">
                          <div
                            className={`w-2 h-2 rounded-full ${getStatusColor(order.status)} mr-3`}
                          ></div>
                          <div>
                            <div className="font-medium text-gray-900 dark:text-white">
                              #
                              {order.id.slice(0, 8)}
                            </div>
                            <div className="text-xs text-gray-500 dark:text-gray-400">
                              {new Date(
                                order.createdAt || Date.now()
                              ).toLocaleDateString()}
                            </div>
                          </div>
                        </div>
                        <div className="text-right">
                          <div className="font-medium text-gray-900 dark:text-white">
                            ${(order.total || 0).toFixed(2)}
                          </div>
                          <div className="text-xs text-gray-500 dark:text-gray-400">
                            {order.customer?.name || "Guest"}
                          </div>
                        </div>
                        <div>
                          <span
                            className={`inline-flex items-center px-2 py-0.5 rounded text-xs font-medium ${getStatusBadgeColor(order.status)}`}
                          >
                            {order.status}
                          </span>
                        </div>
                        <Link
                          href={`/admin/ecommerce/orders/${order.id}`}
                          className="text-indigo-600 dark:text-indigo-400 hover:text-indigo-900 dark:hover:text-indigo-300"
                        >
                          <ArrowRight className="h-4 w-4" />
                        </Link>
                      </div>
                    </div>
                  );
                })}
              </div>
            ) : (
              <div className="p-6 text-center">
                <div className="inline-flex items-center justify-center w-12 h-12 rounded-full bg-gray-100 dark:bg-zinc-700 mb-4">
                  <ShoppingBag className="h-6 w-6 text-gray-500 dark:text-gray-400" />
                </div>
                <p className="text-gray-500 dark:text-gray-400 mb-2">
                  {t("no_orders_found")}
                </p>
                <Link
                  href="/admin/ecommerce/orders"
                  className="text-sm text-indigo-600 dark:text-indigo-400 hover:text-indigo-800 dark:hover:text-indigo-300"
                >
                  {t("view_all_orders")}
                </Link>
              </div>
            )}
          </div>
        </div>

        {/* Status cards and top selling products */}
        <div className="space-y-6">
          {/* Status cards */}
          <div className="grid grid-cols-2 gap-4">
            <StatusCard
              title={tCommon("pending_orders")}
              value={stats?.pendingOrders || 0}
              icon={
                <Clock className="h-5 w-5 text-amber-500 dark:text-amber-400" />
              }
              bgColor="bg-amber-50 dark:bg-amber-900/10"
              textColor="text-amber-700 dark:text-amber-400"
              borderColor="border-amber-200 dark:border-amber-800"
              href="/admin/ecommerce/order?status=PENDING"
            />
            <StatusCard
              title={tExt("out_of_stock")}
              value={stats?.outOfStockCount || 0}
              icon={
                <AlertCircle className="h-5 w-5 text-red-500 dark:text-red-400" />
              }
              bgColor="bg-red-50 dark:bg-red-900/10"
              textColor="text-red-700 dark:text-red-400"
              borderColor="border-red-200 dark:border-red-800"
              href="/admin/ecommerce/product?stock=out"
            />
            <StatusCard
              title={tCommon("rejected_orders")}
              value={stats?.rejectedOrders || 0}
              icon={
                <XCircle className="h-5 w-5 text-red-500 dark:text-red-400" />
              }
              bgColor="bg-red-50 dark:bg-red-900/10"
              textColor="text-red-700 dark:text-red-400"
              borderColor="border-red-200 dark:border-red-800"
              href="/admin/ecommerce/order?status=REJECTED"
            />
            <StatusCard
              title={tExt("completed_orders")}
              value={stats?.completedOrders || 0}
              icon={
                <CheckCircle2 className="h-5 w-5 text-green-500 dark:text-green-400" />
              }
              bgColor="bg-green-50 dark:bg-green-900/10"
              textColor="text-green-700 dark:text-green-400"
              borderColor="border-green-200 dark:border-green-800"
              href="/admin/ecommerce/order?status=COMPLETED"
            />
          </div>

          {/* Top selling products */}
          <div className="bg-white dark:bg-zinc-900/50 rounded-lg border border-gray-200 dark:border-zinc-800 overflow-hidden">
            <div className="p-4 border-b border-gray-200 dark:border-zinc-700 flex justify-between items-center">
              <h2 className="text-base font-medium text-gray-900 dark:text-white flex items-center">
                <Package className="h-4 w-4 mr-2 text-gray-500 dark:text-gray-400" />
                {t("top_selling_products")}
              </h2>
              <Link
                href="/admin/ecommerce/product"
                className="text-xs font-medium text-indigo-600 dark:text-indigo-400 hover:text-indigo-800 dark:hover:text-indigo-300 flex items-center"
              >
                {tCommon("view_all")}
                <ChevronRight className="h-4 w-4 ml-1" />
              </Link>
            </div>
            <div className="divide-y divide-gray-200 dark:divide-zinc-700">
              {isLoading ? (
                Array.from({
                  length: 3,
                }).map((_, index) => (
                  <div
                    key={index}
                    className="p-3 animate-pulse flex items-center"
                  >
                    <div className="h-10 w-10 bg-gray-200 dark:bg-zinc-600 rounded"></div>
                    <div className="ml-3 flex-1">
                      <div className="h-3 bg-gray-200 dark:bg-zinc-600 rounded w-3/4 mb-2"></div>
                      <div className="h-2 bg-gray-200 dark:bg-zinc-600 rounded w-1/2"></div>
                    </div>
                    <div className="h-3 bg-gray-200 dark:bg-zinc-600 rounded w-12"></div>
                  </div>
                ))
              ) : topSellingProducts.length > 0 ? (
                topSellingProducts.slice(0, 3).map((product) => {
                  return (
                    <div
                      key={product.id}
                      className="p-3 hover:bg-gray-50 dark:hover:bg-zinc-700/50 transition-colors duration-150"
                    >
                      <div className="flex items-center">
                        <div className="flex-shrink-0 h-10 w-10 relative rounded overflow-hidden bg-gray-100 dark:bg-zinc-700">
                          <Image
                            src={
                              product.image ||
                              "/placeholder.svg?height=40&width=40"
                            }
                            alt={product.name}
                            fill
                            className="object-cover"
                          />
                        </div>
                        <div className="ml-3 flex-1 min-w-0">
                          <h3 className="text-sm font-medium text-gray-900 dark:text-white truncate">
                            {product.name}
                          </h3>
                          <p className="text-xs text-gray-500 dark:text-gray-400 truncate">
                            {product.category?.name || "Uncategorized"}
                          </p>
                        </div>
                        <div className="text-right">
                          <p className="text-sm font-medium text-gray-900 dark:text-white">
                            ${product.price?.toFixed(2)}
                          </p>
                          <p className="text-xs text-gray-500 dark:text-gray-400">
                            {product.soldCount || 0} {tExt("sold")}
                          </p>
                        </div>
                      </div>
                    </div>
                  );
                })
              ) : (
                <div className="p-6 text-center">
                  <div className="inline-flex items-center justify-center w-12 h-12 rounded-full bg-gray-100 dark:bg-zinc-700 mb-4">
                    <Package className="h-6 w-6 text-gray-500 dark:text-gray-400" />
                  </div>
                  <p className="text-gray-500 dark:text-gray-400 mb-2">
                    {tCommon("no_products_found")}
                  </p>
                  <Link
                    href="/admin/ecommerce/product"
                    className="text-sm text-indigo-600 dark:text-indigo-400 hover:text-indigo-800 dark:hover:text-indigo-300"
                  >
                    {tExt("view_all_products")}
                  </Link>
                </div>
              )}
            </div>
          </div>
        </div>
      </div>

      {/* Quick actions */}
      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
        <QuickActionCard
          title={t("add_new_product")}
          description={t("create_and_publish_a_new_product_to_your_store")}
          icon={<Package className="h-5 w-5 text-white" />}
          iconBg="from-indigo-600 to-indigo-700"
          href="/admin/ecommerce/product"
        />
        <QuickActionCard
          title={t("manage_categories")}
          description={t("organize_your_products_with_categories")}
          icon={<Tag className="h-5 w-5 text-white" />}
          iconBg="from-purple-600 to-purple-700"
          href="/admin/ecommerce/category"
        />
        <QuickActionCard
          title={t("view_orders")}
          description={t("see_all_customer_orders_and_their_statuses")}
          icon={<ShoppingBag className="h-5 w-5 text-white" />}
          iconBg="from-green-600 to-green-700"
          href="/admin/ecommerce/order"
        />
      </div>
    </div>
  );
}
function StatusCard({
  title,
  value,
  icon,
  bgColor,
  textColor,
  borderColor,
  href,
}) {
  return (
    <Link
      href={href}
      className={`block p-4 rounded-lg border ${borderColor} ${bgColor} hover:shadow-md transition-shadow duration-200`}
    >
      <div className="flex items-center justify-between">
        <div>
          <p className={`text-xs font-medium ${textColor}`}>{title}</p>
          <p className="text-2xl font-bold mt-1 text-gray-900 dark:text-white">
            {value}
          </p>
        </div>
        <div className="p-2 rounded-full bg-white dark:bg-zinc-900/50 border border-gray-200 dark:border-zinc-800">
          {icon}
        </div>
      </div>
    </Link>
  );
}
function QuickActionCard({ title, description, icon, iconBg, href }) {
  return (
    <Link
      href={href}
      className="bg-white dark:bg-zinc-900/50 overflow-hidden rounded-lg border border-gray-200 dark:border-zinc-800 hover:shadow-md transition-shadow duration-200"
    >
      <div className="p-4">
        <div className="flex items-center">
          <div
            className={`flex-shrink-0 rounded-md p-2 bg-gradient-to-r ${iconBg}`}
          >
            {icon}
          </div>
          <div className="ml-3 flex-1">
            <h3 className="text-sm font-medium text-gray-900 dark:text-white">
              {title}
            </h3>
            <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
              {description}
            </p>
          </div>
          <div className="ml-2 flex-shrink-0">
            <ChevronRight className="h-4 w-4 text-gray-400" />
          </div>
        </div>
      </div>
    </Link>
  );
}
function getStatusBadgeColor(status) {
  switch (status) {
    case "PENDING":
      return "bg-amber-100 text-amber-800 dark:bg-amber-900/20 dark:text-amber-400";
    case "COMPLETED":
      return "bg-green-100 text-green-800 dark:bg-green-900/20 dark:text-green-400";
    case "CANCELLED":
      return "bg-red-100 text-red-800 dark:bg-red-900/20 dark:text-red-400";
    case "REJECTED":
      return "bg-red-100 text-red-800 dark:bg-red-900/20 dark:text-red-400";
    default:
      return "bg-gray-100 text-gray-800 dark:bg-gray-900/20 dark:text-gray-400";
  }
}
function getStatusColor(status) {
  switch (status) {
    case "PENDING":
      return "bg-amber-500";
    case "COMPLETED":
      return "bg-green-500";
    case "CANCELLED":
      return "bg-red-500";
    case "REJECTED":
      return "bg-red-500";
    default:
      return "bg-gray-500";
  }
}