import React, { useState, useEffect } from 'react';
import { Flame, Users, Star, Zap, Trophy, Target, Clock, TrendingUp, DollarSign, Activity, Eye, Settings, Crown, Briefcase } from 'lucide-react';

const ExecutiveDashboard = () => {
  const [currentTime, setCurrentTime] = useState(new Date());
  const [selectedView, setSelectedView] = useState('overview');
  const [totalRevenue, setTotalRevenue] = useState(284750);
  const [showCelebration, setShowCelebration] = useState(false);

  useEffect(() => {
    const timer = setInterval(() => setCurrentTime(new Date()), 1000);
    return () => clearInterval(timer);
  }, []);

  const teamStats = {
    alex: {
      name: "Alex Johnson",
      avatar: "👨‍💻",
      title: "Senior Dev",
      level: 12,
      score: 2847,
      streak: 7,
      completedToday: 8,
      efficiency: 92,
      status: "active",
      currentTask: "Client Proposal",
      revenueGenerated: 45200,
      rank: 3
    },
    sarah: {
      name: "Sarah Chen",
      avatar: "👩‍🎨",
      title: "Design Lead",
      level: 15,
      score: 3421,
      streak: 12,
      completedToday: 12,
      efficiency: 98,
      status: "active",
      currentTask: "UI Redesign",
      revenueGenerated: 67800,
      rank: 1
    },
    mike: {
      name: "Ilan Sadon",
      avatar: "👨‍💼",
      title: "Product Manager",
      level: 10,
      score: 2156,
      streak: 4,
      completedToday: 6,
      efficiency: 78,
      status: "break",
      currentTask: "Sprint Planning",
      revenueGenerated: 38900,
      rank: 7
    },
    emma: {
      name: "Julie Kendra",
      avatar: "👩‍💻",
      title: "Backend Dev",
      level: 11,
      score: 2654,
      streak: 9,
      completedToday: 7,
      efficiency: 89,
      status: "active",
      currentTask: "API Optimization",
      revenueGenerated: 41250,
      rank: 4
    },
    david: {
      name: "David Kim",
      avatar: "👨‍🔬",
      title: "Data Scientist",
      level: 13,
      score: 2983,
      streak: 6,
      completedToday: 9,
      efficiency: 94,
      status: "active",
      currentTask: "ML Model Training",
      revenueGenerated: 52600,
      rank: 2
    }
  };

  const companyMetrics = {
    totalEmployees: Object.keys(teamStats).length,
    totalTasksCompleted: Object.values(teamStats).reduce((sum, emp) => sum + emp.completedToday, 0),
    averageEfficiency: Math.round(Object.values(teamStats).reduce((sum, emp) => sum + emp.efficiency, 0) / Object.keys(teamStats).length),
    totalRevenue: totalRevenue,
    friesProgress: 73,
    activeProjects: 12,
    completedProjects: 47,
    teamMorale: 87
  };

  const recentActivities = [
    { id: 1, user: "Sarah", action: "completed", task: "Brand Guidelines", value: "+$2,400", time: "2m ago", type: "success" },
    { id: 2, user: "Alex", action: "started", task: "Client Proposal", value: "Epic Task", time: "5m ago", type: "info" },
    { id: 3, user: "David", action: "achieved", task: "Data Wizard Badge", value: "+500 XP", time: "8m ago", type: "achievement" },
    { id: 4, user: "Emma", action: "completed", task: "API Optimization", value: "+$1,800", time: "12m ago", type: "success" },
    { id: 5, user: "Mike", action: "passed", task: "Team Project Alpha", value: "to Sarah", time: "15m ago", type: "collaboration" }
  ];

  const getStatusColor = (status) => {
    switch(status) {
      case 'active': return 'bg-green-500';
      case 'break': return 'bg-yellow-500';
      case 'offline': return 'bg-gray-500';
      default: return 'bg-blue-500';
    }
  };

  const getActivityIcon = (type) => {
    switch(type) {
      case 'success': return '💰';
      case 'achievement': return '🏆';
      case 'collaboration': return '🤝';
      default: return '⚡';
    }
  };

  const EmployeeCard = ({ employee }) => (
    <div className="bg-gradient-to-br from-white to-gray-50 rounded-2xl p-6 shadow-lg hover:shadow-xl transition-all duration-300 border border-gray-100">
      <div className="flex items-start justify-between mb-4">
        <div className="flex items-center gap-3">
          <div className="relative">
            <div className="text-3xl">{employee.avatar}</div>
            <div className={`absolute -bottom-1 -right-1 w-4 h-4 ${getStatusColor(employee.status)} rounded-full border-2 border-white`}></div>
          </div>
          <div>
            <h3 className="font-bold text-gray-800">{employee.name}</h3>
            <p className="text-sm text-gray-600">{employee.title}</p>
          </div>
        </div>
        <div className="text-right">
          <div className="text-lg font-bold text-purple-600">#{employee.rank}</div>
          <div className="text-xs text-gray-500">Rank</div>
        </div>
      </div>

      <div className="space-y-3">
        <div className="flex justify-between items-center">
          <span className="text-sm text-gray-600">Efficiency</span>
          <div className="flex items-center gap-2">
            <div className="w-20 h-2 bg-gray-200 rounded-full">
              <div 
                className={`h-full rounded-full ${
                  employee.efficiency >= 90 ? 'bg-green-500' : 
                  employee.efficiency >= 75 ? 'bg-yellow-500' : 'bg-red-500'
                }`}
                style={{ width: `${employee.efficiency}%` }}
              />
            </div>
            <span className="text-sm font-bold">{employee.efficiency}%</span>
          </div>
        </div>

        <div className="grid grid-cols-3 gap-2 text-center">
          <div className="bg-blue-50 rounded-lg p-2">
            <div className="text-lg font-bold text-blue-600">{employee.completedToday}</div>
            <div className="text-xs text-blue-800">Today</div>
          </div>
          <div className="bg-yellow-50 rounded-lg p-2">
            <div className="text-lg font-bold text-yellow-600">{employee.streak}</div>
            <div className="text-xs text-yellow-800">Streak</div>
          </div>
          <div className="bg-green-50 rounded-lg p-2">
            <div className="text-lg font-bold text-green-600">Lv.{employee.level}</div>
            <div className="text-xs text-green-800">Level</div>
          </div>
        </div>

        <div className="border-t pt-3">
          <div className="text-xs text-gray-500 mb-1">Current Task</div>
          <div className="font-medium text-gray-800">{employee.currentTask}</div>
          <div className="text-sm font-bold text-green-600 mt-1">
            Revenue: ${employee.revenueGenerated.toLocaleString()}
          </div>
        </div>
      </div>
    </div>
  );

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900">
      {/* Celebration Overlay */}
      {showCelebration && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
          <div className="bg-white rounded-3xl p-8 text-center animate-bounce">
            <div className="text-6xl mb-4">👑</div>
            <h2 className="text-3xl font-bold text-purple-600 mb-2">COMPANY MILESTONE!</h2>
            <p className="text-xl text-gray-600">$250K Revenue Achieved!</p>
          </div>
        </div>
      )}

      {/* Floating particles */}
      <div className="absolute inset-0 overflow-hidden">
        {[...Array(15)].map((_, i) => (
          <div
            key={i}
            className="absolute w-1 h-1 bg-purple-300 rounded-full animate-pulse opacity-30"
            style={{
              left: `${Math.random() * 100}%`,
              top: `${Math.random() * 100}%`,
              animationDelay: `${Math.random() * 3}s`,
              animationDuration: `${3 + Math.random() * 4}s`
            }}
          />
        ))}
      </div>

      {/* Executive Header */}
      <div className="relative z-10 p-6">
        <div className="bg-black bg-opacity-30 backdrop-blur-sm rounded-2xl p-6 border border-white border-opacity-10">
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-4">
              <div className="w-16 h-16 bg-gradient-to-br from-yellow-500 to-orange-500 rounded-full flex items-center justify-center">
                <Crown className="w-8 h-8 text-white" />
              </div>
              <div>
                <h1 className="text-3xl font-bold text-white">SUNLAB Executive</h1>
                <p className="text-yellow-300">Company Performance Dashboard</p>
              </div>
            </div>

            <div className="flex items-center gap-6">
              <div className="text-center">
                <div className="text-2xl font-bold text-white">${companyMetrics.totalRevenue.toLocaleString()}</div>
                <div className="text-yellow-300 text-sm">Total Revenue</div>
              </div>
              <div className="text-center">
                <div className="text-2xl font-bold text-white">{companyMetrics.friesProgress}%</div>
                <div className="text-yellow-300 text-sm">Fries Progress</div>
              </div>
              <div className="text-center">
                <div className="text-2xl font-bold text-white">{companyMetrics.teamMorale}%</div>
                <div className="text-yellow-300 text-sm">Team Morale</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Navigation */}
      <div className="px-6 mb-6">
        <div className="flex gap-2 bg-black bg-opacity-20 rounded-xl p-2">
          {[
            { id: 'overview', label: 'Overview 📊', icon: Activity },
            { id: 'team', label: 'Team Performance 👥', icon: Users },
            { id: 'revenue', label: 'Revenue Analytics 💰', icon: DollarSign },
            { id: 'live', label: 'Live Activity 🔴', icon: Eye }
          ].map((tab) => (
            <button
              key={tab.id}
              onClick={() => setSelectedView(tab.id)}
              className={`flex items-center gap-2 px-4 py-3 rounded-lg font-medium transition-all ${
                selectedView === tab.id
                  ? 'bg-white bg-opacity-20 text-white shadow-lg'
                  : 'text-gray-300 hover:text-white hover:bg-white hover:bg-opacity-10'
              }`}
            >
              <tab.icon className="w-4 h-4" />
              {tab.label}
            </button>
          ))}
        </div>
      </div>

      {/* Main Content */}
      <div className="px-6 pb-6">
        {selectedView === 'overview' && (
          <div className="space-y-6">
            {/* Key Metrics */}
            <div className="grid grid-cols-1 md:grid-cols-4 gap-6">
              <div className="bg-gradient-to-br from-blue-500 to-cyan-500 rounded-2xl p-6 text-white">
                <div className="flex items-center justify-between mb-4">
                  <Users className="w-8 h-8 opacity-80" />
                  <div className="text-3xl font-bold">{companyMetrics.totalEmployees}</div>
                </div>
                <div className="text-blue-100">Active Employees</div>
                <div className="text-sm mt-2 opacity-90">All hands on deck! 🚀</div>
              </div>

              <div className="bg-gradient-to-br from-green-500 to-emerald-500 rounded-2xl p-6 text-white">
                <div className="flex items-center justify-between mb-4">
                  <Target className="w-8 h-8 opacity-80" />
                  <div className="text-3xl font-bold">{companyMetrics.totalTasksCompleted}</div>
                </div>
                <div className="text-green-100">Tasks Completed Today</div>
                <div className="text-sm mt-2 opacity-90">Productivity on fire! 🔥</div>
              </div>

              <div className="bg-gradient-to-br from-purple-500 to-pink-500 rounded-2xl p-6 text-white">
                <div className="flex items-center justify-between mb-4">
                  <Zap className="w-8 h-8 opacity-80" />
                  <div className="text-3xl font-bold">{companyMetrics.averageEfficiency}%</div>
                </div>
                <div className="text-purple-100">Average Efficiency</div>
                <div className="text-sm mt-2 opacity-90">Team is crushing it! ⚡</div>
              </div>

              <div className="bg-gradient-to-br from-yellow-500 to-orange-500 rounded-2xl p-6 text-white">
                <div className="flex items-center justify-between mb-4">
                  <Trophy className="w-8 h-8 opacity-80" />
                  <div className="text-3xl font-bold">{companyMetrics.activeProjects}</div>
                </div>
                <div className="text-yellow-100">Active Projects</div>
                <div className="text-sm mt-2 opacity-90">Innovation never stops! 🚀</div>
              </div>
            </div>

            {/* Company Fries Progress */}
            <div className="bg-black bg-opacity-30 backdrop-blur-sm rounded-2xl p-8 border border-white border-opacity-10">
              <div className="text-center mb-6">
                <h2 className="text-3xl font-bold text-white mb-2">🍟 Company Fries Kitchen</h2>
                <p className="text-gray-300">Converting team efforts into golden profits!</p>
              </div>
              
              <div className="relative w-full h-8 bg-gray-700 rounded-full mb-6 overflow-hidden">
                <div 
                  className="h-full bg-gradient-to-r from-yellow-400 via-orange-500 to-red-500 rounded-full transition-all duration-1000 relative"
                  style={{ width: `${companyMetrics.friesProgress}%` }}
                >
                  <div className="absolute inset-0 bg-white bg-opacity-20 animate-pulse"></div>
                </div>
              </div>
              
              <div className="text-center mb-6">
                <div className="text-4xl font-bold text-orange-400 mb-2">{companyMetrics.friesProgress}%</div>
                <p className="text-gray-300">Almost ready to serve the next milestone! 🔥</p>
              </div>

              <div className="grid grid-cols-3 gap-6">
                <div className="text-center p-4 bg-green-900 bg-opacity-50 rounded-xl">
                  <div className="text-2xl font-bold text-green-400">{companyMetrics.completedProjects}</div>
                  <div className="text-green-300 text-sm">Projects Completed</div>
                </div>
                <div className="text-center p-4 bg-orange-900 bg-opacity-50 rounded-xl">
                  <div className="text-2xl font-bold text-orange-400">{companyMetrics.activeProjects}</div>
                  <div className="text-orange-300 text-sm">Currently Cooking</div>
                </div>
                <div className="text-center p-4 bg-purple-900 bg-opacity-50 rounded-xl">
                  <div className="text-2xl font-bold text-purple-400">${(companyMetrics.totalRevenue / 1000).toFixed(0)}K</div>
                  <div className="text-purple-300 text-sm">Revenue Generated</div>
                </div>
              </div>
            </div>
          </div>
        )}

        {selectedView === 'team' && (
          <div className="space-y-6">
            <div className="flex items-center justify-between">
              <h2 className="text-2xl font-bold text-white">Team Performance</h2>
              <div className="flex gap-2">
                <button className="bg-white bg-opacity-10 text-white px-4 py-2 rounded-lg hover:bg-opacity-20 transition-all">
                  Sort by Rank
                </button>
                <button className="bg-white bg-opacity-10 text-white px-4 py-2 rounded-lg hover:bg-opacity-20 transition-all">
                  Sort by Revenue
                </button>
              </div>
            </div>
            
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
              {Object.values(teamStats).sort((a, b) => a.rank - b.rank).map((employee, idx) => (
                <EmployeeCard key={idx} employee={employee} />
              ))}
            </div>
          </div>
        )}

        {selectedView === 'live' && (
          <div className="space-y-6">
            <div className="flex items-center justify-between">
              <h2 className="text-2xl font-bold text-white flex items-center gap-2">
                <div className="w-3 h-3 bg-red-500 rounded-full animate-pulse"></div>
                Live Activity Feed
              </h2>
              <div className="text-gray-300 text-sm">
                Last updated: {currentTime.toLocaleTimeString()}
              </div>
            </div>

            <div className="bg-black bg-opacity-30 backdrop-blur-sm rounded-2xl p-6 border border-white border-opacity-10">
              <div className="space-y-4">
                {recentActivities.map((activity) => (
                  <div key={activity.id} className="flex items-center gap-4 p-4 bg-white bg-opacity-5 rounded-xl hover:bg-opacity-10 transition-all">
                    <div className="text-2xl">{getActivityIcon(activity.type)}</div>
                    <div className="flex-1">
                      <div className="text-white">
                        <span className="font-bold">{activity.user}</span> {activity.action} <span className="font-medium">{activity.task}</span>
                      </div>
                      <div className="text-gray-400 text-sm">{activity.time}</div>
                    </div>
                    <div className={`px-3 py-1 rounded-full text-sm font-medium ${
                      activity.type === 'success' ? 'bg-green-500 bg-opacity-20 text-green-300' :
                      activity.type === 'achievement' ? 'bg-purple-500 bg-opacity-20 text-purple-300' :
                      'bg-blue-500 bg-opacity-20 text-blue-300'
                    }`}>
                      {activity.value}
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        )}

        {selectedView === 'revenue' && (
          <div className="space-y-6">
            <h2 className="text-2xl font-bold text-white">Revenue Analytics</h2>
            
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div className="bg-black bg-opacity-30 backdrop-blur-sm rounded-2xl p-6 border border-white border-opacity-10">
                <h3 className="text-xl font-bold text-white mb-4">Revenue by Employee</h3>
                <div className="space-y-3">
                  {Object.values(teamStats).sort((a, b) => b.revenueGenerated - a.revenueGenerated).map((emp, idx) => (
                    <div key={idx} className="flex items-center justify-between p-3 bg-white bg-opacity-5 rounded-lg">
                      <div className="flex items-center gap-3">
                        <span className="text-xl">{emp.avatar}</span>
                        <span className="text-white font-medium">{emp.name}</span>
                      </div>
                      <div className="text-green-400 font-bold">${emp.revenueGenerated.toLocaleString()}</div>
                    </div>
                  ))}
                </div>
              </div>

              <div className="bg-black bg-opacity-30 backdrop-blur-sm rounded-2xl p-6 border border-white border-opacity-10">
                <h3 className="text-xl font-bold text-white mb-4">Performance Metrics</h3>
                <div className="space-y-4">
                  <div className="flex justify-between items-center">
                    <span className="text-gray-300">Total Revenue</span>
                    <span className="text-2xl font-bold text-green-400">${companyMetrics.totalRevenue.toLocaleString()}</span>
                  </div>
                  <div className="flex justify-between items-center">
                    <span className="text-gray-300">Average per Employee</span>
                    <span className="text-xl font-bold text-blue-400">
                      ${Math.round(companyMetrics.totalRevenue / companyMetrics.totalEmployees).toLocaleString()}
                    </span>
                  </div>
                  <div className="flex justify-between items-center">
                    <span className="text-gray-300">Top Performer</span>
                    <span className="text-lg font-bold text-purple-400">👩‍🎨 Sarah Chen</span>
                  </div>
                  <div className="flex justify-between items-center">
                    <span className="text-gray-300">Team Efficiency</span>
                    <span className="text-lg font-bold text-yellow-400">{companyMetrics.averageEfficiency}%</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        )}
      </div>
    </div>
  );
};

export default ExecutiveDashboard;