import { Link, Outlet, useLocation } from 'react-router-dom';

import { useRef } from 'react';

import WalletConnect from '../wallet/WalletConnect';

import WalletDisconnectNotice from '../wallet/WalletDisconnectNotice';

import NasaIcon, { type NasaIconName } from '../icons/NasaIcon';



const PRODUCTS: { path: string; label: string; icon: NasaIconName }[] = [

  { path: '/central-bank', label: 'Central Bank', icon: 'central-bank' },

  { path: '/office-24', label: 'Office 24', icon: 'office' },

  { path: '/trade', label: 'DBIS Trade', icon: 'trade' },

  { path: '/swap', label: 'Digital Swap', icon: 'swap' },

];



export default function OmnlProductLayout() {

  const location = useLocation();

  const userInitiatedDisconnectRef = useRef(false);



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



  return (

    <div className="omnl-app min-h-screen flex flex-col">

      <WalletDisconnectNotice userInitiatedDisconnectRef={userInitiatedDisconnectRef} />

      <header className="omnl-app-header sticky top-0 z-50 border-b">

        <div className="max-w-[1600px] mx-auto px-4 h-14 flex items-center gap-4">

          <Link to="/central-bank" className="flex items-center gap-2 shrink-0">

            <span className="w-8 h-8 border border-[#2d6bb8] bg-[#163a6b] text-[#00d4ff] font-bold flex items-center justify-center text-sm">

              <NasaIcon name="satellite" size={16} className="nasa-icon--telemetry" />

            </span>

            <span className="nasa-nav-brand font-semibold hidden sm:inline text-sm">OMNL Mission Control</span>

          </Link>



          <nav className="flex items-center gap-1 flex-1 overflow-x-auto" aria-label="OMNL products">

            {PRODUCTS.map(({ path, label, icon }) => (

              <Link

                key={path}

                to={path}

                className={`nasa-nav-link shrink-0 ${isActive(path) ? 'nasa-nav-link--active' : ''}`}

              >

                <NasaIcon name={icon} size={14} />

                {label}

              </Link>

            ))}

          </nav>



          <Link

            to="/"

            className="nasa-nav-link hidden md:inline shrink-0 !border-transparent"

          >

            <NasaIcon name="bridge" size={14} />

            Bridge

          </Link>

          <WalletConnect onBeforeDisconnect={() => { userInitiatedDisconnectRef.current = true; }} />

        </div>

      </header>

      <main className="flex-1">

        <Outlet />

      </main>

    </div>

  );

}

