import { Routes, Route, Link, useLocation } from 'react-router-dom';
import { useEffect, useState } from 'react';
import Create from './pages/Create';
import About from './pages/About';
import Gallery from './pages/Gallery';
import Profile from './pages/Profile';
import Auth from './pages/Auth';
import Subscription from './pages/Subscription';
import ImagePage from './pages/ImagePage';
import SocialPreviewTest from './pages/SocialPreviewTest';
import { useAuthStore } from './stores';
import {
  WebsiteStructuredData,
  OrganizationStructuredData,
  SoftwareApplicationStructuredData
} from './components/StructuredData';
import { PerformanceMonitor } from './components/PerformanceOptimizations';
import { SEOMeta, SEOValidator } from './components/SEOMeta';

function App() {
  const location = useLocation();
  const { isAuthenticated, initializeAuth, signOut: storeSignOut } = useAuthStore();
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);

  // Initialize authentication listener on mount
  useEffect(() => {
    console.log('🏗️ App component mounted');
    const unsubscribe = initializeAuth();
    if (unsubscribe) {
      return unsubscribe;
    }
  }, [initializeAuth]);

  // Close mobile menu when clicking a link
  const closeMobileMenu = () => setIsMobileMenuOpen(false);



  return (
    <div className="min-h-screen bg-black text-white">
      {/* Navigation Header */}
      {(
        <nav className="border-b border-gray-800 bg-black/50 backdrop-blur-md sticky top-0 z-50">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div className="flex justify-between items-center h-16">
              <div className="flex items-center">
                {/* Mobile menu button */}
                <button
                  onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
                  className="md:hidden mr-4 p-2 rounded-lg text-gray-300 hover:text-white hover:bg-gray-800 transition-colors"
                  aria-label="Toggle mobile menu"
                >
                  <div className="w-6 h-6 flex flex-col justify-center items-center">
                    <span className={`block h-0.5 w-6 bg-current transform transition-all duration-300 ${isMobileMenuOpen ? 'rotate-45 translate-y-1' : '-translate-y-1'}`}></span>
                    <span className={`block h-0.5 w-6 bg-current transform transition-all duration-300 ${isMobileMenuOpen ? 'opacity-0' : 'opacity-100'}`}></span>
                    <span className={`block h-0.5 w-6 bg-current transform transition-all duration-300 ${isMobileMenuOpen ? '-rotate-45 -translate-y-1' : 'translate-y-1'}`}></span>
                  </div>
                </button>

                <Link to="/" className="flex items-center space-x-2" onClick={closeMobileMenu}>
                  <div className="w-8 h-8 bg-gradient-to-br from-blue-500 to-purple-600 rounded-lg flex items-center justify-center">
                    <span className="text-white font-bold text-sm">AiF</span>
                  </div>
                  <h1 className="text-xl font-semibold text-white">AiFigure</h1>
                </Link>
              </div>

              <div className="hidden md:flex items-center space-x-8">
                <Link
                  to="/"
                  onClick={closeMobileMenu}
                  className={`text-sm font-medium transition-colors hover:text-blue-400 ${location.pathname === '/' ? 'text-blue-400' : 'text-gray-300'
                    }`}
                >
                  Gallery
                </Link>
                <Link
                  to="/create"
                  onClick={closeMobileMenu}
                  className={`text-sm font-medium transition-colors hover:text-blue-400 ${location.pathname === '/create' ? 'text-blue-400' : 'text-gray-300'
                    }`}
                >
                  Create
                </Link>

                <>
                  <Link
                    to={!isAuthenticated ? "/auth" : "/profile"}
                    onClick={closeMobileMenu}
                    className={`text-sm font-medium transition-colors hover:text-blue-400 ${location.pathname === '/profile' ? 'text-blue-400' : 'text-gray-300'
                      }`}
                  >
                    Profile
                  </Link>
                  <Link
                    to="/subscription"
                    onClick={closeMobileMenu}
                    className={`text-sm font-medium transition-colors hover:text-blue-400 ${location.pathname === '/subscription' ? 'text-blue-400' : 'text-gray-300'
                      }`}
                  >
                    Buy Tokens
                  </Link>
                </>
              </div>

              <div className="flex items-center space-x-4">
                {!isAuthenticated ? (
                  <Link
                    to="/auth"
                    onClick={closeMobileMenu}
                    className="bg-gradient-to-r from-blue-600 to-purple-600 text-white px-4 py-2 rounded-lg text-sm font-medium hover:from-blue-700 hover:to-purple-700 transition-all"
                  >
                    Sign In
                  </Link>
                ) : (
                  <button
                    onClick={() => {
                      storeSignOut();
                      closeMobileMenu();
                    }}
                    className="text-gray-300 hover:text-white text-sm font-medium transition-colors"
                  >
                    Sign Out
                  </button>
                )}
              </div>
            </div>
          </div>
        </nav>
      )}

      {/* Mobile Menu Overlay */}
      {isMobileMenuOpen && (
        <div className="md:hidden fixed inset-0 z-40">
          {/* Backdrop */}
          <div
            className="absolute inset-0 bg-black/50 backdrop-blur-sm"
            onClick={closeMobileMenu}
          ></div>

          {/* Menu Panel */}
          <div className="absolute top-16 left-0 right-0 bg-black/95 backdrop-blur-md border-b border-gray-800">
            <div className="px-4 py-6 space-y-4">
              <Link
                to="/"
                onClick={closeMobileMenu}
                className={`block py-3 px-4 rounded-lg text-base font-medium transition-colors hover:bg-gray-800 ${
                  location.pathname === '/' ? 'text-blue-400 bg-gray-800/50' : 'text-gray-300'
                }`}
              >
                Gallery
              </Link>
              <Link
                to="/create"
                onClick={closeMobileMenu}
                className={`block py-3 px-4 rounded-lg text-base font-medium transition-colors hover:bg-gray-800 ${
                  location.pathname === '/create' ? 'text-blue-400 bg-gray-800/50' : 'text-gray-300'
                }`}
              >
                Create
              </Link>
              <Link
                to={!isAuthenticated ? "/auth" : "/profile"}
                onClick={closeMobileMenu}
                className={`block py-3 px-4 rounded-lg text-base font-medium transition-colors hover:bg-gray-800 ${
                  location.pathname === '/profile' ? 'text-blue-400 bg-gray-800/50' : 'text-gray-300'
                }`}
              >
                Profile
              </Link>
              <Link
                to="/subscription"
                onClick={closeMobileMenu}
                className={`block py-3 px-4 rounded-lg text-base font-medium transition-colors hover:bg-gray-800 ${
                  location.pathname === '/subscription' ? 'text-blue-400 bg-gray-800/50' : 'text-gray-300'
                }`}
              >
                Buy Tokens
              </Link>

              <div className="pt-4 border-t border-gray-800">
                {!isAuthenticated ? (
                  <Link
                    to="/auth"
                    onClick={closeMobileMenu}
                    className="block w-full bg-gradient-to-r from-blue-600 to-purple-600 text-white py-3 px-4 rounded-lg text-base font-medium hover:from-blue-700 hover:to-purple-700 transition-all text-center"
                  >
                    Sign In
                  </Link>
                ) : (
                  <button
                    onClick={() => {
                      storeSignOut();
                      closeMobileMenu();
                    }}
                    className="block w-full text-left py-3 px-4 rounded-lg text-base font-medium text-gray-300 hover:text-white hover:bg-gray-800 transition-colors"
                  >
                    Sign Out
                  </button>
                )}
              </div>
            </div>
          </div>
        </div>
      )}

      {/* Structured Data for SEO */}
      <WebsiteStructuredData />
      <OrganizationStructuredData />
      <SoftwareApplicationStructuredData />

      {/* Performance Monitoring */}
      <PerformanceMonitor />

      {/* SEO Meta Tags and Validation */}
      <SEOMeta />
      <SEOValidator />

      {/* Main Content */}
      <main className="flex-1">
        <Routes>
          <Route path="/" element={<Gallery />} />
          <Route path="/create" element={<Create />} />
          <Route path="/profile" element={<Profile />} />
          <Route path="/subscription" element={<Subscription />} />
          <Route path="/about" element={<About />} />
          <Route path="/auth" element={<Auth />} />
          <Route path="/image/:id" element={<ImagePage />} />
          <Route path="/social-preview-test" element={<SocialPreviewTest />} />
        </Routes>
      </main>
    </div>
  );
}

export default App;