'use client';

import * as React from 'react';

// Force dynamic rendering to avoid static generation issues with translations
export const dynamic = 'force-dynamic';
import { AnalyticsCard } from '@/components/admin/analytics-card';
import { RecentActivityTable, type RecentActivity } from '@/components/admin/recent-activity-table';
// EN: Lazy load heavy chart components / VI: Lazy load các component chart nặng
const UserGrowthChart = React.lazy(() => import('@/components/admin/charts/user-growth-chart').then(m => ({ default: m.UserGrowthChart })));
const RevenueChart = React.lazy(() => import('@/components/admin/charts/revenue-chart').then(m => ({ default: m.RevenueChart })));
import { Users, MessageSquare, TrendingUp, DollarSign } from 'lucide-react';
import { useTranslation } from '@/hooks/use-translation';

/**
 * EN: Dashboard overview page component
 * VI: Component trang tổng quan Dashboard
 *
 * Features:
 * - Metrics row with key statistics
 * - Charts row (User Growth, Revenue)
 * - Recent activity table
 *
 * Tính năng:
 * - Hàng metrics với các thống kê chính
 * - Hàng charts (Tăng trưởng người dùng, Doanh thu)
 * - Bảng hoạt động gần đây
 */
export default function DashboardPage() {
  const { t } = useTranslation();
  
  // EN: Mock data - replace with actual API calls / VI: Dữ liệu mock - thay thế bằng API calls thực tế
  const [activities] = React.useState<RecentActivity[]>([
    {
      id: '1',
      user: {
        id: 'user1',
        name: 'John Doe',
        email: 'john@example.com',
      },
      action: 'user_created',
      description: 'Created new user account',
      status: 'success',
      timestamp: new Date(Date.now() - 1000 * 60 * 5), // 5 minutes ago
    },
    {
      id: '2',
      user: {
        id: 'user2',
        name: 'Jane Smith',
        email: 'jane@example.com',
      },
      action: 'message_sent',
      description: 'Sent message in conversation',
      status: 'info',
      timestamp: new Date(Date.now() - 1000 * 60 * 15), // 15 minutes ago
    },
  ]);

  return (
    <div className="space-y-6">
      {/* EN: Page header / VI: Header trang */}
      <div>
        <h1 className="text-3xl font-bold text-text-primary">
          {t('admin.dashboard.title')}
        </h1>
        <p className="mt-1 text-sm text-text-tertiary">
          {t('admin.dashboard.description')}
        </p>
      </div>

      {/* EN: Metrics row / VI: Hàng metrics */}
      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
        <AnalyticsCard
          title={t('admin.dashboard.totalUsers')}
          value={12543}
          change="+12.5%"
          trend="up"
          icon={Users}
          variant="metric"
        />
        <AnalyticsCard
          title={t('admin.dashboard.messages')}
          value={89234}
          change="+8.2%"
          trend="up"
          icon={MessageSquare}
          variant="metric"
        />
        <AnalyticsCard
          title={t('admin.dashboard.activeUsers')}
          value={3421}
          change="+5.1%"
          trend="up"
          icon={TrendingUp}
          variant="metric"
        />
        <AnalyticsCard
          title={t('admin.dashboard.revenue')}
          value="$45,231"
          change="-2.3%"
          trend="down"
          icon={DollarSign}
          variant="metric"
        />
      </div>

      {/* EN: Charts row / VI: Hàng charts */}
      {/* EN: Tablet: Side-by-side charts / VI: Tablet: Charts cạnh nhau */}
      <div className="grid grid-cols-1 gap-4 md:grid-cols-2 sm:gap-6 lg:grid-cols-2">
        {/* EN: User Growth Chart / VI: User Growth Chart */}
        <React.Suspense fallback={<div className="h-[300px] bg-bg-secondary rounded-lg border border-border-primary flex items-center justify-center"><div className="text-text-tertiary">{t('common.loading')}</div></div>}>
          <UserGrowthChart
            data={[
              { date: 'Jan', users: 1000, newUsers: 150 },
              { date: 'Feb', users: 1200, newUsers: 200 },
              { date: 'Mar', users: 1450, newUsers: 250 },
              { date: 'Apr', users: 1700, newUsers: 250 },
              { date: 'May', users: 1950, newUsers: 250 },
              { date: 'Jun', users: 2200, newUsers: 250 },
            ]}
            title={t('admin.dashboard.userGrowth')}
            description={t('admin.dashboard.userGrowth')}
          />
        </React.Suspense>

        {/* EN: Revenue Chart / VI: Revenue Chart */}
        <React.Suspense fallback={<div className="h-[300px] bg-bg-secondary rounded-lg border border-border-primary flex items-center justify-center"><div className="text-text-tertiary">{t('common.loading')}</div></div>}>
          <RevenueChart
            data={[
              { date: 'Jan', revenue: 45000, previousRevenue: 40000 },
              { date: 'Feb', revenue: 52000, previousRevenue: 45000 },
              { date: 'Mar', revenue: 48000, previousRevenue: 52000 },
              { date: 'Apr', revenue: 55000, previousRevenue: 48000 },
              { date: 'May', revenue: 60000, previousRevenue: 55000 },
              { date: 'Jun', revenue: 65000, previousRevenue: 60000 },
            ]}
            title={t('admin.dashboard.revenueChart')}
            description={t('admin.dashboard.revenueChart')}
            currency="$"
          />
        </React.Suspense>
      </div>

      {/* EN: Recent Activity Table / VI: Bảng hoạt động gần đây */}
      <RecentActivityTable
        activities={activities}
        currentPage={1}
        itemsPerPage={10}
        onPageChange={(page) => console.log('Page changed:', page)}
        onQuickAction={(id, action) => console.log('Action:', id, action)}
      />
    </div>
  );
}
