'use client';

import { useState, useEffect, useCallback } from 'react';
import { useTranslation } from '@/hooks/useTranslation';
import { usePermissions } from '@/hooks/usePermissions';
import { PageState } from '@/components/common/feedback/PageState';
import {
  BarChart3,
  RefreshCw,
  AlertCircle,
  TrendingUp,
  Server,
  Globe,
  Activity,
} from 'lucide-react';
import {
  getLogStats,
  LogStats,
  LogStatsParams,
  formatDuration,
  getLogLevelColor,
  LogLevel,
} from '@/services/api/logs';

/**
 * 统计分析页面
 * 日志统计和趋势分析
 */
export default function StatisticsPage() {
  const { t } = useTranslation();
  const { hasPermission, isAdmin } = usePermissions();
  
  const [isLoading, setIsLoading] = useState(true);
  const [stats, setStats] = useState<LogStats | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [timeRange, setTimeRange] = useState('7d');
  const [groupBy, setGroupBy] = useState<'hour' | 'day' | 'service' | 'level' | 'region'>('day');

  const canAccess = isAdmin || hasPermission('log:read');

  // 时间范围选项
  const timeRangeOptions = [
    { value: '24h', label: t.logs.common.timeRange.last24h },
    { value: '7d', label: t.logs.common.timeRange.last7d },
    { value: '30d', label: t.logs.common.timeRange.last30d },
  ];

  // 分组选项
  const groupByOptions = [
    { value: 'hour', label: t.logs.statistics.groupByOptions.hour },
    { value: 'day', label: t.logs.statistics.groupByOptions.day },
    { value: 'service', label: t.logs.statistics.groupByOptions.service },
    { value: 'level', label: t.logs.statistics.groupByOptions.level },
    { value: 'region', label: t.logs.statistics.groupByOptions.region },
  ];

  // 计算时间范围
  const getTimeRange = (range: string) => {
    const now = new Date();
    let startTime: Date;
    
    switch (range) {
      case '24h':
        startTime = new Date(now.getTime() - 24 * 60 * 60 * 1000);
        break;
      case '7d':
        startTime = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000);
        break;
      case '30d':
        startTime = new Date(now.getTime() - 30 * 24 * 60 * 60 * 1000);
        break;
      default:
        startTime = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000);
    }
    
    return {
      startTime: startTime.toISOString(),
      endTime: now.toISOString(),
    };
  };

  // 加载统计数据
  const loadStats = useCallback(async () => {
    if (!canAccess) return;
    
    setIsLoading(true);
    setError(null);
    
    try {
      const { startTime, endTime } = getTimeRange(timeRange);
      const params: LogStatsParams = {
        startTime,
        endTime,
        groupBy,
      };
      
      const response = await getLogStats(params);
      setStats(response);
    } catch (err) {
      console.error('Failed to load stats:', err);
      setError(t.logs.error.loadFailed);
    } finally {
      setIsLoading(false);
    }
  }, [canAccess, timeRange, groupBy, t]);

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

  // 无权限提示
  if (!canAccess) {
    return (
      <div className="p-6 flex items-center justify-center">
        <PageState
          variant="error"
          title={t.common.permissionDenied}
          description={t.common.permissionDeniedDetail}
          layout="center"
          className="mx-auto w-full max-w-2xl border-0 bg-transparent"
        />
      </div>
    );
  }

  return (
    <div className="h-full flex flex-col bg-[#f7f8fa]">
      {/* 主内容区域 - 可滚动 */}
      <div className="flex-1 overflow-y-auto p-6">
        <div className="max-w-[1400px] mx-auto space-y-4">
          {/* 筛选栏 */}
          <div className="bg-white rounded-lg border border-[#e5e6eb] p-4 shadow-sm">
            <div className="flex flex-wrap gap-4">
              {/* 时间范围 */}
              <div>
                <label className="block text-xs text-[#646a73] mb-1.5">
                  {t.logs.statistics.period}
                </label>
                <select
                  value={timeRange}
                  onChange={(e) => setTimeRange(e.target.value)}
                  className="h-8 px-3 text-sm bg-[#f2f3f5] border-0 rounded-md text-[#1f2329] focus:bg-white focus:ring-1 focus:ring-[#3370ff] transition-all"
                >
                  {timeRangeOptions.map(opt => (
                    <option key={opt.value} value={opt.value}>{opt.label}</option>
                  ))}
                </select>
              </div>

              {/* 分组方式 */}
              <div>
                <label className="block text-xs text-[#646a73] mb-1.5">
                  {t.logs.statistics.groupBy}
                </label>
                <select
                  value={groupBy}
                  onChange={(e) => setGroupBy(e.target.value as typeof groupBy)}
                  className="h-8 px-3 text-sm bg-[#f2f3f5] border-0 rounded-md text-[#1f2329] focus:bg-white focus:ring-1 focus:ring-[#3370ff] transition-all"
                >
                  {groupByOptions.map(opt => (
                    <option key={opt.value} value={opt.value}>{opt.label}</option>
                  ))}
                </select>
              </div>
            </div>
          </div>

          {/* 错误提示 */}
          {error && (
            <div className="bg-[#fff3f2] border border-[#ffccc7] rounded-lg p-3">
              <div className="flex items-center gap-2">
                <AlertCircle className="w-4 h-4 text-[#f54a45] flex-shrink-0" />
                <span className="text-sm text-[#f54a45]">{error}</span>
              </div>
            </div>
          )}

          {/* 加载中 */}
          {isLoading && (
            <div className="flex items-center justify-center py-12">
              <RefreshCw className="w-8 h-8 text-[#8f959e] animate-spin" />
            </div>
          )}

          {/* 统计内容 */}
          {stats && !isLoading && (
            <div className="space-y-4">
              {/* 概览统计 */}
              <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
                <div className="bg-white rounded-lg border border-[#e5e6eb] p-4 shadow-sm">
                  <p className="text-xs text-[#646a73] mb-1">{t.logs.overview.totalRequests}</p>
                  <p className="text-2xl font-semibold text-[#1f2329]">
                    {stats.summary.totalRequests.toLocaleString()}
                  </p>
                </div>
                <div className="bg-white rounded-lg border border-[#e5e6eb] p-4 shadow-sm">
                  <p className="text-xs text-[#646a73] mb-1">{t.logs.overview.errorCount}</p>
                  <p className="text-2xl font-semibold text-[#f54a45]">
                    {stats.summary.errorCount.toLocaleString()}
                  </p>
                </div>
                <div className="bg-white rounded-lg border border-[#e5e6eb] p-4 shadow-sm">
                  <p className="text-xs text-[#646a73] mb-1">{t.logs.overview.warnCount}</p>
                  <p className="text-2xl font-semibold text-[#ff7d00]">
                    {stats.summary.warnCount.toLocaleString()}
                  </p>
                </div>
                <div className="bg-white rounded-lg border border-[#e5e6eb] p-4 shadow-sm">
                  <p className="text-xs text-[#646a73] mb-1">{t.logs.overview.avgDuration}</p>
                  <p className="text-2xl font-semibold text-[#1f2329]">
                    {formatDuration(stats.summary.avgDuration)}
                  </p>
                </div>
                <div className="bg-white rounded-lg border border-[#e5e6eb] p-4 shadow-sm">
                  <p className="text-xs text-[#646a73] mb-1">{t.logs.overview.p95Duration}</p>
                  <p className="text-2xl font-semibold text-[#1f2329]">
                    {formatDuration(stats.summary.p95Duration)}
                  </p>
                </div>
                <div className="bg-white rounded-lg border border-[#e5e6eb] p-4 shadow-sm">
                  <p className="text-xs text-[#646a73] mb-1">{t.logs.overview.slowRequestCount}</p>
                  <p className="text-2xl font-semibold text-[#ff7d00]">
                    {stats.summary.slowRequestCount.toLocaleString()}
                  </p>
                </div>
              </div>

              {/* 趋势图表 */}
              <div className="bg-white rounded-lg border border-[#e5e6eb] p-4 shadow-sm">
                <div className="flex items-center gap-2 mb-4">
                  <TrendingUp className="w-4 h-4 text-[#3370ff]" />
                  <h3 className="text-sm font-medium text-[#1f2329]">
                    {t.logs.statistics.charts.requestTrend}
                  </h3>
                </div>
                {stats.byHour && stats.byHour.length > 0 ? (
                  <div className="space-y-3">
                    {/* 简单的柱状图 */}
                    <div className="flex items-end justify-between h-40 gap-1">
                      {stats.byHour.map((item, index) => {
                        const maxCount = Math.max(...stats.byHour.map(h => h.count));
                        const height = maxCount > 0 ? (item.count / maxCount) * 100 : 0;
                        return (
                          <div key={index} className="flex-1 flex flex-col items-center group">
                            <div
                              className="w-full bg-[#3370ff] rounded-t transition-all hover:opacity-80"
                              style={{ height: `${height}%`, minHeight: item.count > 0 ? '4px' : '0' }}
                              title={`${item.hour}: ${item.count.toLocaleString()} ${t.logs.overview.totalRequests} · ${t.logs.overview.errorRate} ${(item.errorRate * 100).toFixed(2)}%`}
                            />
                          </div>
                        );
                      })}
                    </div>
                    <div className="flex justify-between text-xs text-[#8f959e]">
                      <span>{stats.byHour[0]?.hour}</span>
                      <span>{stats.byHour[Math.floor(stats.byHour.length / 2)]?.hour}</span>
                      <span>{stats.byHour[stats.byHour.length - 1]?.hour}</span>
                    </div>
                  </div>
                ) : (
                  <div className="py-8 flex items-center justify-center">
                    <PageState
                      variant="empty"
                      title={t.common.noData}
                      layout="center"
                      className="border-0 bg-transparent"
                    />
                  </div>
                )}
              </div>

              {/* 分布图表 */}
              <div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
                {/* 级别分布 */}
                <div className="bg-white rounded-lg border border-[#e5e6eb] p-4 shadow-sm">
                  <div className="flex items-center gap-2 mb-4">
                    <Activity className="w-4 h-4 text-[#3370ff]" />
                    <h3 className="text-sm font-medium text-[#1f2329]">
                      {t.logs.statistics.charts.levelDistribution}
                    </h3>
                  </div>
                  {stats.byLevel && Object.keys(stats.byLevel).length > 0 ? (
                    <div className="space-y-3">
                      {Object.entries(stats.byLevel)
                        .sort(([, a], [, b]) => b - a)
                        .map(([level, count]) => {
                          const total = Object.values(stats.byLevel).reduce((a, b) => a + b, 0);
                          const percentage = ((count / total) * 100).toFixed(1);
                          const colors = getLogLevelColor(level as LogLevel);
                          return (
                            <div key={level}>
                              <div className="flex justify-between text-sm mb-1.5">
                                <span className={`px-2 py-0.5 rounded text-xs font-medium ${colors.bg} ${colors.text}`}>
                                  {level}
                                </span>
                                <span className="text-[#646a73] text-xs">{count.toLocaleString()} ({percentage}%)</span>
                              </div>
                              <div className="w-full bg-[#f2f3f5] rounded-full h-1.5">
                                <div
                                  className={`h-1.5 rounded-full transition-all ${
                                    level === 'ERROR' ? 'bg-[#f54a45]' :
                                    level === 'WARN' ? 'bg-[#ff7d00]' :
                                    level === 'INFO' ? 'bg-[#3370ff]' : 'bg-[#646a73]'
                                  }`}
                                  style={{ width: `${percentage}%` }}
                                />
                              </div>
                            </div>
                          );
                        })}
                    </div>
                  ) : (
                    <div className="py-8 flex items-center justify-center">
                      <PageState
                        variant="empty"
                        title={t.common.noData}
                        layout="center"
                        className="border-0 bg-transparent"
                      />
                    </div>
                  )}
                </div>

                {/* 服务分布 */}
                <div className="bg-white rounded-lg border border-[#e5e6eb] p-4 shadow-sm">
                  <div className="flex items-center gap-2 mb-4">
                    <Server className="w-4 h-4 text-[#722ed1]" />
                    <h3 className="text-sm font-medium text-[#1f2329]">
                      {t.logs.statistics.charts.serviceDistribution}
                    </h3>
                  </div>
                  {stats.byService && Object.keys(stats.byService).length > 0 ? (
                    <div className="space-y-3">
                      {Object.entries(stats.byService)
                        .sort(([, a], [, b]) => b - a)
                        .slice(0, 5)
                        .map(([service, count]) => {
                          const total = Object.values(stats.byService).reduce((a, b) => a + b, 0);
                          const percentage = ((count / total) * 100).toFixed(1);
                          return (
                            <div key={service}>
                              <div className="flex justify-between text-sm mb-1.5">
                                <span className="text-[#1f2329] text-xs">{service}</span>
                                <span className="text-[#646a73] text-xs">{count.toLocaleString()} ({percentage}%)</span>
                              </div>
                              <div className="w-full bg-[#f2f3f5] rounded-full h-1.5">
                                <div
                                  className="bg-[#722ed1] h-1.5 rounded-full transition-all"
                                  style={{ width: `${percentage}%` }}
                                />
                              </div>
                            </div>
                          );
                        })}
                    </div>
                  ) : (
                    <div className="py-8 flex items-center justify-center">
                      <PageState
                        variant="empty"
                        title={t.common.noData}
                        layout="center"
                        className="border-0 bg-transparent"
                      />
                    </div>
                  )}
                </div>

                {/* 区域分布 */}
                <div className="bg-white rounded-lg border border-[#e5e6eb] p-4 shadow-sm">
                  <div className="flex items-center gap-2 mb-4">
                    <Globe className="w-4 h-4 text-[#00b42a]" />
                    <h3 className="text-sm font-medium text-[#1f2329]">
                      {t.logs.statistics.charts.regionDistribution}
                    </h3>
                  </div>
                  {stats.byRegion && Object.keys(stats.byRegion).length > 0 ? (
                    <div className="space-y-3">
                      {Object.entries(stats.byRegion)
                        .sort(([, a], [, b]) => b - a)
                        .map(([region, count]) => {
                          const total = Object.values(stats.byRegion).reduce((a, b) => a + b, 0);
                          const percentage = ((count / total) * 100).toFixed(1);
                          const regionLabel = t.logs?.region?.[region as keyof typeof t.logs.region] || region;
                          return (
                            <div key={region}>
                              <div className="flex justify-between text-sm mb-1.5">
                                <span className="text-[#1f2329] text-xs">{regionLabel}</span>
                                <span className="text-[#646a73] text-xs">{count.toLocaleString()} ({percentage}%)</span>
                              </div>
                              <div className="w-full bg-[#f2f3f5] rounded-full h-1.5">
                                <div
                                  className="bg-[#00b42a] h-1.5 rounded-full transition-all"
                                  style={{ width: `${percentage}%` }}
                                />
                              </div>
                            </div>
                          );
                        })}
                    </div>
                  ) : (
                    <div className="py-8 flex items-center justify-center">
                      <PageState
                        variant="empty"
                        title={t.common.noData}
                        layout="center"
                        className="border-0 bg-transparent"
                      />
                    </div>
                  )}
                </div>
              </div>

              {/* 磁盘使用 */}
              {stats.diskUsage && (
                <div className="bg-white rounded-lg border border-[#e5e6eb] p-4 shadow-sm">
                  <div className="flex items-center gap-2 mb-4">
                    <BarChart3 className="w-4 h-4 text-[#ff7d00]" />
                    <h3 className="text-sm font-medium text-[#1f2329]">
                      {t.logs.overview.diskUsage}
                    </h3>
                  </div>
                  <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
                    <div className="text-center p-3 bg-[#f7f8fa] rounded-lg">
                      <p className="text-xs text-[#646a73] mb-1">{t.logs.overview.total}</p>
                      <p className="text-lg font-semibold text-[#1f2329]">{stats.diskUsage.total}</p>
                    </div>
                    <div className="text-center p-3 bg-[#f7f8fa] rounded-lg">
                      <p className="text-xs text-[#646a73] mb-1">{t.logs.overview.used}</p>
                      <p className="text-lg font-semibold text-[#1f2329]">{stats.diskUsage.used}</p>
                    </div>
                    <div className="text-center p-3 bg-[#f7f8fa] rounded-lg col-span-2">
                      <p className="text-xs text-[#646a73] mb-2">{t.logs.overview.usageRate}</p>
                      <div className="w-full bg-[#e5e6eb] rounded-full h-3">
                        <div
                          className={`h-3 rounded-full transition-all ${
                            stats.diskUsage.usedPercent > 90 ? 'bg-[#f54a45]' :
                            stats.diskUsage.usedPercent > 80 ? 'bg-[#ff7d00]' : 'bg-[#00b42a]'
                          }`}
                          style={{ width: `${stats.diskUsage.usedPercent}%` }}
                        />
                      </div>
                      <p className={`text-lg font-semibold mt-1 ${
                        stats.diskUsage.usedPercent > 90 ? 'text-[#f54a45]' :
                        stats.diskUsage.usedPercent > 80 ? 'text-[#ff7d00]' : 'text-[#00b42a]'
                      }`}>
                        {stats.diskUsage.usedPercent}%
                      </p>
                    </div>
                  </div>
                  {stats.diskUsage.byType && Object.keys(stats.diskUsage.byType).length > 0 && (
                    <div className="mt-4 grid grid-cols-3 gap-3">
                      {Object.entries(stats.diskUsage.byType).map(([type, size]) => (
                        <div key={type} className="text-center p-3 bg-[#f7f8fa] rounded">
                          <p className="text-xs text-[#646a73] capitalize mb-1">{type}</p>
                          <p className="text-base font-semibold text-[#1f2329]">{size}</p>
                        </div>
                      ))}
                    </div>
                  )}
                </div>
              )}
            </div>
          )}
        </div>
      </div>
    </div>
  );
}