'use client';

import { useEffect, useState } from 'react';
import { Users, UserCheck, UserX, RefreshCw } from 'lucide-react';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import type { PersonalInfoStats as PersonalInfoStatsType } from '../types';

export function PersonalInfoStats() {
  const [stats, setStats] = useState<PersonalInfoStatsType>({
    totalUsers: 0,
    activeUsers: 0,
    inactiveUsers: 0,
    recentlyUpdated: 0
  });
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // 模拟API调用
    const fetchStats = async () => {
      setLoading(true);
      try {
        // 模拟网络延迟
        await new Promise(resolve => setTimeout(resolve, 500));

        // 模拟统计数据
        const mockStats: PersonalInfoStatsType = {
          totalUsers: 1523,
          activeUsers: 1245,
          inactiveUsers: 278,
          recentlyUpdated: 89
        };

        setStats(mockStats);
      } catch (error) {
        console.error('获取统计数据失败:', error);
      } finally {
        setLoading(false);
      }
    };

    fetchStats();
  }, []);

  const handleRefresh = () => {
    // 刷新统计数据
    setLoading(true);
    setTimeout(() => {
      setStats({
        totalUsers: Math.floor(Math.random() * 2000) + 1000,
        activeUsers: Math.floor(Math.random() * 1500) + 800,
        inactiveUsers: Math.floor(Math.random() * 300) + 100,
        recentlyUpdated: Math.floor(Math.random() * 100) + 50
      });
      setLoading(false);
    }, 500);
  };

  return (
    <Card>
      <CardHeader>
        <div className="flex items-center justify-between">
          <CardTitle className="text-lg">个人信息统计</CardTitle>
          <Button
            variant="outline"
            size="sm"
            onClick={handleRefresh}
            disabled={loading}
            className="flex items-center space-x-1"
          >
            <RefreshCw className={`h-4 w-4 ${loading ? 'animate-spin' : ''}`} />
            <span>刷新</span>
          </Button>
        </div>
      </CardHeader>
      <CardContent className="space-y-4">
        <div className="grid grid-cols-2 gap-4">
          <div className="text-center p-4 bg-blue-50 rounded-lg">
            <div className="flex items-center justify-center mb-2">
              <Users className="h-6 w-6 text-blue-600" />
            </div>
            <div className="text-2xl font-bold text-blue-600">
              {loading ? '--' : stats.totalUsers.toLocaleString()}
            </div>
            <div className="text-sm text-blue-600">总用户数</div>
          </div>

          <div className="text-center p-4 bg-green-50 rounded-lg">
            <div className="flex items-center justify-center mb-2">
              <UserCheck className="h-6 w-6 text-green-600" />
            </div>
            <div className="text-2xl font-bold text-green-600">
              {loading ? '--' : stats.activeUsers.toLocaleString()}
            </div>
            <div className="text-sm text-green-600">活跃用户</div>
          </div>

          <div className="text-center p-4 bg-orange-50 rounded-lg">
            <div className="flex items-center justify-center mb-2">
              <UserX className="h-6 w-6 text-orange-600" />
            </div>
            <div className="text-2xl font-bold text-orange-600">
              {loading ? '--' : stats.inactiveUsers.toLocaleString()}
            </div>
            <div className="text-sm text-orange-600">非活跃用户</div>
          </div>

          <div className="text-center p-4 bg-purple-50 rounded-lg">
            <div className="flex items-center justify-center mb-2">
              <RefreshCw className="h-6 w-6 text-purple-600" />
            </div>
            <div className="text-2xl font-bold text-purple-600">
              {loading ? '--' : stats.recentlyUpdated.toLocaleString()}
            </div>
            <div className="text-sm text-purple-600">最近更新</div>
          </div>
        </div>

        <div className="mt-4 p-3 bg-gray-50 rounded">
          <h4 className="font-semibold text-sm mb-2">活跃度分析</h4>
          <div className="space-y-2">
            <div className="flex justify-between text-sm">
              <span>活跃率</span>
              <span className="font-medium">
                {loading ? '--' : `${((stats.activeUsers / stats.totalUsers) * 100).toFixed(1)}%`}
              </span>
            </div>
            <div className="w-full bg-gray-200 rounded-full h-2">
              <div
                className="bg-green-500 h-2 rounded-full transition-all duration-500"
                style={{
                  width: loading ? '0%' : `${(stats.activeUsers / stats.totalUsers) * 100}%`
                }}
              />
            </div>
          </div>
        </div>

        <div className="text-xs text-gray-500 text-center mt-4">
          数据更新时间: {new Date().toLocaleString('zh-CN')}
        </div>
      </CardContent>
    </Card>
  );
}