"use client";

import { useEffect, useState, useCallback, useRef } from "react";

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Separator } from "@/components/ui/separator";
import { Skeleton } from "@/components/ui/skeleton";
import { Switch } from "@/components/ui/switch";
import { ActivityFeed } from "@/components/layout/activity-feed";

import {
  Users,
  Package,
  ShoppingCart,
  DollarSign,
  TrendingUp,
  Percent,
  CheckCircle,
  Clock,
  XCircle,
  Tag,
  RefreshCw,
  ShieldBan,
  Wallet,
  ArrowRight,
} from "lucide-react";

import {
  ResponsiveContainer,
  AreaChart,
  Area,
  BarChart,
  Bar,
  PieChart,
  Pie,
  Cell,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Legend,
} from "recharts";

// Chart colors
const CHART_1 = "#f97316";
const CHART_2 = "#06b6d4";
const CHART_3 = "#8b5cf6";
const CHART_4 = "#eab308";
const CHART_5 = "#ec4899";
const PIE_COLORS = [CHART_1, CHART_2, CHART_3, CHART_4, CHART_5];

// ─── Types ───────────────────────────────────────────────

interface RecentPurchase {
  username: string;
  productName: string;
  totalPrice: number;
  status: string;
  purchaseDate: string;
}

interface DashboardStats {
  totalUsers: number;
  totalProducts: number;
  totalPurchases: number;
  totalRevenue: number;
  totalSubcategories: number;
  aov: number;
  conversionRate: number;
  completedPurchases: number;
  pendingPurchases: number;
  cancelledPurchases: number;
  bannedUsers: number;
  activeWallets: number;
}

interface ChartData {
  days: string[];
  revenueData: number[];
  usersData: number[];
  days30: string[];
  revenueData30: number[];
}

interface TopProduct {
  name: string;
  qty: number;
  revenue: number;
}

interface TopSpender {
  username: string;
  spent: number;
}

interface RevenueByCategory {
  name: string;
  value: number;
}

interface TopCountry {
  country: string;
  productCount: number;
}

interface WalletSummary {
  walletType: string;
  count: number;
  totalBalance: number;
  totalBalanceUsd: number;
}

interface DashboardData {
  stats: DashboardStats;
  chartData: ChartData;
  topProducts: TopProduct[];
  topSpenders: TopSpender[];
  revenueByCategory: RevenueByCategory[];
  topCountries: TopCountry[];
  walletSummary: WalletSummary[];
  recentPurchases: RecentPurchase[];
}

// ─── Helpers ─────────────────────────────────────────────

function formatCurrency(val: number): string {
  return `$${val.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
}

function relativeTime(dateStr: string): string {
  const now = Date.now();
  const then = new Date(dateStr).getTime();
  const diffMs = now - then;
  const diffMin = Math.floor(diffMs / 60000);
  const diffHr = Math.floor(diffMs / 3600000);
  const diffDay = Math.floor(diffMs / 86400000);
  if (diffMin < 1) return 'just now';
  if (diffMin < 60) return `${diffMin}m ago`;
  if (diffHr < 24) return `${diffHr}h ago`;
  if (diffDay < 7) return `${diffDay}d ago`;
  return new Date(dateStr).toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
}

function statusBadge(status: string): { label: string; cls: string } {
  switch (status) {
    case 'completed':
      return { label: 'Completed', cls: 'bg-emerald-500/15 text-emerald-600 dark:text-emerald-400' };
    case 'pending':
      return { label: 'Pending', cls: 'bg-yellow-500/15 text-yellow-600 dark:text-yellow-400' };
    case 'cancelled':
      return { label: 'Cancelled', cls: 'bg-red-500/15 text-red-600 dark:text-red-400' };
    default:
      return { label: status, cls: 'bg-muted text-muted-foreground' };
  }
}

function formatCrypto(val: number): string {
  return val.toFixed(8);
}

function shortDate(dateStr: string): string {
  const d = new Date(dateStr + "T00:00:00");
  return d.toLocaleDateString("en-US", { month: "short", day: "numeric" });
}

// ─── Mini Sparkline ─────────────────────────────────────

function MiniSparkline({ data, color }: { data: number[]; color: string }) {
  if (data.length < 2) return null;
  const chartData = data.map((v, i) => ({ i, v }));
  return (
    <div className="absolute bottom-0 left-0 right-0 h-12 opacity-20 pointer-events-none">
      <ResponsiveContainer width="100%" height="100%">
        <AreaChart data={chartData} margin={{ top: 0, right: 0, left: 0, bottom: 0 }}>
          <YAxis domain={["dataMin - 2", "dataMax + 2"]} hide />
          <Area type="monotone" dataKey="v" stroke={color} fill={color} strokeWidth={1.5} />
        </AreaChart>
      </ResponsiveContainer>
    </div>
  );
}

function generateSparkData(value: number, points: number = 8): number[] {
  const data: number[] = [];
  let current = value * 0.6;
  for (let i = 0; i < points; i++) {
    current += (value - current) * (0.2 + Math.random() * 0.3);
    data.push(Math.round(current * 10) / 10);
  }
  return data;
}

// ─── KPI Card ────────────────────────────────────────────

function KpiCard({
  title,
  value,
  icon: Icon,
  color,
  sparklineColor,
  sparklineValue,
}: {
  title: string;
  value: string;
  icon: React.ComponentType<{ className?: string }>;
  color: string;
  sparklineColor?: string;
  sparklineValue?: number;
}) {
  const sparkData = sparklineValue !== undefined ? generateSparkData(sparklineValue) : undefined;
  return (
    <Card className="card-hover kpi-shimmer border-l-4 transition-transform hover:scale-[1.02] relative overflow-hidden" style={{ borderLeftColor: color }}>
      <div
        className="h-[2px] w-full rounded-t-lg"
        style={{
          background: `linear-gradient(to right, ${color}, ${color}66, transparent)`,
        }}
      />
      <CardContent className="p-4 flex items-center gap-4">
        <div
          className="flex h-12 w-12 shrink-0 items-center justify-center rounded-lg"
          style={{ backgroundColor: `${color}15` }}
        >
          <Icon className="h-6 w-6" style={{ color }} />
        </div>
        <div className="min-w-0">
          <p className="text-sm text-muted-foreground truncate">{title}</p>
          <p className="text-xl font-bold truncate tabular-nums stat-value count-up">{value}</p>
        </div>
      </CardContent>
      {sparkData && sparklineColor && <MiniSparkline data={sparkData} color={sparklineColor} />}
    </Card>
  );
}

// ─── Skeleton Loader ─────────────────────────────────────

function DashboardSkeleton() {
  return (
    <div className="p-4 md:p-6 space-y-6">
      <Skeleton className="h-8 w-48" />
      <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-4">
        {Array.from({ length: 10 }).map((_, i) => (
          <Skeleton key={i} className="h-24 rounded-xl" />
        ))}
      </div>
      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        {Array.from({ length: 4 }).map((_, i) => (
          <Skeleton key={i} className="h-72 rounded-xl" />
        ))}
      </div>
    </div>
  );
}

// ─── Chart Card wrapper ──────────────────────────────────

function ChartCard({
  title,
  children,
  accentColor,
  icon: ChartIcon,
}: {
  title: string;
  children: React.ReactNode;
  accentColor?: string;
  icon?: React.ComponentType<{ className?: string; style?: React.CSSProperties }>;
}) {
  return (
    <Card className="card-hover overflow-hidden">
      <div
        className="h-1 w-full"
        style={{
          background: `linear-gradient(to right, ${accentColor ?? CHART_1}, ${accentColor ?? CHART_1}44, transparent)`,
        }}
      />
      <CardHeader className="p-4 pb-0">
        <CardTitle className="text-sm font-medium flex items-center gap-2">
          {ChartIcon && <ChartIcon className="size-4" style={{ color: accentColor ?? CHART_1 }} />}
          {title}
        </CardTitle>
      </CardHeader>
      <CardContent className="p-4 pt-2">
        <div className="h-72">{children}</div>
      </CardContent>
    </Card>
  );
}

// ─── Main Component ──────────────────────────────────────

export function DashboardPage() {
  const [data, setData] = useState<DashboardData | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [autoRefresh, setAutoRefresh] = useState(false);
  const [lastUpdated, setLastUpdated] = useState<number>(Date.now());
  const [refreshing, setRefreshing] = useState(false);
  const autoRefreshRef = useRef<ReturnType<typeof setInterval> | null>(null);

  const fetchDashboard = useCallback(async () => {
    try {
      setRefreshing(true);
      setError(null);
      const res = await fetch("/api/stats/dashboard");
      if (!res.ok) {
        throw new Error("Failed to load dashboard data");
      }
      const json = await res.json();
      setData(json);
      setLastUpdated(Date.now());
    } catch (err) {
      setError(err instanceof Error ? err.message : "Unknown error");
    } finally {
      setLoading(false);
      setRefreshing(false);
    }
  }, []);

  useEffect(() => {
    fetchDashboard();
  }, [fetchDashboard]);

  // Auto-refresh toggle
  useEffect(() => {
    if (autoRefresh) {
      autoRefreshRef.current = setInterval(fetchDashboard, 30000);
    }
    return () => {
      if (autoRefreshRef.current) clearInterval(autoRefreshRef.current);
    };
  }, [autoRefresh, fetchDashboard]);

  // "X seconds ago" ticker
  const [secondsAgo, setSecondsAgo] = useState(0);
  useEffect(() => {
    const tick = setInterval(() => {
      setSecondsAgo(Math.floor((Date.now() - lastUpdated) / 1000));
    }, 1000);
    return () => clearInterval(tick);
  }, [lastUpdated]);

  if (loading) return <DashboardSkeleton />;
  if (error) {
    return (
      <div className="p-6">
        <Card className="border-destructive">
          <CardContent className="p-6">
            <p className="text-destructive font-medium">{error}</p>
          </CardContent>
        </Card>
      </div>
    );
  }
  if (!data) return null;

  const { stats, chartData, topProducts, topSpenders, revenueByCategory, walletSummary, recentPurchases } = data;

  // Prepare chart datasets
  const revenue7Data = chartData.days.map((day, i) => ({
    date: shortDate(day),
    revenue: chartData.revenueData[i],
  }));

  const revenue30Data = chartData.days30.map((day, i) => ({
    date: shortDate(day),
    revenue: chartData.revenueData30[i],
  }));

  const users7Data = chartData.days.map((day, i) => ({
    date: shortDate(day),
    users: chartData.usersData[i],
  }));

  const productsData = [...topProducts].reverse(); // reverse for horizontal bar

  const spendersData = [...topSpenders].reverse();

  const walletChartData = walletSummary.map((w) => ({
    name: w.walletType,
    count: w.count,
  }));

  // KPI definitions
  const kpis = [
    { title: "Total Users", value: stats.totalUsers.toLocaleString(), icon: Users, color: CHART_1, sparklineColor: "#64748b", sparklineValue: stats.totalUsers },
    { title: "Total Products", value: stats.totalProducts.toLocaleString(), icon: Package, color: CHART_2, sparklineColor: "#64748b", sparklineValue: stats.totalProducts },
    { title: "Total Purchases", value: stats.totalPurchases.toLocaleString(), icon: ShoppingCart, color: CHART_3, sparklineColor: "#64748b", sparklineValue: stats.totalPurchases },
    { title: "Pending", value: stats.pendingPurchases.toLocaleString(), icon: Clock, color: "#eab308", sparklineColor: "#eab308", sparklineValue: stats.pendingPurchases },
    { title: "Total Revenue", value: formatCurrency(stats.totalRevenue), icon: DollarSign, color: "#22c55e", sparklineColor: "#22c55e", sparklineValue: stats.totalRevenue },
    { title: "Avg Order Value", value: formatCurrency(stats.aov), icon: TrendingUp, color: CHART_1, sparklineColor: "#64748b", sparklineValue: stats.aov },
    { title: "Conversion Rate", value: `${stats.conversionRate.toFixed(1)}%`, icon: Percent, color: CHART_5, sparklineColor: "#64748b", sparklineValue: stats.conversionRate },
    { title: "Completed", value: stats.completedPurchases.toLocaleString(), icon: CheckCircle, color: "#22c55e", sparklineColor: "#64748b", sparklineValue: stats.completedPurchases },
    { title: "Cancelled", value: stats.cancelledPurchases.toLocaleString(), icon: XCircle, color: "#ef4444", sparklineColor: "#64748b", sparklineValue: stats.cancelledPurchases },
    { title: "Banned Users", value: stats.bannedUsers.toLocaleString(), icon: ShieldBan, color: "#ef4444", sparklineColor: "#ef4444", sparklineValue: stats.bannedUsers },
    { title: "Active Wallets", value: stats.activeWallets.toLocaleString(), icon: Wallet, color: CHART_2, sparklineColor: "#06b6d4", sparklineValue: stats.activeWallets },
    { title: "Subcategories", value: stats.totalSubcategories.toLocaleString(), icon: Tag, color: CHART_2, sparklineColor: "#64748b", sparklineValue: stats.totalSubcategories },
  ];

  return (
    <div className="space-y-6 page-enter">
      {/* ── Page Title ── */}
      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
        <p className="text-sm text-muted-foreground">Overview of your Telegram Shop</p>
        <div className="flex items-center gap-4">
          <span className="text-xs text-muted-foreground">
            Last updated: {secondsAgo < 1 ? "just now" : `${secondsAgo} seconds ago`}
          </span>
          <button
            type="button"
            onClick={fetchDashboard}
            disabled={refreshing}
            className="inline-flex items-center justify-center rounded-md p-2 text-muted-foreground hover:text-foreground hover:bg-accent transition-colors disabled:opacity-50"
            aria-label="Refresh dashboard"
          >
            <RefreshCw className={`h-4 w-4 ${refreshing ? "animate-spin" : ""}`} />
          </button>
          <div className="flex items-center gap-2">
            <Switch
              id="auto-refresh"
              checked={autoRefresh}
              onCheckedChange={setAutoRefresh}
            />
            <label
              htmlFor="auto-refresh"
              className="text-xs text-muted-foreground cursor-pointer select-none"
            >
              Auto-refresh
            </label>
          </div>
        </div>
      </div>

      {/* ── KPI Cards ── */}
      <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
        {kpis.map((kpi) => (
          <KpiCard key={kpi.title} {...kpi} icon={kpi.icon} />
        ))}
      </div>

      <Separator />

      {/* ── Charts Grid ── */}
      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        {/* 1. Revenue 7 days */}
        <ChartCard title="Revenue — Last 7 Days" accentColor={CHART_1} icon={TrendingUp}>
          {revenue7Data.length > 0 ? (
            <ResponsiveContainer width="100%" height="100%">
              <AreaChart data={revenue7Data}>
                <defs>
                  <linearGradient id="rev7grad" x1="0" y1="0" x2="0" y2="1">
                    <stop offset="5%" stopColor={CHART_1} stopOpacity={0.3} />
                    <stop offset="95%" stopColor={CHART_1} stopOpacity={0} />
                  </linearGradient>
                </defs>
                <CartesianGrid strokeDasharray="3 3" stroke="hsl(var(--border))" />
                <XAxis dataKey="date" tick={{ fontSize: 11 }} stroke="hsl(var(--muted-foreground))" />
                <YAxis tick={{ fontSize: 11 }} stroke="hsl(var(--muted-foreground))" />
                <Tooltip
                  contentStyle={{
                    backgroundColor: "hsl(var(--card))",
                    border: "1px solid hsl(var(--border))",
                    borderRadius: "8px",
                    fontSize: "12px",
                  }}
                />
                <Area
                  type="monotone"
                  dataKey="revenue"
                  stroke={CHART_1}
                  fill="url(#rev7grad)"
                  strokeWidth={2}
                />
              </AreaChart>
            </ResponsiveContainer>
          ) : (
            <div className="h-full flex items-center justify-center text-muted-foreground text-sm">No data</div>
          )}
        </ChartCard>

        {/* 2. Revenue 30 days */}
        <ChartCard title="Revenue — Last 30 Days" accentColor={CHART_2} icon={TrendingUp}>
          {revenue30Data.length > 0 ? (
            <ResponsiveContainer width="100%" height="100%">
              <AreaChart data={revenue30Data}>
                <defs>
                  <linearGradient id="rev30grad" x1="0" y1="0" x2="0" y2="1">
                    <stop offset="5%" stopColor={CHART_2} stopOpacity={0.3} />
                    <stop offset="95%" stopColor={CHART_2} stopOpacity={0} />
                  </linearGradient>
                </defs>
                <CartesianGrid strokeDasharray="3 3" stroke="hsl(var(--border))" />
                <XAxis dataKey="date" tick={{ fontSize: 10 }} stroke="hsl(var(--muted-foreground))" interval={4} />
                <YAxis tick={{ fontSize: 11 }} stroke="hsl(var(--muted-foreground))" />
                <Tooltip
                  contentStyle={{
                    backgroundColor: "hsl(var(--card))",
                    border: "1px solid hsl(var(--border))",
                    borderRadius: "8px",
                    fontSize: "12px",
                  }}
                />
                <Area
                  type="monotone"
                  dataKey="revenue"
                  stroke={CHART_2}
                  fill="url(#rev30grad)"
                  strokeWidth={2}
                />
              </AreaChart>
            </ResponsiveContainer>
          ) : (
            <div className="h-full flex items-center justify-center text-muted-foreground text-sm">No data</div>
          )}
        </ChartCard>

        {/* 3. New Users 7 days */}
        <ChartCard title="New Users — Last 7 Days" accentColor={CHART_3} icon={Users}>
          {users7Data.length > 0 ? (
            <ResponsiveContainer width="100%" height="100%">
              <BarChart data={users7Data}>
                <CartesianGrid strokeDasharray="3 3" stroke="hsl(var(--border))" />
                <XAxis dataKey="date" tick={{ fontSize: 11 }} stroke="hsl(var(--muted-foreground))" />
                <YAxis allowDecimals={false} tick={{ fontSize: 11 }} stroke="hsl(var(--muted-foreground))" />
                <Tooltip
                  contentStyle={{
                    backgroundColor: "hsl(var(--card))",
                    border: "1px solid hsl(var(--border))",
                    borderRadius: "8px",
                    fontSize: "12px",
                  }}
                />
                <Bar dataKey="users" fill={CHART_3} radius={[4, 4, 0, 0]} />
              </BarChart>
            </ResponsiveContainer>
          ) : (
            <div className="h-full flex items-center justify-center text-muted-foreground text-sm">No data</div>
          )}
        </ChartCard>

        {/* 4. Top 5 Products */}
        <ChartCard title="Top 5 Products by Quantity Sold" accentColor={CHART_4} icon={Package}>
          {productsData.length > 0 ? (
            <ResponsiveContainer width="100%" height="100%">
              <BarChart data={productsData} layout="vertical" margin={{ left: 20 }}>
                <CartesianGrid strokeDasharray="3 3" stroke="hsl(var(--border))" horizontal={false} />
                <XAxis type="number" tick={{ fontSize: 11 }} stroke="hsl(var(--muted-foreground))" />
                <YAxis type="category" dataKey="name" width={120} tick={{ fontSize: 11 }} stroke="hsl(var(--muted-foreground))" />
                <Tooltip
                  contentStyle={{
                    backgroundColor: "hsl(var(--card))",
                    border: "1px solid hsl(var(--border))",
                    borderRadius: "8px",
                    fontSize: "12px",
                  }}
                  formatter={(value: number, name: string) => {
                    if (name === "qty") return [value, "Quantity"];
                    return [formatCurrency(value), "Revenue"];
                  }}
                />
                <Bar dataKey="qty" fill={CHART_4} radius={[0, 4, 4, 0]} />
              </BarChart>
            </ResponsiveContainer>
          ) : (
            <div className="h-full flex items-center justify-center text-muted-foreground text-sm">No data</div>
          )}
        </ChartCard>

        {/* 5. Top 5 Spenders */}
        <ChartCard title="Top 5 Spenders" accentColor={CHART_5} icon={DollarSign}>
          {spendersData.length > 0 ? (
            <ResponsiveContainer width="100%" height="100%">
              <BarChart data={spendersData} layout="vertical" margin={{ left: 20 }}>
                <CartesianGrid strokeDasharray="3 3" stroke="hsl(var(--border))" horizontal={false} />
                <XAxis type="number" tick={{ fontSize: 11 }} stroke="hsl(var(--muted-foreground))" />
                <YAxis type="category" dataKey="username" width={120} tick={{ fontSize: 11 }} stroke="hsl(var(--muted-foreground))" />
                <Tooltip
                  contentStyle={{
                    backgroundColor: "hsl(var(--card))",
                    border: "1px solid hsl(var(--border))",
                    borderRadius: "8px",
                    fontSize: "12px",
                  }}
                  formatter={(value: number) => [formatCurrency(value), "Spent"]}
                />
                <Bar dataKey="spent" fill={CHART_5} radius={[0, 4, 4, 0]} />
              </BarChart>
            </ResponsiveContainer>
          ) : (
            <div className="h-full flex items-center justify-center text-muted-foreground text-sm">No data</div>
          )}
        </ChartCard>

        {/* 6. Revenue by Category (Pie/Donut) */}
        <ChartCard title="Revenue by Category" accentColor={CHART_1} icon={Tag}>
          {revenueByCategory.length > 0 ? (
            <ResponsiveContainer width="100%" height="100%">
              <PieChart>
                <Pie
                  data={revenueByCategory}
                  cx="50%"
                  cy="50%"
                  innerRadius={50}
                  outerRadius={90}
                  paddingAngle={2}
                  dataKey="value"
                  nameKey="name"
                  label={({ name, percent }) =>
                    `${name} ${(percent * 100).toFixed(0)}%`
                  }
                  labelLine={true}
                  fontSize={11}
                >
                  {revenueByCategory.map((_, index) => (
                    <Cell
                      key={`cell-${index}`}
                      fill={PIE_COLORS[index % PIE_COLORS.length]}
                    />
                  ))}
                </Pie>
                <Tooltip
                  contentStyle={{
                    backgroundColor: "hsl(var(--card))",
                    border: "1px solid hsl(var(--border))",
                    borderRadius: "8px",
                    fontSize: "12px",
                  }}
                  formatter={(value: number) => [formatCurrency(value), "Revenue"]}
                />
                <Legend />
              </PieChart>
            </ResponsiveContainer>
          ) : (
            <div className="h-full flex items-center justify-center text-muted-foreground text-sm">No data</div>
          )}
        </ChartCard>

        {/* 7. Purchase Status Distribution */}
        <ChartCard title="Purchase Status Distribution" accentColor="#eab308" icon={ShoppingCart}>
          <ResponsiveContainer width="100%" height="100%">
            <PieChart>
              <Pie
                data={[
                  { name: 'Pending', value: stats.pendingPurchases },
                  { name: 'Completed', value: stats.completedPurchases },
                  { name: 'Cancelled', value: stats.cancelledPurchases },
                ]}
                cx="50%"
                cy="50%"
                innerRadius={55}
                outerRadius={90}
                paddingAngle={3}
                dataKey="value"
                nameKey="name"
                label={({ name, percent }) =>
                  `${name} ${(percent * 100).toFixed(0)}%`
                }
                labelLine={true}
                fontSize={11}
              >
                <Cell fill="#eab308" />
                <Cell fill="#10b981" />
                <Cell fill="#ef4444" />
              </Pie>
              <Tooltip
                contentStyle={{
                  backgroundColor: "hsl(var(--card))",
                  border: "1px solid hsl(var(--border))",
                  borderRadius: "8px",
                  fontSize: "12px",
                }}
                formatter={(value: number) => [value, "Purchases"]}
              />
              <Legend />
            </PieChart>
          </ResponsiveContainer>
        </ChartCard>
      </div>

      {/* ── Analytics Cards: Revenue Trend + User Funnel ── */}
      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
        {/* Card A: Revenue Trend (30-day area chart) */}
        <Card className="card-hover overflow-hidden md:col-span-2">
          <div
            className="h-1 w-full"
            style={{
              background: `linear-gradient(to right, ${CHART_2}, ${CHART_2}44, transparent)`,
            }}
          />
          <CardHeader className="p-4 pb-0 flex flex-row items-center gap-2">
            <TrendingUp className="h-4 w-4 text-muted-foreground" />
            <CardTitle className="text-sm font-medium">Revenue Trend</CardTitle>
          </CardHeader>
          <CardContent className="p-4 pt-2">
            <div className="h-80">
              {revenue30Data.length > 0 ? (
                <ResponsiveContainer width="100%" height="100%">
                  <AreaChart data={revenue30Data}>
                    <defs>
                      <linearGradient id="revTrendGrad" x1="0" y1="0" x2="0" y2="1">
                        <stop offset="5%" stopColor={CHART_2} stopOpacity={0.4} />
                        <stop offset="95%" stopColor={CHART_2} stopOpacity={0} />
                      </linearGradient>
                    </defs>
                    <CartesianGrid strokeDasharray="3 3" stroke="hsl(var(--border))" />
                    <XAxis dataKey="date" tick={{ fontSize: 10 }} stroke="hsl(var(--muted-foreground))" interval={4} />
                    <YAxis tick={{ fontSize: 11 }} stroke="hsl(var(--muted-foreground))" tickFormatter={(v: number) => `$${v}`} />
                    <Tooltip
                      contentStyle={{
                        backgroundColor: "hsl(var(--card))",
                        border: "1px solid hsl(var(--border))",
                        borderRadius: "8px",
                        fontSize: "12px",
                      }}
                      formatter={(value: number) => [formatCurrency(value), "Revenue"]}
                    />
                    <Area
                      type="monotone"
                      dataKey="revenue"
                      stroke={CHART_2}
                      fill="url(#revTrendGrad)"
                      strokeWidth={2}
                    />
                  </AreaChart>
                </ResponsiveContainer>
              ) : (
                <div className="h-full flex items-center justify-center text-muted-foreground text-sm">No data</div>
              )}
            </div>
          </CardContent>
        </Card>

        {/* Card B: Conversion Funnel (horizontal bar) */}
        <Card className="card-hover overflow-hidden md:col-span-1">
          <div
            className="h-1 w-full"
            style={{
              background: `linear-gradient(to right, #64748b, #64748b44, transparent)`,
            }}
          />
          <CardHeader className="p-4 pb-0 flex flex-row items-center gap-2">
            <Users className="h-4 w-4 text-muted-foreground" />
            <CardTitle className="text-sm font-medium">User Funnel</CardTitle>
          </CardHeader>
          <CardContent className="p-4 pt-2">
            <div className="h-80">
              <ResponsiveContainer width="100%" height="100%">
                <BarChart
                  data={[
                    { name: "Total Users", value: stats.totalUsers },
                    { name: "Users with Purchases", value: stats.totalPurchases },
                    { name: "Users with Wallets", value: stats.activeWallets },
                  ]}
                  layout="vertical"
                  margin={{ left: 10, right: 20 }}
                >
                  <CartesianGrid strokeDasharray="3 3" stroke="hsl(var(--border))" horizontal={false} />
                  <XAxis type="number" tick={{ fontSize: 11 }} stroke="hsl(var(--muted-foreground))" />
                  <YAxis
                    type="category"
                    dataKey="name"
                    width={120}
                    tick={{ fontSize: 11 }}
                    stroke="hsl(var(--muted-foreground))"
                  />
                  <Tooltip
                    contentStyle={{
                      backgroundColor: "hsl(var(--card))",
                      border: "1px solid hsl(var(--border))",
                      borderRadius: "8px",
                      fontSize: "12px",
                    }}
                  />
                  <Bar dataKey="value" radius={[0, 4, 4, 0]}>
                    <Cell fill="#64748b" />
                    <Cell fill="#10b981" />
                    <Cell fill="#06b6d4" />
                  </Bar>
                </BarChart>
              </ResponsiveContainer>
            </div>
          </CardContent>
        </Card>
      </div>

      <Separator />

      {/* ── Recent Purchases Table ── */}
      <Card className="card-hover">
        <CardHeader className="p-4 pb-0 flex flex-row items-center justify-between">
          <CardTitle className="text-sm font-medium">Recent Purchases</CardTitle>
          <button
            type="button"
            onClick={() => { window.location.hash = '#/purchases'; }}
            className="inline-flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground transition-colors"
          >
            View all
            <ArrowRight className="h-3 w-3" />
          </button>
        </CardHeader>
        <CardContent className="p-4">
          {data.recentPurchases.length > 0 ? (
            <div className="overflow-x-auto">
              <table className="w-full text-sm alternate-rows table-header-gradient">
                <thead>
                  <tr className="border-b">
                    <th className="text-left py-2 px-2 font-medium text-muted-foreground text-xs">Product</th>
                    <th className="text-left py-2 px-2 font-medium text-muted-foreground text-xs">User</th>
                    <th className="text-right py-2 px-2 font-medium text-muted-foreground text-xs">Amount</th>
                    <th className="text-center py-2 px-2 font-medium text-muted-foreground text-xs">Status</th>
                    <th className="text-right py-2 px-2 font-medium text-muted-foreground text-xs">Date</th>
                  </tr>
                </thead>
                <tbody>
                  {data.recentPurchases.map((p, i) => {
                    const badge = statusBadge(p.status);
                    return (
                      <tr key={i} className="border-b last:border-0">
                        <td className="py-2 px-2 text-xs font-medium truncate max-w-[140px]">{p.productName}</td>
                        <td className="py-2 px-2 text-xs text-muted-foreground truncate max-w-[100px]">{p.username}</td>
                        <td className="py-2 px-2 text-xs text-right font-mono tabular-nums">{formatCurrency(p.totalPrice)}</td>
                        <td className="py-2 px-2 text-center">
                          <span className={`inline-block rounded-full px-2 py-0.5 text-xs font-medium whitespace-nowrap ${badge.cls}`}>
                            {badge.label}
                          </span>
                        </td>
                        <td className="py-2 px-2 text-xs text-right text-muted-foreground whitespace-nowrap">{relativeTime(p.purchaseDate)}</td>
                      </tr>
                    );
                  })}
                </tbody>
              </table>
            </div>
          ) : (
            <div className="h-24 flex items-center justify-center text-muted-foreground text-sm">No recent purchases</div>
          )}
        </CardContent>
      </Card>

      <Separator />

      {/* ── Bottom Section: Wallet Summary + Wallet Chart ── */}
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
        {/* Wallet Summary Table */}
        <Card className="card-hover">
          <CardHeader className="p-4 pb-0">
            <CardTitle className="text-sm font-medium">Wallet Summary</CardTitle>
          </CardHeader>
          <CardContent className="p-4">
            {walletSummary.length > 0 ? (
              <div className="overflow-x-auto">
                <table className="w-full text-sm">
                  <thead>
                    <tr className="border-b">
                      <th className="text-left py-2 px-3 font-medium text-muted-foreground">Type</th>
                      <th className="text-right py-2 px-3 font-medium text-muted-foreground">Count</th>
                      <th className="text-right py-2 px-3 font-medium text-muted-foreground">Balance</th>
                      <th className="text-right py-2 px-3 font-medium text-muted-foreground">USD (mock)</th>
                    </tr>
                  </thead>
                  <tbody>
                    {walletSummary.map((w) => (
                      <tr key={w.walletType} className="border-b last:border-0">
                        <td className="py-2 px-3 font-medium">{w.walletType}</td>
                        <td className="py-2 px-3 text-right text-muted-foreground">{w.count}</td>
                        <td className="py-2 px-3 text-right font-mono text-xs">{formatCrypto(w.totalBalance)}</td>
                        <td className="py-2 px-3 text-right">{formatCurrency(w.totalBalanceUsd)}</td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            ) : (
              <div className="h-48 flex items-center justify-center text-muted-foreground text-sm">No wallet data</div>
            )}
          </CardContent>
        </Card>

        {/* Wallet Count by Type Chart */}
        <ChartCard title="Wallet Count by Type" accentColor={CHART_2} icon={Wallet}>
          {walletChartData.length > 0 ? (
            <ResponsiveContainer width="100%" height="100%">
              <BarChart data={walletChartData}>
                <CartesianGrid strokeDasharray="3 3" stroke="hsl(var(--border))" />
                <XAxis dataKey="name" tick={{ fontSize: 11 }} stroke="hsl(var(--muted-foreground))" />
                <YAxis allowDecimals={false} tick={{ fontSize: 11 }} stroke="hsl(var(--muted-foreground))" />
                <Tooltip
                  contentStyle={{
                    backgroundColor: "hsl(var(--card))",
                    border: "1px solid hsl(var(--border))",
                    borderRadius: "8px",
                    fontSize: "12px",
                  }}
                  formatter={(value: number) => [value, "Wallets"]}
                />
                <Bar dataKey="count" fill={CHART_2} radius={[4, 4, 0, 0]} />
              </BarChart>
            </ResponsiveContainer>
          ) : (
            <div className="h-full flex items-center justify-center text-muted-foreground text-sm">No wallet data</div>
          )}
        </ChartCard>
      </div>

      {/* ── Activity Feed (full width) ── */}
      <ActivityFeed />
    </div>
  );
}