import React, { useState, Suspense, useEffect } from 'react';
import { Outlet, useLocation } from 'react-router-dom';
import { SidebarAdmin } from '../shared/components';
import { Sparkles, Zap } from 'lucide-react';
import { useResponsive } from '../hooks';
import AIAssistantWidget from '../features/ai/components/AIAssistantWidget';
import InAppNotificationBell from '../features/notifications/components/InAppNotificationBell';

// Luxury Loading Overlay
const LuxuryLoadingOverlay: React.FC = () => {
  return (
    <div className="absolute inset-0 flex items-center justify-center bg-gradient-to-br from-slate-50/95 via-white/95 to-slate-50/95 backdrop-blur-sm z-50">
      <div className="text-center space-y-4 sm:space-y-6 px-4">
        <div className="relative">
          <div className="absolute inset-0 bg-gradient-to-r from-amber-400 via-amber-500 to-amber-600 rounded-2xl sm:rounded-3xl blur-2xl opacity-60 animate-pulse"></div>
          <div className="relative bg-gradient-to-br from-amber-500 via-amber-600 to-amber-700 p-6 sm:p-8 rounded-2xl sm:rounded-3xl shadow-2xl border border-amber-400/30">
            <div className="flex items-center justify-center gap-3 sm:gap-4 mb-3 sm:mb-4">
              <Sparkles className="w-6 h-6 sm:w-8 sm:h-8 text-white animate-pulse" />
              <Zap className="w-6 h-6 sm:w-8 sm:h-8 text-white animate-pulse" style={{ animationDelay: '0.2s' }} />
            </div>
            <div className="w-12 sm:w-16 h-1 bg-white/30 rounded-full mx-auto overflow-hidden">
              <div className="h-full bg-white rounded-full animate-shimmer" style={{
                width: '60%',
                animation: 'shimmer 2s infinite'
              }}></div>
            </div>
          </div>
        </div>
        <p className="text-slate-600 font-medium text-base sm:text-lg tracking-wide">Loading Dashboard...</p>
      </div>
    </div>
  );
};

const AdminLayout: React.FC = () => {
  const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
  const [isTransitioning, setIsTransitioning] = useState(false);
  const { isMobile } = useResponsive();
  const location = useLocation();

  // Handle route transitions
  useEffect(() => {
    setIsTransitioning(true);
    const timer = setTimeout(() => {
      setIsTransitioning(false);
    }, 300);
    return () => clearTimeout(timer);
  }, [location.pathname]);

  return (
    <div className={`${isMobile ? 'relative' : 'flex'} h-screen bg-gradient-to-br from-slate-50 via-white to-slate-50 relative overflow-hidden`}>
      {/* Luxury Background Pattern */}
      <div className="fixed inset-0 opacity-[0.02] pointer-events-none z-0">
        <div 
          className="absolute inset-0" 
          style={{
            backgroundImage: `radial-gradient(circle at 2px 2px, rgba(251, 191, 36, 0.3) 1px, transparent 0)`,
            backgroundSize: '60px 60px'
          }}
        ></div>
      </div>
      
      {/* Animated Gradient Overlay */}
      <div className="fixed inset-0 bg-gradient-to-br from-amber-50/20 via-transparent to-amber-100/10 pointer-events-none z-0"></div>

      <SidebarAdmin 
        isCollapsed={sidebarCollapsed} 
        onToggle={() => setSidebarCollapsed(!sidebarCollapsed)} 
      />
      
      <main 
        className={`
          overflow-x-hidden overflow-y-auto transition-all duration-500 ease-in-out
          relative z-5
          ${isMobile ? 'w-full h-full' : 'flex-1'}
        `}
        style={{ WebkitOverflowScrolling: 'touch' }}
      >
        {/* Luxury Content Container */}
        <div className="relative min-h-screen">
          {/* Top Spacing for Mobile Menu Button - Minimal */}
          <div className="h-12 sm:h-14 md:h-14 lg:h-0"></div>
          
          {/* Content Wrapper with Luxury Styling */}
          <div 
            className={`
              relative transition-all duration-500 ease-in-out
              ${isTransitioning ? 'opacity-0 scale-[0.98]' : 'opacity-100 scale-100'}
              ${isMobile ? 'px-2 py-2' : 'px-2 sm:px-3 md:px-4 lg:px-6 xl:px-8 py-3 sm:py-4 md:py-5 lg:py-8'}
              max-w-full
            `}
          >
            {/* Luxury Content Area */}
            <div className="relative max-w-full overflow-x-hidden">
              {/* Subtle Top Border Accent */}
              <div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-amber-300/30 to-transparent"></div>
              
              {/* Main Content with Luxury Padding */}
              <div className={`relative ${isMobile ? 'pt-1' : 'pt-3 sm:pt-4 md:pt-5 lg:pt-6'} max-w-full`}>
                <Suspense fallback={<LuxuryLoadingOverlay />}>
                  <div className="relative z-10 max-w-full">
                    <Outlet />
                  </div>
                </Suspense>
              </div>
            </div>
          </div>
        </div>
      </main>

      {/* AI Assistant Widget */}
      <AIAssistantWidget />
      
      {/* Notification bell - fixed position in top right */}
      <div className="fixed top-4 right-4 z-50">
        <InAppNotificationBell />
      </div>

      {/* Custom CSS for shimmer animation */}
      <style>{`
        @keyframes shimmer {
          0% {
            transform: translateX(-100%);
          }
          100% {
            transform: translateX(200%);
          }
        }
        .animate-shimmer {
          animation: shimmer 2s infinite;
        }
        @keyframes fade-in {
          from {
            opacity: 0;
            transform: translateY(10px);
          }
          to {
            opacity: 1;
            transform: translateY(0);
          }
        }
        .animate-fade-in {
          animation: fade-in 0.6s ease-out;
        }
      `}</style>
    </div>
  );
};

export default AdminLayout;
