import React from 'react';
import { currentUser, dashboardStats, members } from '../../data/mockData';
import { Avatar } from '../ui/Avatar';
import { StatsGrid } from '../dashboard/StatsGrid';
import { DuesManagement } from '../dashboard/DuesManagement';
import { Crown, Sparkles, Calendar, Bell } from 'lucide-react';

export const BoardDashboard: React.FC = () => {
  const getInitials = (firstName: string, lastName: string) => {
    return `${firstName[0]}${lastName[0]}`.toUpperCase();
  };

  return (
    <div className="space-y-8">
      {/* Ultra-Modern Hero Header */}
      <div className="relative overflow-hidden">
        {/* Animated background */}
        <div className="absolute inset-0 bg-gradient-to-br from-red-600 via-red-700 to-red-900"></div>
        <div className="absolute inset-0 bg-gradient-to-t from-black/30 to-transparent"></div>
        
        {/* Floating elements */}
        <div className="absolute top-10 right-20 w-64 h-64 bg-white/5 rounded-full blur-3xl animate-float"></div>
        <div className="absolute bottom-10 left-20 w-48 h-48 bg-red-300/10 rounded-full blur-2xl animate-pulse-slow"></div>
        <div className="absolute top-1/2 left-1/2 w-32 h-32 bg-white/10 rounded-full blur-xl animate-bounce-slow"></div>
        
        {/* Mesh gradient overlay */}
        <div className="absolute inset-0 opacity-20 bg-mesh-gradient animate-gradient bg-400% mix-blend-overlay"></div>
        
        <div className="relative p-12 rounded-3xl">
          <div className="flex flex-col lg:flex-row lg:items-center lg:justify-between space-y-8 lg:space-y-0">
            {/* User Info */}
            <div className="flex items-center space-x-6 animate-slide-in">
              <div className="relative group">
                {/* Avatar glow */}
                <div className="absolute -inset-2 bg-gradient-to-r from-white/30 to-red-200/30 rounded-full blur-lg group-hover:blur-xl transition-all duration-300"></div>
                
                <div className="relative">
                  <Avatar 
                    initials={getInitials(currentUser.firstName, currentUser.lastName)}
                    size="xl"
                    className="ring-4 ring-white/40 shadow-ultra backdrop-blur-sm border-2 border-white/20 group-hover:scale-110 transition-transform duration-300"
                  />
                  
                  {/* Status indicator */}
                  <div className="absolute -bottom-2 -right-2 flex items-center space-x-1">
                    <div className="w-8 h-8 bg-gradient-to-r from-green-400 to-emerald-500 rounded-full border-4 border-white shadow-lg flex items-center justify-center">
                      <div className="w-2 h-2 bg-white rounded-full animate-pulse"></div>
                    </div>
                  </div>
                  
                  {/* Crown icon */}
                  <div className="absolute -top-3 -right-1 w-8 h-8 bg-gradient-to-r from-yellow-400 to-orange-500 rounded-full flex items-center justify-center shadow-lg animate-bounce-slow">
                    <Crown className="w-4 h-4 text-white" />
                  </div>
                </div>
              </div>
              
              <div className="space-y-3">
                <div>
                  <h1 className="text-5xl font-black text-white mb-2 tracking-tight">
                    Welcome back,
                    <span className="block bg-gradient-to-r from-white via-red-100 to-white bg-clip-text text-transparent animate-gradient bg-300%">
                      {currentUser.firstName}!
                    </span>
                  </h1>
                </div>
                
                <div className="flex items-center space-x-4">
                  <div className="bg-white/20 backdrop-blur-md rounded-full px-6 py-3 border border-white/30 shadow-glass">
                    <div className="flex items-center space-x-2">
                      <Sparkles className="w-5 h-5 text-yellow-300" />
                      <span className="text-white font-bold">{currentUser.role}</span>
                    </div>
                  </div>
                  
                  <div className="h-6 w-px bg-white/30"></div>
                  
                  <span className="text-red-100 font-medium">MonacoUSA Association</span>
                </div>
              </div>
            </div>
            
            {/* Date & Quick Actions */}
            <div className="space-y-6 animate-slide-up" style={{ animationDelay: '200ms' }}>
              {/* Date Card */}
              <div className="bg-white/10 backdrop-blur-md rounded-2xl p-6 border border-white/20 shadow-glass hover:bg-white/15 transition-all duration-300 group">
                <div className="flex items-center space-x-3 mb-3">
                  <Calendar className="w-6 h-6 text-white" />
                  <p className="text-red-100 font-semibold">Today</p>
                </div>
                <p className="text-2xl font-bold text-white leading-tight">
                  {new Date().toLocaleDateString('en-US', { 
                    weekday: 'long', 
                    year: 'numeric', 
                    month: 'long', 
                    day: 'numeric' 
                  })}
                </p>
                <div className="mt-3 h-1 bg-white/20 rounded-full overflow-hidden">
                  <div className="h-full bg-gradient-to-r from-white/60 to-white/80 rounded-full w-3/4 animate-pulse"></div>
                </div>
              </div>
              
              {/* Quick Actions */}
              <div className="flex space-x-3">
                <button className="flex-1 bg-white/10 backdrop-blur-md hover:bg-white/20 text-white p-4 rounded-xl border border-white/20 transition-all duration-300 hover:scale-105 group">
                  <Bell className="w-5 h-5 mx-auto mb-2 group-hover:animate-bounce" />
                  <span className="text-sm font-medium">Alerts</span>
                </button>
                
                <button className="flex-1 bg-white text-red-600 hover:bg-red-50 p-4 rounded-xl transition-all duration-300 hover:scale-105 shadow-lg group">
                  <Sparkles className="w-5 h-5 mx-auto mb-2 group-hover:animate-spin" />
                  <span className="text-sm font-bold">Quick Add</span>
                </button>
              </div>
            </div>
          </div>
          
          {/* Decorative line */}
          <div className="mt-8 h-px bg-gradient-to-r from-transparent via-white/30 to-transparent"></div>
        </div>
      </div>

      {/* Statistics Grid */}
      <StatsGrid stats={dashboardStats} />

      {/* Dues Management */}
      <DuesManagement members={members} />
    </div>
  );
};