import { Link, useLocation } from 'react-router-dom'
import { useRef } from 'react'
import WalletConnect from '../wallet/WalletConnect'
import WalletDisconnectNotice from '../wallet/WalletDisconnectNotice'
import { defaultFrontendExplorerUrl } from '../../config/networks'

interface LayoutProps {
  children: React.ReactNode
}

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

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

  return (
    <div className="min-h-screen relative bg-[#1a1d24] flex flex-col">
      <WalletDisconnectNotice userInitiatedDisconnectRef={userInitiatedDisconnectRef} />
      <nav className="bg-[#252830] border-b border-white/10 sticky top-0 z-50">
        <div className="container mx-auto px-4 max-w-7xl">
          <div className="flex justify-between items-center h-14 gap-4">
            <div className="flex items-center gap-6 min-w-0">
              <Link to="/" className="text-xl font-semibold text-white whitespace-nowrap flex items-center gap-2">
                <span className="text-teal-400 font-bold">DBIS</span>
              </Link>
              <div className="hidden sm:flex gap-1">
                <Link
                  to="/"
                  className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
                    isActive('/') ? 'bg-teal-600 text-white' : 'text-[#A0A0A0] hover:text-white hover:bg-white/5'
                  }`}
                >
                  Bridge
                </Link>
                <Link
                  to="/swap"
                  className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
                    isActive('/swap') ? 'bg-teal-600 text-white' : 'text-[#A0A0A0] hover:text-white hover:bg-white/5'
                  }`}
                >
                  Swap
                </Link>
                <Link
                  to="/history"
                  className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
                    isActive('/history') ? 'bg-teal-600 text-white' : 'text-[#A0A0A0] hover:text-white hover:bg-white/5'
                  }`}
                >
                  History
                </Link>
                <Link
                  to="/wallets"
                  className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
                    isActive('/wallets') ? 'bg-teal-600 text-white' : 'text-[#A0A0A0] hover:text-white hover:bg-white/5'
                  }`}
                >
                  Wallets
                </Link>
                <a
                  href={defaultFrontendExplorerUrl}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="px-4 py-2 rounded-lg text-sm font-medium text-[#A0A0A0] hover:text-white hover:bg-white/5 transition-colors"
                >
                  Explorer
                </a>
              </div>
            </div>
            <div className="flex-shrink-0 w-full sm:w-auto max-w-[200px] sm:max-w-none">
              <WalletConnect onBeforeDisconnect={() => { userInitiatedDisconnectRef.current = true }} />
            </div>
          </div>
        </div>
      </nav>
      <main className="flex-1">{children}</main>
      <footer className="border-t border-white/10 py-6 mt-auto">
        <div className="container mx-auto px-4 max-w-7xl">
          <div className="flex flex-wrap justify-center items-center gap-x-6 gap-y-2 text-sm text-[#A0A0A0]">
            <span>✔ Contracts verified</span>
            <span>✔ Powered by CCIP</span>
            <span>✔ Secure cross-chain messaging</span>
            <span>✔ Trackable on Explorer</span>
            <Link to="/wallets" className="hover:text-teal-400 transition-colors">Wallets</Link>
            <Link to="/docs" className="hover:text-teal-400 transition-colors">Developers</Link>
          </div>
        </div>
      </footer>
    </div>
  )
}
