'use client';

<<<<<<< HEAD
import React, { useState, useEffect } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { 
  Mail, 
  BarChart3, 
  Zap, 
  Globe, 
  Settings,
  FileText,
  TrendingUp,
  ArrowLeft,
  Plus,
  Edit,
  Trash2,
  Eye
=======
import React, { useState, useEffect, useCallback } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import {
  Mail,
  Settings,
  TrendingUp,
  Plus,
  Shield,
  Users,
  Activity,
  Database,
  Home,
  LogOut,
  Menu,
  X
>>>>>>> dev
} from 'lucide-react';
import Link from 'next/link';
import { EmailManager } from './EmailManager';
import { AnalyticsDashboard } from './AnalyticsDashboard';
import ImportExport from './ImportExport';
<<<<<<< HEAD

interface Project {
  id: number;
  title: string;
  description: string;
  content: string;
  tags: string[];
  featured: boolean;
  category: string;
  date: string;
  github?: string;
  live?: string;
  published: boolean;
  imageUrl?: string;
  metaDescription?: string;
  keywords?: string;
  ogImage?: string;
  schema?: Record<string, unknown>;
  difficulty: 'Beginner' | 'Intermediate' | 'Advanced' | 'Expert';
  timeToComplete?: string;
  technologies: string[];
  challenges: string[];
  lessonsLearned: string[];
  futureImprovements: string[];
  demoVideo?: string;
  screenshots: string[];
  colorScheme: string;
  accessibility: boolean;
  performance: {
    lighthouse: number;
    bundleSize: string;
    loadTime: string;
  };
  analytics: {
=======
import { ProjectManager } from './ProjectManager';

interface Project {
  id: string;
  title: string;
  description: string;
  content?: string;
  category: string;
  difficulty?: string;
  tags?: string[];
  featured: boolean;
  published: boolean;
  github?: string;
  live?: string;
  image?: string;
  createdAt: string;
  updatedAt: string;
  analytics?: {
>>>>>>> dev
    views: number;
    likes: number;
    shares: number;
  };
<<<<<<< HEAD
}

const ModernAdminDashboard: React.FC = () => {
  const [activeTab, setActiveTab] = useState<'overview' | 'projects' | 'emails' | 'analytics' | 'settings'>('overview');
  const [projects, setProjects] = useState<Project[]>([]);
  const [isLoading, setIsLoading] = useState(true);

  // Mock stats for overview
  const stats = {
    totalProjects: projects.length,
    publishedProjects: projects.filter(p => p.published).length,
    totalViews: projects.reduce((sum, p) => sum + p.analytics.views, 0),
    unreadEmails: 3, // This would come from your email API
    avgPerformance: Math.round(projects.reduce((sum, p) => sum + p.performance.lighthouse, 0) / projects.length) || 90
  };

  useEffect(() => {
    loadProjects();
  }, []);

  const loadProjects = async () => {
    try {
      setIsLoading(true);
      const response = await fetch('/api/projects');
      const data = await response.json();
      setProjects(data.projects || []);
    } catch (error) {
      console.error('Error loading projects:', error);
    } finally {
      setIsLoading(false);
    }
  };

  const handleEdit = (project: Project) => {
    // TODO: Implement edit functionality
    console.log('Edit project:', project);
  };

  const handleDelete = async (projectId: number) => {
    if (confirm('Are you sure you want to delete this project?')) {
      try {
        await fetch(`/api/projects/${projectId}`, { method: 'DELETE' });
        await loadProjects();
      } catch (error) {
        console.error('Error deleting project:', error);
      }
    }
  };

  const resetForm = () => {
    // TODO: Implement form reset functionality
    console.log('Reset form');
  };

  const tabs = [
    { id: 'overview', label: 'Overview', icon: BarChart3, color: 'blue' },
    { id: 'projects', label: 'Projects', icon: FileText, color: 'green' },
    { id: 'emails', label: 'Emails', icon: Mail, color: 'purple' },
    { id: 'analytics', label: 'Analytics', icon: TrendingUp, color: 'orange' },
    { id: 'settings', label: 'Settings', icon: Settings, color: 'gray' }
  ];


  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900">
      {/* Header */}
      <div className="bg-white/5 backdrop-blur-md border-b border-white/10 sticky top-0 z-50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex items-center justify-between h-16">
            <div className="flex items-center space-x-4">
              <Link
                href="/"
                className="flex items-center space-x-2 text-white/80 hover:text-white transition-colors"
              >
                <ArrowLeft size={20} />
                <span>Back to Portfolio</span>
              </Link>
              <div className="h-6 w-px bg-white/20" />
              <h1 className="text-xl font-bold text-white">Admin Dashboard</h1>
            </div>
            
            <div className="flex items-center space-x-4">
              <div className="flex items-center space-x-2 text-sm text-white/60">
                <div className="w-2 h-2 bg-green-500 rounded-full animate-pulse" />
                <span>Live</span>
              </div>
              <div className="text-sm text-white/60 font-mono">
                dk<span className="text-red-500">0</span>.dev
              </div>
            </div>
          </div>
        </div>
      </div>

      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <div className="grid grid-cols-1 lg:grid-cols-4 gap-8">
          
          {/* Sidebar */}
          <div className="lg:col-span-1">
            <div className="bg-white/5 backdrop-blur-md rounded-2xl border border-white/10 p-6">
              <nav className="space-y-2">
                {tabs.map((tab) => {
                  const Icon = tab.icon;
                  return (
                    <button
                      key={tab.id}
                      onClick={() => setActiveTab(tab.id as 'overview' | 'projects' | 'emails' | 'analytics' | 'settings')}
                      className={`w-full flex items-center space-x-3 px-4 py-3 rounded-xl transition-all duration-200 ${
                        activeTab === tab.id
                          ? `bg-${tab.color}-500/20 text-${tab.color}-400 border border-${tab.color}-500/30`
                          : 'text-white/60 hover:text-white hover:bg-white/5'
                      }`}
                    >
                      <Icon size={20} />
                      <span className="font-medium">{tab.label}</span>
                      {tab.id === 'emails' && stats.unreadEmails > 0 && (
                        <span className="ml-auto bg-red-500 text-white text-xs px-2 py-1 rounded-full">
                          {stats.unreadEmails}
                        </span>
                      )}
                    </button>
                  );
                })}
              </nav>
            </div>
          </div>

          {/* Main Content */}
          <div className="lg:col-span-3">
            <AnimatePresence mode="wait">
              {activeTab === 'overview' && (
                <motion.div
                  key="overview"
                  initial={{ opacity: 0, y: 20 }}
                  animate={{ opacity: 1, y: 0 }}
                  exit={{ opacity: 0, y: -20 }}
                  className="space-y-6"
                >
                  {/* Stats Grid */}
                  <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                    <div className="bg-white/5 backdrop-blur-md rounded-2xl border border-white/10 p-6">
                      <div className="flex items-center justify-between">
                        <div>
                          <p className="text-white/60 text-sm">Total Projects</p>
                          <p className="text-2xl font-bold text-white">{stats.totalProjects}</p>
                        </div>
                        <div className="w-12 h-12 bg-blue-500/20 rounded-xl flex items-center justify-center">
                          <FileText className="w-6 h-6 text-blue-400" />
                        </div>
                      </div>
                    </div>

                    <div className="bg-white/5 backdrop-blur-md rounded-2xl border border-white/10 p-6">
                      <div className="flex items-center justify-between">
                        <div>
                          <p className="text-white/60 text-sm">Published</p>
                          <p className="text-2xl font-bold text-white">{stats.publishedProjects}</p>
                        </div>
                        <div className="w-12 h-12 bg-green-500/20 rounded-xl flex items-center justify-center">
                          <Globe className="w-6 h-6 text-green-400" />
                        </div>
                      </div>
                    </div>

                    <div className="bg-white/5 backdrop-blur-md rounded-2xl border border-white/10 p-6">
                      <div className="flex items-center justify-between">
                        <div>
                          <p className="text-white/60 text-sm">Total Views</p>
                          <p className="text-2xl font-bold text-white">{stats.totalViews.toLocaleString()}</p>
                        </div>
                        <div className="w-12 h-12 bg-purple-500/20 rounded-xl flex items-center justify-center">
                          <Eye className="w-6 h-6 text-purple-400" />
                        </div>
                      </div>
                    </div>

                    <div className="bg-white/5 backdrop-blur-md rounded-2xl border border-white/10 p-6">
                      <div className="flex items-center justify-between">
                        <div>
                          <p className="text-white/60 text-sm">Avg Performance</p>
                          <p className="text-2xl font-bold text-white">{stats.avgPerformance}</p>
                        </div>
                        <div className="w-12 h-12 bg-orange-500/20 rounded-xl flex items-center justify-center">
                          <Zap className="w-6 h-6 text-orange-400" />
=======
  performance?: {
    lighthouse: number;
  };
}

interface ModernAdminDashboardProps {
  isAuthenticated?: boolean;
}

const ModernAdminDashboard: React.FC<ModernAdminDashboardProps> = ({ isAuthenticated = true }) => {
  const [activeTab, setActiveTab] = useState<'overview' | 'projects' | 'emails' | 'analytics' | 'settings'>('overview');
  const [projects, setProjects] = useState<Project[]>([]);
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  const [isLoading, setIsLoading] = useState(false);
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
  const [analytics, setAnalytics] = useState<Record<string, unknown> | null>(null);
  const [emails, setEmails] = useState<Record<string, unknown>[]>([]);
  const [systemStats, setSystemStats] = useState<Record<string, unknown> | null>(null);

  const loadProjects = useCallback(async () => {
    if (!isAuthenticated) return;

    try {
      setIsLoading(true);
      const response = await fetch('/api/projects', {
        headers: {
          'x-admin-request': 'true'
        }
      });

      if (!response.ok) {
        console.warn('Failed to load projects:', response.status);
        setProjects([]);
        return;
      }

      const data = await response.json();
      setProjects(data.projects || []);
    } catch {
      setProjects([]);
    } finally {
      setIsLoading(false);
    }
  }, [isAuthenticated]);

  const loadAnalytics = useCallback(async () => {
    if (!isAuthenticated) return;

    try {
      const response = await fetch('/api/analytics/dashboard', {
        headers: {
          'x-admin-request': 'true'
        }
      });

      if (response.ok) {
        const data = await response.json();
        setAnalytics(data);
      }
    } catch (error) {
      console.error('Error loading analytics:', error);
    }
  }, [isAuthenticated]);

  const loadEmails = useCallback(async () => {
    if (!isAuthenticated) return;

    try {
      const response = await fetch('/api/contacts', {
        headers: {
          'x-admin-request': 'true'
        }
      });

      if (response.ok) {
        const data = await response.json();
        setEmails(data.contacts || []);
      }
    } catch (error) {
      console.error('Error loading emails:', error);
    }
  }, [isAuthenticated]);

  const loadSystemStats = useCallback(async () => {
    if (!isAuthenticated) return;

    try {
      const response = await fetch('/api/health', {
        headers: {
          'x-admin-request': 'true'
        }
      });

      if (response.ok) {
        const data = await response.json();
        setSystemStats(data);
      }
    } catch (error) {
      console.error('Error loading system stats:', error);
    }
  }, [isAuthenticated]);

  const loadAllData = useCallback(async () => {
    await Promise.all([
      loadProjects(),
      loadAnalytics(),
      loadEmails(),
      loadSystemStats()
    ]);
  }, [loadProjects, loadAnalytics, loadEmails, loadSystemStats]);

  // Real stats from API data
  const stats = {
    totalProjects: projects.length,
    publishedProjects: projects.filter(p => p.published).length,
    totalViews: (analytics?.totalViews as number) || projects.reduce((sum, p) => sum + (p.analytics?.views || 0), 0),
    unreadEmails: emails.filter(e => !(e.read as boolean)).length,
    avgPerformance: (analytics?.avgPerformance as number) || (projects.length > 0 ?
      Math.round(projects.reduce((sum, p) => sum + (p.performance?.lighthouse || 90), 0) / projects.length) : 90),
    systemHealth: (systemStats?.status as string) || 'unknown',
    totalUsers: (analytics?.totalUsers as number) || 0,
    bounceRate: (analytics?.bounceRate as number) || 0,
    avgSessionDuration: (analytics?.avgSessionDuration as number) || 0
  };

  useEffect(() => {
    // Load all data if authenticated
    if (isAuthenticated) {
      loadAllData();
    }
  }, [isAuthenticated, loadAllData]);

  const navigation = [
    { id: 'overview', label: 'Dashboard', icon: Home, color: 'blue', description: 'Overview & Statistics' },
    { id: 'projects', label: 'Projects', icon: Database, color: 'green', description: 'Manage Projects' },
    { id: 'emails', label: 'Emails', icon: Mail, color: 'purple', description: 'Email Management' },
    { id: 'analytics', label: 'Analytics', icon: Activity, color: 'orange', description: 'Site Analytics' },
    { id: 'settings', label: 'Settings', icon: Settings, color: 'gray', description: 'System Settings' }
  ];

  return (
    <div className="min-h-screen">
      {/* Animated Background - same as main site */}
      <div className="fixed inset-0 animated-bg"></div>

      {/* Admin Navbar - Horizontal Navigation */}
      <div className="relative z-10">
        <div className="admin-glass border-b border-white/20 sticky top-0">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div className="flex items-center justify-between h-16">
              {/* Left side - Logo and Admin Panel */}
              <div className="flex items-center space-x-4">
                <Link
                  href="/"
                  className="flex items-center space-x-2 text-white/90 hover:text-white transition-colors"
                >
                  <Home size={20} className="text-blue-400" />
                  <span className="font-medium text-white">Portfolio</span>
                </Link>
                <div className="h-6 w-px bg-white/30" />
                <div className="flex items-center space-x-2">
                  <Shield size={20} className="text-purple-400" />
                  <span className="text-white font-semibold">Admin Panel</span>
                </div>
              </div>

              {/* Center - Desktop Navigation */}
              <div className="hidden md:flex items-center space-x-1">
                {navigation.map((item) => (
                  <button
                    key={item.id}
                    onClick={() => setActiveTab(item.id as 'overview' | 'projects' | 'emails' | 'analytics' | 'settings')}
                    className={`flex items-center space-x-2 px-4 py-2 rounded-lg transition-all duration-200 ${
                      activeTab === item.id
                        ? 'admin-glass-light border border-blue-500/40 text-blue-300 shadow-lg'
                        : 'text-white/80 hover:text-white hover:admin-glass-light'
                    }`}
                  >
                    <item.icon size={16} className={activeTab === item.id ? 'text-blue-400' : 'text-white/70'} />
                    <span className="font-medium text-sm">{item.label}</span>
                  </button>
                ))}
              </div>

              {/* Right side - User info and Logout */}
              <div className="flex items-center space-x-4">
                <div className="hidden sm:block text-sm text-white/80">
                  Welcome, <span className="text-white font-semibold">Dennis</span>
                </div>
                <button
                  onClick={() => window.location.href = '/api/auth/logout'}
                  className="flex items-center space-x-2 px-3 py-2 rounded-lg admin-glass-light hover:bg-red-500/20 text-red-300 hover:text-red-200 transition-all duration-200"
                >
                  <LogOut size={16} />
                  <span className="hidden sm:inline text-sm font-medium">Logout</span>
                </button>

                {/* Mobile menu button */}
                <button
                  onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
                  className="md:hidden flex items-center justify-center p-2 rounded-lg admin-glass-light text-white hover:text-blue-300 transition-colors"
                >
                  {mobileMenuOpen ? <X size={20} /> : <Menu size={20} />}
                </button>
              </div>
            </div>
          </div>

          {/* Mobile Navigation Menu */}
          <AnimatePresence>
            {mobileMenuOpen && (
              <motion.div
                initial={{ opacity: 0, height: 0 }}
                animate={{ opacity: 1, height: 'auto' }}
                exit={{ opacity: 0, height: 0 }}
                className="md:hidden border-t border-white/20 admin-glass-light"
              >
                <div className="px-4 py-4 space-y-2">
                  {navigation.map((item) => (
                    <button
                      key={item.id}
                      onClick={() => {
                        setActiveTab(item.id as 'overview' | 'projects' | 'emails' | 'analytics' | 'settings');
                        setMobileMenuOpen(false);
                      }}
                      className={`w-full flex items-center space-x-3 px-4 py-3 rounded-lg transition-all duration-200 ${
                        activeTab === item.id
                          ? 'admin-glass-light border border-blue-500/40 text-blue-300 shadow-lg'
                          : 'text-white/80 hover:text-white hover:admin-glass-light'
                      }`}
                    >
                      <item.icon size={18} className={activeTab === item.id ? 'text-blue-400' : 'text-white/70'} />
                      <div className="text-left">
                        <div className="font-medium text-sm">{item.label}</div>
                        <div className="text-xs opacity-70">{item.description}</div>
                      </div>
                    </button>
                  ))}
                </div>
              </motion.div>
            )}
          </AnimatePresence>
        </div>

        {/* Main Content - Full Width Horizontal Layout */}
        <div className="px-4 sm:px-6 lg:px-8 xl:px-12 2xl:px-16 py-6 lg:py-8">
          {/* Content */}
          <AnimatePresence mode="wait">
            <motion.div
              key={activeTab}
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              exit={{ opacity: 0, y: -20 }}
              transition={{ duration: 0.3 }}
            >
              {activeTab === 'overview' && (
                <div className="space-y-8">
                  <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
                    <div>
                      <h1 className="text-3xl font-bold text-white">Admin Dashboard</h1>
                      <p className="text-white/80 text-lg">Manage your portfolio and monitor performance</p>
                    </div>
                  </div>

                  {/* Stats Grid - Mobile: 2x3, Desktop: 6x1 horizontal */}
                  <div className="grid grid-cols-2 md:grid-cols-6 gap-3 md:gap-6">
                    <div 
                      className="admin-glass-light p-4 rounded-xl hover:scale-105 transition-all duration-200 cursor-pointer"
                      onClick={() => setActiveTab('projects')}
                    >
                      <div className="flex flex-col space-y-2">
                        <div className="flex items-center justify-between">
                          <p className="text-white/80 text-xs md:text-sm font-medium">Projects</p>
                          <Database size={20} className="text-blue-400" />
                        </div>
                        <p className="text-xl md:text-2xl font-bold text-white">{stats.totalProjects}</p>
                        <p className="text-green-400 text-xs font-medium">{stats.publishedProjects} published</p>
                      </div>
                    </div>

                    <div 
                      className="admin-glass-light p-4 rounded-xl hover:scale-105 transition-all duration-200 cursor-pointer"
                      onClick={() => setActiveTab('analytics')}
                    >
                      <div className="flex flex-col space-y-2">
                        <div className="flex items-center justify-between">
                          <p className="text-white/80 text-xs md:text-sm font-medium">Page Views</p>
                          <Activity size={20} className="text-purple-400" />
                        </div>
                        <p className="text-xl md:text-2xl font-bold text-white">{stats.totalViews.toLocaleString()}</p>
                        <p className="text-blue-400 text-xs font-medium">{stats.totalUsers} users</p>
                      </div>
                    </div>

                    <div 
                      className="admin-glass-light p-4 rounded-xl hover:scale-105 transition-all duration-200 cursor-pointer"
                      onClick={() => setActiveTab('emails')}
                    >
                      <div className="flex flex-col space-y-2">
                        <div className="flex items-center justify-between">
                          <p className="text-white/80 text-xs md:text-sm font-medium">Messages</p>
                          <Mail size={20} className="text-green-400" />
                        </div>
                        <p className="text-xl md:text-2xl font-bold text-white">{emails.length}</p>
                        <p className="text-red-400 text-xs font-medium">{stats.unreadEmails} unread</p>
                      </div>
                    </div>

                    <div 
                      className="admin-glass-light p-4 rounded-xl hover:scale-105 transition-all duration-200 cursor-pointer"
                      onClick={() => setActiveTab('analytics')}
                    >
                      <div className="flex flex-col space-y-2">
                        <div className="flex items-center justify-between">
                          <p className="text-white/80 text-xs md:text-sm font-medium">Performance</p>
                          <TrendingUp size={20} className="text-orange-400" />
                        </div>
                        <p className="text-xl md:text-2xl font-bold text-white">{stats.avgPerformance}</p>
                        <p className="text-orange-400 text-xs font-medium">Lighthouse Score</p>
                      </div>
                    </div>

                    <div 
                      className="admin-glass-light p-4 rounded-xl hover:scale-105 transition-all duration-200 cursor-pointer"
                      onClick={() => setActiveTab('analytics')}
                    >
                      <div className="flex flex-col space-y-2">
                        <div className="flex items-center justify-between">
                          <p className="text-white/80 text-xs md:text-sm font-medium">Bounce Rate</p>
                          <Users size={20} className="text-red-400" />
                        </div>
                        <p className="text-xl md:text-2xl font-bold text-white">{stats.bounceRate}%</p>
                        <p className="text-red-400 text-xs font-medium">Exit rate</p>
                      </div>
                    </div>

                    <div 
                      className="admin-glass-light p-4 rounded-xl hover:scale-105 transition-all duration-200 cursor-pointer"
                      onClick={() => setActiveTab('settings')}
                    >
                      <div className="flex flex-col space-y-2">
                        <div className="flex items-center justify-between">
                          <p className="text-white/80 text-xs md:text-sm font-medium">System</p>
                          <Shield size={20} className="text-green-400" />
                        </div>
                        <p className="text-xl md:text-2xl font-bold text-white">Online</p>
                        <div className="flex items-center space-x-1">
                          <div className="w-2 h-2 bg-green-400 rounded-full animate-pulse"></div>
                          <p className="text-green-400 text-xs font-medium">All systems operational</p>
>>>>>>> dev
                        </div>
                      </div>
                    </div>
                  </div>

<<<<<<< HEAD
                  {/* Recent Projects */}
                  <div className="bg-white/5 backdrop-blur-md rounded-2xl border border-white/10 p-6">
                    <div className="flex items-center justify-between mb-6">
                      <h2 className="text-xl font-bold text-white">Recent Projects</h2>
                      <button
                        onClick={() => setActiveTab('projects')}
                        className="text-blue-400 hover:text-blue-300 text-sm font-medium"
                      >
                        View All
                      </button>
                    </div>
                    
                    <div className="space-y-4">
                      {projects.slice(0, 3).map((project) => (
                        <div
                          key={project.id}
                          className="flex items-center space-x-4 p-4 bg-white/5 rounded-xl border border-white/10 hover:bg-white/10 transition-colors"
                        >
                          <div className="w-12 h-12 bg-gradient-to-br from-blue-500 to-purple-500 rounded-xl flex items-center justify-center">
                            <span className="text-white font-bold text-lg">
                              {project.title.charAt(0)}
                            </span>
                          </div>
                          <div className="flex-1">
                            <h3 className="font-semibold text-white">{project.title}</h3>
                            <p className="text-white/60 text-sm">{project.category}</p>
                          </div>
                          <div className="flex items-center space-x-2">
                            <span className={`px-2 py-1 rounded-full text-xs font-medium ${
                              project.published 
                                ? 'bg-green-500/20 text-green-400' 
                                : 'bg-gray-500/20 text-gray-400'
                            }`}>
                              {project.published ? 'Published' : 'Draft'}
                            </span>
                            <button
                              onClick={() => handleEdit(project)}
                              className="p-2 text-white/60 hover:text-white hover:bg-white/10 rounded-lg transition-colors"
                            >
                              <Edit size={16} />
                            </button>
                          </div>
                        </div>
                      ))}
                    </div>
                  </div>
                </motion.div>
              )}

              {activeTab === 'projects' && (
                <motion.div
                  key="projects"
                  initial={{ opacity: 0, y: 20 }}
                  animate={{ opacity: 1, y: 0 }}
                  exit={{ opacity: 0, y: -20 }}
                  className="space-y-6"
                >
                  <div className="flex items-center justify-between">
                    <h2 className="text-2xl font-bold text-white">Projects</h2>
                    <button
                      onClick={resetForm}
                      className="flex items-center space-x-2 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-xl transition-colors"
                    >
                      <Plus size={20} />
                      <span>New Project</span>
                    </button>
                  </div>

                  {isLoading ? (
                    <div className="flex items-center justify-center h-64">
                      <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500"></div>
                    </div>
                  ) : (
                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                      {projects.map((project) => (
                        <div
                          key={project.id}
                          className="bg-white/5 backdrop-blur-md rounded-2xl border border-white/10 p-6 hover:bg-white/10 transition-all duration-200"
                        >
                          <div className="flex items-start justify-between mb-4">
                            <div className="w-12 h-12 bg-gradient-to-br from-blue-500 to-purple-500 rounded-xl flex items-center justify-center">
                              <span className="text-white font-bold text-lg">
                                {project.title.charAt(0)}
                              </span>
                            </div>
                            <div className="flex items-center space-x-2">
                              <button
                                onClick={() => handleEdit(project)}
                                className="p-2 text-white/60 hover:text-white hover:bg-white/10 rounded-lg transition-colors"
                              >
                                <Edit size={16} />
                              </button>
                              <button
                                onClick={() => handleDelete(project.id)}
                                className="p-2 text-white/60 hover:text-red-400 hover:bg-red-500/10 rounded-lg transition-colors"
                              >
                                <Trash2 size={16} />
                              </button>
                            </div>
                          </div>
                          
                          <h3 className="font-semibold text-white mb-2">{project.title}</h3>
                          <p className="text-white/60 text-sm mb-4 line-clamp-2">{project.description}</p>
                          
                          <div className="flex items-center justify-between">
                            <span className="px-2 py-1 bg-blue-500/20 text-blue-400 text-xs rounded-full">
                              {project.category}
                            </span>
                            <span className={`px-2 py-1 text-xs rounded-full ${
                              project.published 
                                ? 'bg-green-500/20 text-green-400' 
                                : 'bg-gray-500/20 text-gray-400'
                            }`}>
                              {project.published ? 'Published' : 'Draft'}
                            </span>
                          </div>
                        </div>
                      ))}
                    </div>
                  )}
                </motion.div>
              )}

              {activeTab === 'emails' && (
                <motion.div
                  key="emails"
                  initial={{ opacity: 0, y: 20 }}
                  animate={{ opacity: 1, y: 0 }}
                  exit={{ opacity: 0, y: -20 }}
                >
                  <EmailManager />
                </motion.div>
              )}

              {activeTab === 'analytics' && (
                <motion.div
                  key="analytics"
                  initial={{ opacity: 0, y: 20 }}
                  animate={{ opacity: 1, y: 0 }}
                  exit={{ opacity: 0, y: -20 }}
                >
                  <AnalyticsDashboard />
                </motion.div>
              )}

              {activeTab === 'settings' && (
                <motion.div
                  key="settings"
                  initial={{ opacity: 0, y: 20 }}
                  animate={{ opacity: 1, y: 0 }}
                  exit={{ opacity: 0, y: -20 }}
                  className="space-y-6"
                >
                  <h2 className="text-2xl font-bold text-white">Settings</h2>
                  
                  <div className="bg-white/5 backdrop-blur-md rounded-2xl border border-white/10 p-6">
                    <h3 className="text-lg font-semibold text-white mb-4">Import/Export</h3>
                    <ImportExport />
                  </div>
                </motion.div>
              )}
            </AnimatePresence>
          </div>
=======
                  {/* Recent Activity & Quick Actions - Mobile: vertical, Desktop: horizontal */}
                  <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                    {/* Recent Activity */}
                    <div className="admin-glass-card p-6 rounded-xl md:col-span-2">
                      <div className="flex items-center justify-between mb-6">
                        <h2 className="text-xl font-bold text-white">Recent Activity</h2>
                        <button 
                          onClick={() => loadAllData()}
                          className="text-blue-400 hover:text-blue-300 text-sm font-medium px-3 py-1 admin-glass-light rounded-lg transition-colors"
                        >
                          Refresh
                        </button>
                      </div>
                      
                      {/* Mobile: vertical stack, Desktop: horizontal columns */}
                      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div className="space-y-6">
                          <h3 className="text-sm font-medium text-white/60 uppercase tracking-wider">Projects</h3>
                          <div className="space-y-4">
                            {projects.slice(0, 3).map((project) => (
                              <div key={project.id} className="flex items-start space-x-3 p-4 admin-glass-light rounded-lg hover:scale-[1.02] transition-all duration-200 cursor-pointer" onClick={() => setActiveTab('projects')}>
                                <div className="flex-1 min-w-0">
                                  <p className="text-white font-medium text-sm truncate">{project.title}</p>
                                  <p className="text-white/60 text-xs">{project.published ? 'Published' : 'Draft'} • {project.analytics?.views || 0} views</p>
                                  <div className="flex items-center space-x-2 mt-2">
                                    <span className={`px-2 py-1 rounded-full text-xs ${project.published ? 'bg-green-500/20 text-green-400' : 'bg-yellow-500/20 text-yellow-400'}`}>
                                      {project.published ? 'Live' : 'Draft'}
                                    </span>
                                    {project.featured && (
                                      <span className="px-2 py-1 bg-purple-500/20 text-purple-400 rounded-full text-xs">Featured</span>
                                    )}
                                  </div>
                                </div>
                              </div>
                            ))}
                          </div>
                        </div>

                        <div className="space-y-4">
                          <h3 className="text-sm font-medium text-white/60 uppercase tracking-wider">Messages</h3>
                          <div className="space-y-3">
                            {emails.slice(0, 3).map((email, index) => (
                              <div key={index} className="flex items-center space-x-3 p-3 admin-glass-light rounded-lg hover:scale-[1.02] transition-all duration-200 cursor-pointer" onClick={() => setActiveTab('emails')}>
                                <div className="w-8 h-8 bg-green-500/30 rounded-lg flex items-center justify-center flex-shrink-0">
                                  <Mail size={14} className="text-green-400" />
                                </div>
                                <div className="flex-1 min-w-0">
                                  <p className="text-white font-medium text-sm truncate">From {email.name as string}</p>
                                  <p className="text-white/60 text-xs truncate">{(email.subject as string) || 'No subject'}</p>
                                </div>
                                {!(email.read as boolean) && (
                                  <div className="w-2 h-2 bg-red-400 rounded-full flex-shrink-0"></div>
                                )}
                              </div>
                            ))}
                          </div>
                        </div>
                      </div>
                    </div>

                    {/* Quick Actions */}
                    <div className="admin-glass-card p-6 rounded-xl">
                      <h2 className="text-xl font-bold text-white mb-6">Quick Actions</h2>
                      <div className="space-y-4">
                        <button
                          onClick={() => window.location.href = '/editor'}
                          className="w-full flex items-center space-x-3 p-3 admin-glass-light rounded-lg hover:scale-[1.02] transition-all duration-200 text-left group"
                        >
                          <div className="w-10 h-10 bg-green-500/30 rounded-lg flex items-center justify-center group-hover:bg-green-500/40 transition-colors">
                            <Plus size={18} className="text-green-400" />
                          </div>
                          <div>
                            <p className="text-white font-medium text-sm">Ghost Editor</p>
                            <p className="text-white/60 text-xs">Professional writing tool</p>
                          </div>
                        </button>
                        
                        <button
                          onClick={() => setActiveTab('analytics')}
                          className="w-full flex items-center space-x-3 p-3 admin-glass-light rounded-lg hover:scale-[1.02] transition-all duration-200 text-left group"
                        >
                          <div className="w-10 h-10 bg-red-500/30 rounded-lg flex items-center justify-center group-hover:bg-red-500/40 transition-colors">
                            <Activity size={18} className="text-red-400" />
                          </div>
                          <div>
                            <p className="text-white font-medium text-sm">Reset Analytics</p>
                            <p className="text-white/60 text-xs">Clear analytics data</p>
                          </div>
                        </button>

                        <button 
                          onClick={() => setActiveTab('emails')}
                          className="w-full flex items-center space-x-3 p-3 admin-glass-light rounded-lg hover:scale-[1.02] transition-all duration-200 text-left group"
                        >
                          <div className="w-10 h-10 bg-green-500/30 rounded-lg flex items-center justify-center group-hover:bg-green-500/40 transition-colors">
                            <Mail size={18} className="text-green-400" />
                          </div>
                          <div>
                            <p className="text-white font-medium text-sm">View Messages</p>
                            <p className="text-white/60 text-xs">{stats.unreadEmails} unread messages</p>
                          </div>
                        </button>

                        <button 
                          onClick={() => setActiveTab('analytics')}
                          className="w-full flex items-center space-x-3 p-3 admin-glass-light rounded-lg hover:scale-[1.02] transition-all duration-200 text-left group"
                        >
                          <div className="w-10 h-10 bg-purple-500/30 rounded-lg flex items-center justify-center group-hover:bg-purple-500/40 transition-colors">
                            <TrendingUp size={18} className="text-purple-400" />
                          </div>
                          <div>
                            <p className="text-white font-medium text-sm">Analytics</p>
                            <p className="text-white/60 text-xs">View detailed statistics</p>
                          </div>
                        </button>

                        <button 
                          onClick={() => setActiveTab('settings')}
                          className="w-full flex items-center space-x-3 p-3 admin-glass-light rounded-lg hover:scale-[1.02] transition-all duration-200 text-left group"
                        >
                          <div className="w-10 h-10 bg-gray-500/30 rounded-lg flex items-center justify-center group-hover:bg-gray-500/40 transition-colors">
                            <Settings size={18} className="text-gray-400" />
                          </div>
                          <div>
                            <p className="text-white font-medium text-sm">Settings</p>
                            <p className="text-white/60 text-xs">System configuration</p>
                          </div>
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
              )}

              {activeTab === 'projects' && (
                <div className="space-y-6">
                  <div className="flex items-center justify-between">
                    <div>
                      <h2 className="text-2xl font-bold text-white">Project Management</h2>
                      <p className="text-white/70 mt-1">Manage your portfolio projects</p>
                    </div>
                  </div>
                  
                  <ProjectManager projects={projects} onProjectsChange={loadProjects} />
                </div>
              )}

              {activeTab === 'emails' && (
                <EmailManager />
              )}

              {activeTab === 'analytics' && (
                <AnalyticsDashboard isAuthenticated={isAuthenticated} />
              )}

              {activeTab === 'settings' && (
                <div className="space-y-8">
                  <div>
                    <h1 className="text-2xl font-bold text-white">System Settings</h1>
                    <p className="text-white/60">Manage system configuration and preferences</p>
                  </div>
                  
                  <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
                    <div className="admin-glass-card p-6 rounded-xl">
                      <h2 className="text-xl font-bold text-white mb-4">Import / Export</h2>
                      <p className="text-white/70 mb-4">Backup and restore your portfolio data</p>
                      <ImportExport />
                    </div>
                    
                    <div className="admin-glass-card p-6 rounded-xl">
                      <h2 className="text-xl font-bold text-white mb-4">System Status</h2>
                      <div className="space-y-4">
                        <div className="flex items-center justify-between p-3 bg-white/5 rounded-lg">
                          <span className="text-white/80">Database</span>
                          <div className="flex items-center space-x-3">
                            <div className="w-4 h-4 bg-green-400 rounded-full animate-pulse"></div>
                            <span className="text-green-400 font-medium">Online</span>
                          </div>
                        </div>
                        <div className="flex items-center justify-between p-3 bg-white/5 rounded-lg">
                          <span className="text-white/80">Redis Cache</span>
                          <div className="flex items-center space-x-3">
                            <div className="w-4 h-4 bg-green-400 rounded-full animate-pulse"></div>
                            <span className="text-green-400 font-medium">Online</span>
                          </div>
                        </div>
                        <div className="flex items-center justify-between p-3 bg-white/5 rounded-lg">
                          <span className="text-white/80">API Services</span>
                          <div className="flex items-center space-x-3">
                            <div className="w-4 h-4 bg-green-400 rounded-full animate-pulse"></div>
                            <span className="text-green-400 font-medium">Online</span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              )}
            </motion.div>
          </AnimatePresence>
>>>>>>> dev
        </div>
      </div>
    </div>
  );
};

<<<<<<< HEAD
export default ModernAdminDashboard;
=======
export default ModernAdminDashboard;
>>>>>>> dev
