'use client';

import { Card } from '@/components/ui/card';
import { ExternalDataState } from './externalDataReducer';
import {
  Database,
  Cloud,
  Activity,
  Clock,
  TrendingUp,
  CheckCircle,
} from 'lucide-react';

interface StatisticsOverviewProps {
  state: ExternalDataState;
}

export function StatisticsOverview({ state }: StatisticsOverviewProps) {
  const activeRate = state.statistics.totalSources > 0
    ? (state.statistics.activeSources / state.statistics.totalSources * 100).toFixed(1)
    : '0';

  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
      {/* 总数据源 */}
      <Card className="p-4 bg-blue-50 dark:bg-blue-950 border-blue-200 dark:border-blue-800">
        <div className="flex items-center justify-between">
          <div>
            <p className="text-sm text-blue-600 dark:text-blue-400 font-light">总数据源</p>
            <p className="text-2xl font-bold text-blue-700 dark:text-blue-300">
              {state.statistics.totalSources}
            </p>
          </div>
          <Database className="w-8 h-8 text-blue-500 dark:text-blue-400" />
        </div>
      </Card>

      {/* 活跃数据源 */}
      <Card className="p-4 bg-green-50 dark:bg-green-950 border-green-200 dark:border-green-800">
        <div className="flex items-center justify-between">
          <div>
            <p className="text-sm text-green-600 dark:text-green-400 font-light">活跃数据源</p>
            <p className="text-2xl font-bold text-green-700 dark:text-green-300">
              {state.statistics.activeSources}
            </p>
          </div>
          <CheckCircle className="w-8 h-8 text-green-500 dark:text-green-400" />
        </div>
      </Card>

      {/* 总数据点 */}
      <Card className="p-4 bg-purple-50 dark:bg-purple-950 border-purple-200 dark:border-purple-800">
        <div className="flex items-center justify-between">
          <div>
            <p className="text-sm text-purple-600 dark:text-purple-400 font-light">总数据点</p>
            <p className="text-2xl font-bold text-purple-700 dark:text-purple-300">
              {state.statistics.totalDataPoints.toLocaleString()}
            </p>
          </div>
          <Cloud className="w-8 h-8 text-purple-500 dark:text-purple-400" />
        </div>
      </Card>

      {/* 活跃率 */}
      <Card className="p-4 bg-orange-50 dark:bg-orange-950 border-orange-200 dark:border-orange-800">
        <div className="flex items-center justify-between">
          <div>
            <p className="text-sm text-orange-600 dark:text-orange-400 font-light">活跃率</p>
            <p className="text-2xl font-bold text-orange-700 dark:text-orange-300">
              {activeRate}%
            </p>
          </div>
          <TrendingUp className="w-8 h-8 text-orange-500 dark:text-orange-400" />
        </div>
      </Card>
    </div>
  );
}