import { useState, useEffect, useRef, useCallback, lazy, Suspense } from 'react';
import { BrowserRouter as Router, Routes, Route, Link, useLocation } from 'react-router-dom';
import { Menu, X, ChevronRight, Linkedin, Mail } from 'lucide-react';
import { getCookie, setCookie } from './utils/cookies';
import Home from './pages/Home';
const About = lazy(() => import('./pages/About'));
const Contact = lazy(() => import('./pages/Contact'));
const Careers = lazy(() => import('./pages/Careers'));
const JobDetail = lazy(() => import('./pages/JobDetail'));
const Impressum = lazy(() => import('./pages/Impressum'));
const Datenschutz = lazy(() => import('./pages/Datenschutz'));
const AGB = lazy(() => import('./pages/AGB'));
const NotFound = lazy(() => import('./pages/NotFound'));

type Language = 'de' | 'en';

interface Translation {
  nav: {
    home: string;
    about: string;
    careers: string;
    contact: string;
    menu: string;
  };
  values: {
    expertise: { title: string; description: string };
    loyalty: { title: string; description: string };
    results: { title: string; description: string };
  };
  footer: {
    tagline: string;
    navigation: string;
    legal: string;
    imprint: string;
    dataPolicy: string;
    agb: string;
    copyright: string;
  };
}

const translations: Record<Language, Translation> = {
  de: {
    nav: {
      home: 'Home',
      about: 'Über uns',
      careers: 'Karriere',
      contact: 'Kontakt',
      menu: 'Menü',
    },
    values: {
      expertise: {
        title: 'Expertise',
        description: 'Tiefes Wissen und Erfahrung für maximale Datennutzung.',
      },
      loyalty: {
        title: 'Loyalität',
        description: 'Vertrauensvolle, langfristige Beziehungen zu unseren Kunden.',
      },
      results: {
        title: 'Ergebnisse',
        description: 'Der Erfolg unserer Kunden ist unser Maßstab.',
      },
    },
    footer: {
      tagline: 'Expertise. Loyalität. Ergebnisse.',
      navigation: 'Navigation',
      legal: 'Rechtliches',
      imprint: 'Impressum',
      dataPolicy: 'Datenschutz',
      agb: 'AGB',
      copyright: '© 2026 23FINANCE GmbH. Alle Rechte vorbehalten.',
    },
  },
  en: {
    nav: {
      home: 'Home',
      about: 'About',
      careers: 'Careers',
      contact: 'Contact',
      menu: 'Menu',
    },
    values: {
      expertise: {
        title: 'Expertise',
        description: 'Deep knowledge and experience for maximum data utilization.',
      },
      loyalty: {
        title: 'Loyalty',
        description: 'Trusting, long-term relationships with our clients.',
      },
      results: {
        title: 'Results',
        description: 'Our clients\' success is our measure.',
      },
    },
    footer: {
      tagline: 'Expertise. Loyalty. Results.',
      navigation: 'Navigation',
      legal: 'Legal',
      imprint: 'Imprint',
      dataPolicy: 'Data Policy',
      agb: 'Terms & Conditions',
      copyright: '© 2026 23FINANCE GmbH. All rights reserved.',
    },
  },
};

function AppContent() {
  const [language, setLanguage] = useState<Language>(() => {
    const savedLang = getCookie('language') as Language;
    return savedLang || 'de';
  });
  const [menuOpen, setMenuOpen] = useState(false);
  const [scrolled, setScrolled] = useState(false);
  const [scrollDirection, setScrollDirection] = useState<'up' | 'down'>('up');
  const [isMobile, setIsMobile] = useState(() => typeof window !== 'undefined' && window.innerWidth < 1024);
  const lastScrollYRef = useRef(0);
  const location = useLocation();

  const t = translations[language];

  const handleLanguageChange = (newLanguage: Language) => {
    setLanguage(newLanguage);
    setCookie('language', newLanguage);
    window.dispatchEvent(new Event('languageChange'));
  };

  useEffect(() => {
    let ticking = false;

    const handleScroll = () => {
      if (!ticking) {
        requestAnimationFrame(() => {
          const currentScrollY = window.scrollY;
          const prevScrollY = lastScrollYRef.current;

          const nowScrolled = currentScrollY > 50;
          const newDirection = currentScrollY > prevScrollY && currentScrollY > 100
            ? 'down'
            : currentScrollY < prevScrollY
              ? 'up'
              : null;

          lastScrollYRef.current = currentScrollY;

          setScrolled(prev => prev !== nowScrolled ? nowScrolled : prev);
          if (newDirection) {
            setScrollDirection(prev => prev !== newDirection ? newDirection : prev);
          }

          ticking = false;
        });
        ticking = true;
      }
    };
    window.addEventListener('scroll', handleScroll, { passive: true });
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  useEffect(() => {
    setMenuOpen(false);
    setScrollDirection('up');
    window.scrollTo(0, 0);
  }, [location]);

  useEffect(() => {
    if (menuOpen) {
      document.body.style.overflow = 'hidden';
      setScrollDirection('up');
    } else {
      document.body.style.overflow = 'unset';
    }
    return () => {
      document.body.style.overflow = 'unset';
    };
  }, [menuOpen]);

  useEffect(() => {
    let timeout: ReturnType<typeof setTimeout>;
    const checkMobile = () => {
      clearTimeout(timeout);
      timeout = setTimeout(() => {
        setIsMobile(window.innerWidth < 1024);
      }, 150);
    };

    window.addEventListener('resize', checkMobile, { passive: true });
    return () => {
      clearTimeout(timeout);
      window.removeEventListener('resize', checkMobile);
    };
  }, []);

  useEffect(() => {
    const handleEscape = (e: KeyboardEvent) => {
      if (e.key === 'Escape' && menuOpen) {
        setMenuOpen(false);
      }
    };
    window.addEventListener('keydown', handleEscape);
    return () => window.removeEventListener('keydown', handleEscape);
  }, [menuOpen]);

  return (
    <div className="bg-[#0a0a0f] text-white min-h-screen overflow-x-hidden">
      <header
        className="fixed top-0 left-0 right-0 z-40 pointer-events-none transition-transform duration-300 ease-in-out"
        style={{
          transform: scrollDirection === 'down' && isMobile && !menuOpen ? 'translateY(-100%)' : 'translateY(0)',
          paddingTop: 'env(safe-area-inset-top)',
        }}
      >
        <div
          className="absolute left-0 right-0 bg-black/95 lg:bg-transparent pointer-events-auto lg:pointer-events-none"
          style={{
            top: 'calc(-1 * env(safe-area-inset-top))',
            paddingTop: 'env(safe-area-inset-top)',
            bottom: 0,
          }}
        />
        <nav className="relative mx-auto px-4 sm:px-6 lg:px-8 py-4 lg:py-6 flex items-center justify-between gap-2 sm:gap-4 lg:gap-8 max-w-[1920px]">
          <Link to="/" className="flex items-center group relative flex-shrink-0 min-w-0 pointer-events-auto">
            <img
              src="/23F_W_392x80.png"
              alt="23FINANCE Logo"
              className="h-10 sm:h-12 w-auto block transition-opacity duration-500"
              width="392"
              height="80"
              loading="eager"
              decoding="async"
              fetchpriority="high"
            />
            <img
              src="/23F_BL_392x80.png"
              alt=""
              aria-hidden="true"
              className="h-10 sm:h-12 w-auto absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-500"
              width="392"
              height="80"
              loading="eager"
              decoding="async"
            />
          </Link>

          <div className="flex items-center gap-3 sm:gap-4 lg:gap-8 flex-shrink-0 pointer-events-auto">
            <button
              onClick={() => handleLanguageChange(language === 'de' ? 'en' : 'de')}
              className="text-sm font-bold uppercase tracking-wider text-white/70 hover:text-[#7FA6C9] transition-colors duration-300 flex-shrink-0"
              aria-label={`Switch to ${language === 'de' ? 'English' : 'German'}`}
            >
              {language === 'de' ? 'EN' : 'DE'}
            </button>

            <button
              onClick={() => setMenuOpen(!menuOpen)}
              className="flex items-center gap-1.5 sm:gap-2 text-white hover:text-[#7FA6C9] transition-colors duration-300 flex-shrink-0"
              aria-label={menuOpen ? 'Close menu' : 'Open menu'}
              aria-expanded={menuOpen}
            >
              {menuOpen ? <X size={28} strokeWidth={2} /> : <Menu size={28} strokeWidth={2} />}
              <span className="text-sm font-bold uppercase tracking-wider">{t.nav.menu}</span>
            </button>
          </div>
        </nav>
      </header>

      <div
        className={`fixed inset-0 bg-[#0a0a0f] z-50 transition-all duration-700 overflow-hidden ${
          menuOpen ? 'opacity-100 visible' : 'opacity-0 invisible pointer-events-none'
        }`}
        role="dialog"
        aria-modal="true"
        aria-label="Navigation menu"
      >
        <div
          className="absolute right-40 top-1/2 -translate-y-1/2 w-[600px] h-[600px] opacity-5 pointer-events-none"
          style={{
            backgroundImage: 'url(/23F_Stern_BL_500x475.png)',
            backgroundSize: 'contain',
            backgroundRepeat: 'no-repeat',
            backgroundPosition: 'right center',
          }}
        />
        <div className="mx-auto px-4 sm:px-6 lg:px-8 max-w-[1920px] h-full flex items-center justify-center pt-0">
          <nav className="space-y-8 max-w-4xl w-full" aria-label="Main navigation">
            {Object.entries(t.nav)
              .filter(([key]) => ['home', 'about', 'contact', 'careers'].includes(key))
              .map(([key, value], index) => {
                return (
                  <div
                    key={key}
                    className="block"
                    style={{
                      animation: menuOpen ? `fadeInUp 0.6s ease-out ${index * 0.1}s both` : 'none',
                    }}
                  >
                    <Link
                      to={key === 'home' ? '/' : `/${key}`}
                      className="group cursor-pointer inline-flex items-center gap-4 text-5xl lg:text-7xl font-bold text-white hover:text-[#7FA6C9] transition-all duration-500"
                    >
                      <ChevronRight
                        className="opacity-0 -ml-12 group-hover:opacity-100 group-hover:ml-0 transition-all duration-500"
                      />
                      <span>{value}</span>
                    </Link>
                  </div>
                );
              })}
          </nav>
        </div>
      </div>

      <aside className="fixed right-8 top-1/2 -translate-y-1/2 z-50 hidden lg:flex flex-col gap-3" aria-label="Social media links">
        <a
          href="https://www.linkedin.com/company/23finance-gmbh/"
          target="_blank"
          rel="noopener noreferrer"
          className="group relative flex items-center justify-center w-10 h-10 transition-all duration-300"
          aria-label="LinkedIn"
        >
          <Linkedin size={20} className="text-white group-hover:text-[#7FA6C9] transition-colors duration-300" />
          <span className="absolute right-full mr-3 px-3 py-1 bg-[#7FA6C9] text-white text-sm font-medium rounded opacity-0 group-hover:opacity-100 transition-opacity duration-300 whitespace-nowrap pointer-events-none">
            LinkedIn
          </span>
        </a>
        <a
          href="mailto:info@23finance.de"
          className="group relative flex items-center justify-center w-10 h-10 transition-all duration-300"
          aria-label="Email"
        >
          <Mail size={20} className="text-white group-hover:text-[#7FA6C9] transition-colors duration-300" />
          <span className="absolute right-full mr-3 px-3 py-1 bg-[#7FA6C9] text-white text-sm font-medium rounded opacity-0 group-hover:opacity-100 transition-opacity duration-300 whitespace-nowrap pointer-events-none">
            Email
          </span>
        </a>
      </aside>

      <main role="main">
        <Suspense fallback={
          <div className="min-h-screen bg-[#0a0a0a] flex items-center justify-center">
            <img
              src="/23F_W_392x80.png"
              alt="23FINANCE"
              className="w-60 h-auto opacity-60"
              style={{
                animation: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite'
              }}
              width="392"
              height="80"
              decoding="async"
            />
          </div>
        }>
          <Routes>
            <Route path="/" element={<Home language={language} />} />
            <Route path="/about" element={<About language={language} />} />
            <Route path="/contact" element={<Contact language={language} />} />
            <Route path="/careers" element={<Careers language={language} />} />
            <Route path="/careers/:slug" element={<JobDetail language={language} />} />
            <Route path="/impressum" element={<Impressum language={language} />} />
            <Route path="/datenschutz" element={<Datenschutz language={language} />} />
            <Route path="/agb" element={<AGB language={language} />} />
            <Route path="*" element={<NotFound language={language} />} />
          </Routes>
        </Suspense>
      </main>

      <footer className="border-t border-white/5 py-12 relative overflow-hidden" role="contentinfo">
        <div
          className="absolute bottom-0 right-0 w-[400px] h-[400px] opacity-5 pointer-events-none"
          style={{
            backgroundImage: 'url(/23F_Stern_BL_500x475.png)',
            backgroundSize: 'contain',
            backgroundRepeat: 'no-repeat',
            backgroundPosition: 'bottom right',
            transform: 'translate(30%, 30%)',
          }}
        />
        <div className="mx-auto px-4 sm:px-6 lg:px-8 max-w-[1920px] relative z-10">
          <div className="grid grid-cols-1 md:grid-cols-3 gap-12 mb-8 md:divide-x md:divide-[#7FA6C9]/30">
            <div className="md:pr-12">
              <img
                src="/23F_W_392x80.png"
                alt="23FINANCE Logo"
                className="h-12 w-auto mb-4"
                width="392"
                height="80"
                loading="lazy"
                decoding="async"
              />
              <p className="text-white/60 leading-relaxed">{t.footer.tagline}</p>
            </div>
            <div className="md:px-12">
              <h3 className="text-sm font-bold uppercase tracking-wider text-[#7FA6C9] mb-4">
                {t.footer.navigation}
              </h3>
              <nav className="space-y-3" aria-label="Footer navigation">
                {Object.entries(t.nav)
                  .filter(([key]) => ['home', 'about', 'contact', 'careers'].includes(key))
                  .map(([key, value]) => {
                    return (
                      <Link
                        key={key}
                        to={key === 'home' ? '/' : `/${key}`}
                        className="block w-fit text-white/60 hover:text-[#7FA6C9] transition-colors duration-300"
                      >
                        {value}
                      </Link>
                    );
                  })}
              </nav>
            </div>
            <div className="md:pl-12">
              <h3 className="text-sm font-bold uppercase tracking-wider text-[#7FA6C9] mb-4">
                {t.footer.legal}
              </h3>
              <nav className="space-y-3" aria-label="Legal links">
                <Link
                  to="/impressum"
                  className="block w-fit text-white/60 hover:text-[#7FA6C9] transition-colors duration-300"
                >
                  {t.footer.imprint}
                </Link>
                <Link
                  to="/datenschutz"
                  className="block w-fit text-white/60 hover:text-[#7FA6C9] transition-colors duration-300"
                >
                  {t.footer.dataPolicy}
                </Link>
                <Link
                  to="/agb"
                  className="block w-fit text-white/60 hover:text-[#7FA6C9] transition-colors duration-300"
                >
                  {t.footer.agb}
                </Link>
              </nav>
            </div>
          </div>

          <div className="pt-4 text-center text-white/40 text-sm">
            <p>{t.footer.copyright}</p>
          </div>
        </div>
      </footer>

      <style>{`
        @keyframes fadeInUp {
          from {
            opacity: 0;
            transform: translateY(30px);
          }
          to {
            opacity: 1;
            transform: translateY(0);
          }
        }

        ::selection {
          background-color: rgba(255, 107, 53, 0.3);
          color: white;
        }
      `}</style>
    </div>
  );
}

function App() {
  return (
    <Router>
      <AppContent />
    </Router>
  );
}

export default App;