'use client';

import { useEffect, useState } from 'react';
import { Card, CardContent } from '@/components/ui/card';
import { Upload, Download, Users, Clock } from 'lucide-react';

export function Stats() {
  const [stats, setStats] = useState({
    totalFiles: 0,
    totalSize: 0,
    activeUsers: 0,
    uptime: 0
  });

  useEffect(() => {
    // Simulate real-time stats
    const interval = setInterval(() => {
      setStats(prev => ({
        totalFiles: prev.totalFiles + Math.floor(Math.random() * 3),
        totalSize: prev.totalSize + Math.floor(Math.random() * 50),
        activeUsers: 1247 + Math.floor(Math.random() * 100),
        uptime: 99.9
      }));
    }, 3000);

    // Initial stats
    setStats({
      totalFiles: 15420,
      totalSize: 2847,
      activeUsers: 1247,
      uptime: 99.9
    });

    return () => clearInterval(interval);
  }, []);

  const formatFileSize = (bytes: number) => {
    if (bytes >= 1024) return `${(bytes / 1024).toFixed(1)}TB`;
    return `${bytes}GB`;
  };

  return (
    <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
      <Card className="bg-white/60 dark:bg-slate-800/60 backdrop-blur-sm border-white/20 dark:border-slate-700/20 hover:bg-white/80 dark:hover:bg-slate-800/80 transition-all">
        <CardContent className="p-4">
          <div className="flex items-center space-x-2">
            <Upload className="h-4 w-4 text-blue-500" />
            <div>
              <p className="text-2xl font-bold text-slate-900 dark:text-slate-100">
                {stats.totalFiles.toLocaleString()}
              </p>
              <p className="text-xs text-slate-600 dark:text-slate-400">Files Uploaded</p>
            </div>
          </div>
        </CardContent>
      </Card>

      <Card className="bg-white/60 dark:bg-slate-800/60 backdrop-blur-sm border-white/20 dark:border-slate-700/20 hover:bg-white/80 dark:hover:bg-slate-800/80 transition-all">
        <CardContent className="p-4">
          <div className="flex items-center space-x-2">
            <Download className="h-4 w-4 text-green-500" />
            <div>
              <p className="text-2xl font-bold text-slate-900 dark:text-slate-100">
                {formatFileSize(stats.totalSize)}
              </p>
              <p className="text-xs text-slate-600 dark:text-slate-400">Data Transferred</p>
            </div>
          </div>
        </CardContent>
      </Card>

      <Card className="bg-white/60 dark:bg-slate-800/60 backdrop-blur-sm border-white/20 dark:border-slate-700/20 hover:bg-white/80 dark:hover:bg-slate-800/80 transition-all">
        <CardContent className="p-4">
          <div className="flex items-center space-x-2">
            <Users className="h-4 w-4 text-purple-500" />
            <div>
              <p className="text-2xl font-bold text-slate-900 dark:text-slate-100">
                {stats.activeUsers.toLocaleString()}
              </p>
              <p className="text-xs text-slate-600 dark:text-slate-400">Active Users</p>
            </div>
          </div>
        </CardContent>
      </Card>

      <Card className="bg-white/60 dark:bg-slate-800/60 backdrop-blur-sm border-white/20 dark:border-slate-700/20 hover:bg-white/80 dark:hover:bg-slate-800/80 transition-all">
        <CardContent className="p-4">
          <div className="flex items-center space-x-2">
            <Clock className="h-4 w-4 text-orange-500" />
            <div>
              <p className="text-2xl font-bold text-slate-900 dark:text-slate-100">
                {stats.uptime}%
              </p>
              <p className="text-xs text-slate-600 dark:text-slate-400">Uptime</p>
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}