'use client';

import * as React from 'react';

// Force dynamic rendering to avoid static generation issues with translations
export const dynamic = 'force-dynamic';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
import { AnalyticsCard } from '@/components/admin/analytics-card';
import { useTranslation } from '@/hooks/use-translation';
import { BarChart3, Users, MessageSquare, TrendingUp, Clock, AlertCircle, CheckCircle2 } from 'lucide-react';

/**
 * EN: Analytics page component
 * VI: Component trang Analytics
 *
 * Features:
 * - Overview tab with key metrics
 * - Users tab with acquisition and retention
 * - Messages tab with activity metrics
 * - Performance tab with API metrics
 */
export default function AnalyticsPage() {
  const { t } = useTranslation();

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

      {/* EN: Analytics tabs / VI: Tabs analytics */}
      <Tabs defaultValue="overview" className="w-full">
        <TabsList className="grid w-full grid-cols-4">
          <TabsTrigger value="overview">{t('admin.analytics.overview')}</TabsTrigger>
          <TabsTrigger value="users">{t('admin.analytics.users')}</TabsTrigger>
          <TabsTrigger value="messages">{t('admin.analytics.messages')}</TabsTrigger>
          <TabsTrigger value="performance">{t('admin.analytics.performance')}</TabsTrigger>
        </TabsList>

        {/* EN: Overview tab / VI: Tab tổng quan */}
        <TabsContent value="overview" className="space-y-6">
          {/* EN: Key metrics / VI: Các chỉ số chính */}
          <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={BarChart3}
              variant="metric"
            />
          </div>

          {/* EN: Trends visualization / VI: Visualization xu hướng */}
          <Card>
            <CardHeader>
              <CardTitle>{t('admin.analytics.trends')}</CardTitle>
              <CardDescription>
                {t('admin.analytics.trends')}
              </CardDescription>
            </CardHeader>
            <CardContent>
              <div className="h-[400px] flex items-center justify-center text-text-tertiary">
                {t('common.loading')}
              </div>
            </CardContent>
          </Card>
        </TabsContent>

        {/* EN: Users tab / VI: Tab người dùng */}
        <TabsContent value="users" className="space-y-6">
          <Card>
            <CardHeader>
              <CardTitle>{t('admin.analytics.userAcquisition')}</CardTitle>
              <CardDescription>
                {t('admin.analytics.userAcquisition')}
              </CardDescription>
            </CardHeader>
            <CardContent>
              <div className="h-[400px] flex items-center justify-center text-text-tertiary">
                {t('common.loading')}
              </div>
            </CardContent>
          </Card>

          <Card>
            <CardHeader>
              <CardTitle>{t('admin.analytics.retention')}</CardTitle>
              <CardDescription>
                {t('admin.analytics.retention')}
              </CardDescription>
            </CardHeader>
            <CardContent>
              <div className="h-[400px] flex items-center justify-center text-text-tertiary">
                {t('common.loading')}
              </div>
            </CardContent>
          </Card>
        </TabsContent>

        {/* EN: Messages tab / VI: Tab tin nhắn */}
        <TabsContent value="messages" className="space-y-6">
          <div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
            <AnalyticsCard
              title={t('admin.analytics.totalMessages')}
              value={89234}
              change="+8.2%"
              trend="up"
              icon={MessageSquare}
              variant="metric"
            />
            <AnalyticsCard
              title={t('admin.analytics.avgPerUser')}
              value="12.5"
              change="+2.1%"
              trend="up"
              icon={Users}
              variant="metric"
            />
            <AnalyticsCard
              title={t('admin.analytics.peakActivity')}
              value="14:00"
              change="+1h"
              trend="up"
              icon={Clock}
              variant="metric"
            />
          </div>

          <Card>
            <CardHeader>
              <CardTitle>{t('admin.analytics.peakActivity')}</CardTitle>
              <CardDescription>
                {t('admin.analytics.peakActivity')}
              </CardDescription>
            </CardHeader>
            <CardContent>
              <div className="h-[400px] flex items-center justify-center text-text-tertiary">
                {t('common.loading')}
              </div>
            </CardContent>
          </Card>
        </TabsContent>

        {/* EN: Performance tab / VI: Tab hiệu suất */}
        <TabsContent value="performance" className="space-y-6">
          <div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
            <AnalyticsCard
              title={t('admin.analytics.apiResponseTimes')}
              value="125ms"
              change="-5ms"
              trend="down"
              icon={Clock}
              variant="metric"
            />
            <AnalyticsCard
              title={t('admin.analytics.errorRates')}
              value="0.02%"
              change="-0.01%"
              trend="down"
              icon={AlertCircle}
              variant="metric"
            />
            <AnalyticsCard
              title={t('admin.analytics.uptime')}
              value="99.9%"
              change="+0.1%"
              trend="up"
              icon={CheckCircle2}
              variant="metric"
            />
          </div>

          <Card>
            <CardHeader>
              <CardTitle>{t('admin.analytics.apiResponseTimes')}</CardTitle>
              <CardDescription>
                {t('admin.analytics.apiResponseTimes')}
              </CardDescription>
            </CardHeader>
            <CardContent>
              <div className="h-[400px] flex items-center justify-center text-text-tertiary">
                {t('common.loading')}
              </div>
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>
    </div>
  );
}
