import { Link, useLocation } from 'react-router-dom'
import WalletConnect from '../wallet/WalletConnect'

interface LayoutProps {
  children: React.ReactNode
}

export default function Layout({ children }: LayoutProps) {
  const location = useLocation()

  const isActive = (path: string) => location.pathname === path

  return (
    <div className="min-h-screen relative">
      {/* Animated background overlay */}
      <div className="fixed inset-0 bg-gradient-to-br from-indigo-900/20 via-purple-900/20 to-pink-900/20 pointer-events-none" />
      <div 
        className="fixed inset-0 opacity-30 pointer-events-none portal-grid"
      />
      
      {/* Floating portal particles */}
      <div className="fixed inset-0 pointer-events-none overflow-hidden">
        {[...Array(30)].map((_, i) => (
          <div
            key={i}
            className="absolute w-1 h-1 bg-cyan-400 rounded-full floating-particle"
            style={{
              left: `${Math.random() * 100}%`,
              top: `${Math.random() * 100}%`,
              animationDelay: `${Math.random() * 4}s`,
              animationDuration: `${3 + Math.random() * 4}s`
            }}
          />
        ))}
      </div>
      
      <nav className="bg-white/10 backdrop-blur-xl shadow-2xl border-b border-white/20 sticky top-0 z-50">
        <div className="container mx-auto px-4 max-w-7xl">
          <div className="flex justify-between items-center h-16">
            <div className="flex items-center gap-8">
              <Link to="/" className="text-2xl font-black bg-gradient-to-r from-white via-blue-100 to-purple-100 bg-clip-text text-transparent drop-shadow-lg">
                🌉 Bridge DApp
              </Link>
              <div className="flex gap-2">
                <Link
                  to="/"
                  className={`px-5 py-2.5 rounded-xl font-semibold transition-all duration-300 ${
                    isActive('/')
                      ? 'bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500 text-white shadow-lg shadow-purple-500/50 scale-105'
                      : 'text-white/90 hover:text-white hover:bg-white/10 backdrop-blur-sm border border-white/20'
                  }`}
                >
                  Bridge
                </Link>
                <Link
                  to="/swap"
                  className={`px-5 py-2.5 rounded-xl font-semibold transition-all duration-300 ${
                    isActive('/swap')
                      ? 'bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500 text-white shadow-lg shadow-purple-500/50 scale-105'
                      : 'text-white/90 hover:text-white hover:bg-white/10 backdrop-blur-sm border border-white/20'
                  }`}
                >
                  Swap
                </Link>
                <Link
                  to="/reserve"
                  className={`px-5 py-2.5 rounded-xl font-semibold transition-all duration-300 ${
                    isActive('/reserve')
                      ? 'bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500 text-white shadow-lg shadow-purple-500/50 scale-105'
                      : 'text-white/90 hover:text-white hover:bg-white/10 backdrop-blur-sm border border-white/20'
                  }`}
                >
                  Reserve
                </Link>
                <Link
                  to="/history"
                  className={`px-5 py-2.5 rounded-xl font-semibold transition-all duration-300 ${
                    isActive('/history')
                      ? 'bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500 text-white shadow-lg shadow-purple-500/50 scale-105'
                      : 'text-white/90 hover:text-white hover:bg-white/10 backdrop-blur-sm border border-white/20'
                  }`}
                >
                  History
                </Link>
                <Link
                  to="/admin"
                  className={`px-5 py-2.5 rounded-xl font-semibold transition-all duration-300 ${
                    isActive('/admin')
                      ? 'bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500 text-white shadow-lg shadow-purple-500/50 scale-105'
                      : 'text-white/90 hover:text-white hover:bg-white/10 backdrop-blur-sm border border-white/20'
                  }`}
                >
                  Admin
                </Link>
              </div>
            </div>
            <WalletConnect />
          </div>
        </div>
      </nav>
      <main>{children}</main>
    </div>
  )
}