import React, { Fragment } from 'react';
import { useNavigate } from 'react-router-dom';
import { Menu, Transition } from '@headlessui/react';
import { useWallet } from '../context/WalletContext';
import { useTranslation } from 'react-i18next';
import BottomNavigation from './BottomNavigation';
import TrustLogo from './TrustLogo';

const Layout = ({ children }) => {
  const navigate = useNavigate();
  const { t } = useTranslation();
  const { activeWallet, userSessionWalletList, logout, switchWallet, sessionLogin } = useWallet();

  const handleLogout = () => {
    logout();
    navigate('/login');
  };

  return (
    <div className="min-h-screen bg-[#1b1b1c]">
      <nav className="bg-gray-800/50 backdrop-blur-sm border-b border-gray-700">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between h-16">
            <div className="flex items-center">
              {/* Используем фирменный логотип, чтобы не мигал старый бренд */}
              <button
                type="button"
                onClick={() => navigate('/')}
                className="flex items-center gap-3 focus:outline-none"
                aria-label="Вернуться на главную"
              >
                <TrustLogo className="w-10 h-auto" />
                <div className="flex flex-col">
                  <span className="text-base font-semibold text-white leading-tight">Trustarter</span>
                  <span className="text-xs text-gray-400">Crypto platform</span>
                </div>
              </button>
            </div>

            <div className="flex items-center space-x-4">
              {activeWallet && (
                <Menu as="div" className="relative">
                  <Menu.Button className="flex items-center space-x-3 px-4 py-2 rounded-lg bg-gray-700 hover:bg-gray-600 transition-colors">
                    <div className="text-left">
                      <div className="text-sm font-medium text-white">
                        Wallet
                      </div>
                      <div className="text-xs text-gray-400">
                        {activeWallet.tokens?.length || 0} tokens
                      </div>
                    </div>
                    <svg className="w-5 h-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
                      <path fillRule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clipRule="evenodd" />
                    </svg>
                  </Menu.Button>

                  <Transition
                    as={Fragment}
                    enter="transition ease-out duration-100"
                    enterFrom="transform opacity-0 scale-95"
                    enterTo="transform opacity-100 scale-100"
                    leave="transition ease-in duration-75"
                    leaveFrom="transform opacity-100 scale-100"
                    leaveTo="transform opacity-0 scale-95"
                  >
                    <Menu.Items 
                      className="absolute right-0 mt-2 w-56 origin-top-right rounded-lg bg-gray-800 shadow-xl ring-1 ring-black ring-opacity-5 focus:outline-none border border-gray-700"
                      data-headlessui-state="walletMenu"
                    >
                      <div className="py-1" data-headlessui-state="walletMenuBlock">
                        {userSessionWalletList.map((item, index) => {
                          const isActive = activeWallet?.mnemonic === item.wallet?.mnemonic;
                          return (
                            <Menu.Item key={index}>
                              {({ active }) => (
                                <button
                                  onClick={async () => {
                                    if (!isActive && item.wallet?.mnemonic) {
                                      await switchWallet(item.wallet.mnemonic, index);
                                      navigate('/');
                                    }
                                  }}
                                  className={`${
                                    active ? 'bg-gray-700' : ''
                                  } ${
                                    isActive ? 'bg-blue-900/30' : ''
                                  } group flex w-full items-center justify-between px-4 py-3 text-sm text-gray-300`}
                                >
                                  <div className="flex items-center space-x-3">
                                    <div className="w-8 h-8 rounded-full bg-gradient-to-br from-green-500 to-blue-600 flex items-center justify-center text-white font-bold text-xs">
                                      {(item.walletName || `Wallet ${index + 1}`).charAt(0)}
                                    </div>
                                    <div className="text-left">
                                      <div className="font-medium">{item.walletName || `Wallet ${index + 1}`}</div>
                                      <div className="text-xs text-gray-500">
                                        {item.wallet?.tokens?.length || 0} tokens
                                      </div>
                                    </div>
                                  </div>
                                  {isActive && (
                                    <svg className="w-5 h-5 text-blue-500" fill="currentColor" viewBox="0 0 20 20">
                                      <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
                                    </svg>
                                  )}
                                </button>
                              )}
                            </Menu.Item>
                          );
                        })}
                        <div className="border-t border-gray-700 my-1"></div>
                        <Menu.Item>
                          {({ active }) => (
                            <button
                              onClick={() => navigate('/wallets')}
                              className={`${
                                active ? 'bg-gray-700' : ''
                              } group flex w-full items-center px-4 py-2 text-sm text-blue-400`}
                            >
                              {t('Add new wallet')}
                            </button>
                          )}
                        </Menu.Item>
                        <Menu.Item>
                          {({ active }) => (
                            <button
                              onClick={() => navigate('/wallets')}
                              className={`${
                                active ? 'bg-gray-700' : ''
                              } group flex w-full items-center px-4 py-2 text-sm text-gray-300`}
                            >
                              {t('Manage wallets')}
                            </button>
                          )}
                        </Menu.Item>
                      </div>
                    </Menu.Items>
                  </Transition>
                </Menu>
              )}

              <Menu as="div" className="relative">
                <Menu.Button className="p-2 rounded-lg bg-gray-700 hover:bg-gray-600 transition-colors">
                  <svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
                  </svg>
                </Menu.Button>

                <Transition
                  as={Fragment}
                  enter="transition ease-out duration-100"
                  enterFrom="transform opacity-0 scale-95"
                  enterTo="transform opacity-100 scale-100"
                  leave="transition ease-in duration-75"
                  leaveFrom="transform opacity-100 scale-100"
                  leaveTo="transform opacity-0 scale-95"
                >
                  <Menu.Items className="absolute right-0 mt-2 w-56 origin-top-right rounded-lg bg-gray-800 shadow-xl ring-1 ring-black ring-opacity-5 focus:outline-none border border-gray-700">
                    <div className="py-1">
                      <Menu.Item>
                        {({ active }) => (
                          <button
                            onClick={() => navigate('/settings')}
                            className={`${
                              active ? 'bg-gray-700' : ''
                            } group flex w-full items-center px-4 py-2 text-sm text-gray-300`}
                          >
                            {t('Settings')}
                          </button>
                        )}
                      </Menu.Item>
                      <Menu.Item>
                        {({ active }) => (
                          <button
                            onClick={() => navigate('/manage-crypto')}
                            className={`${
                              active ? 'bg-gray-700' : ''
                            } group flex w-full items-center px-4 py-2 text-sm text-gray-300`}
                          >
                            {t('Manage crypto')}
                          </button>
                        )}
                      </Menu.Item>
                      <div className="border-t border-gray-700 my-1"></div>
                      <Menu.Item>
                        {({ active }) => (
                          <button
                            onClick={handleLogout}
                            className={`${
                              active ? 'bg-gray-700' : ''
                            } group flex w-full items-center px-4 py-2 text-sm text-red-400`}
                          >
                            {t('Logout')}
                          </button>
                        )}
                      </Menu.Item>
                    </div>
                  </Menu.Items>
                </Transition>
              </Menu>
            </div>
          </div>
        </div>
      </nav>

      <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 pb-24">
        {children}
      </main>

      <BottomNavigation />
    </div>
  );
};

export default Layout;
