import { Outlet, NavLink } from 'react-router-dom';
import {
  LayoutDashboard,
  Send,
  Download,
  History,
  Settings,
  Lock,
  Wifi,
  WifiOff,
} from 'lucide-react';
import { useWalletStore } from '../store/wallet';

const navItems = [
  { to: '/dashboard', label: 'Dashboard', icon: LayoutDashboard },
  { to: '/send', label: 'Send', icon: Send },
  { to: '/receive', label: 'Receive', icon: Download },
  { to: '/history', label: 'History', icon: History },
  { to: '/settings', label: 'Settings', icon: Settings },
];

export default function Layout() {
  const { lockWallet, networkStatus, balance } = useWalletStore();

  const handleLock = async () => {
    await lockWallet();
  };

  return (
    <div className="flex h-full">
      {/* Sidebar */}
      <aside className="w-64 bg-gray-900 border-r border-gray-800 flex flex-col">
        {/* Balance display */}
        <div className="p-6 border-b border-gray-800">
          <p className="text-xs text-gray-500 uppercase tracking-wider mb-1">
            Balance
          </p>
          <p className="text-2xl font-bold text-white">
            {balance?.balanceHuman || '0 SYN'}
          </p>
          {balance?.pending ? (
            <p className="text-xs text-gray-500 mt-1">
              + {(balance.pending / 100_000_000).toFixed(8)} SYN pending
            </p>
          ) : null}
        </div>

        {/* Navigation */}
        <nav className="flex-1 p-4 space-y-1">
          {navItems.map(({ to, label, icon: Icon }) => (
            <NavLink
              key={to}
              to={to}
              className={({ isActive }) =>
                `flex items-center gap-3 px-4 py-3 rounded-lg transition-colors ${
                  isActive
                    ? 'bg-synor-600 text-white'
                    : 'text-gray-400 hover:text-white hover:bg-gray-800'
                }`
              }
            >
              <Icon size={20} />
              {label}
            </NavLink>
          ))}
        </nav>

        {/* Footer */}
        <div className="p-4 border-t border-gray-800 space-y-2">
          {/* Network status */}
          <div className="flex items-center gap-2 px-4 py-2 text-sm">
            {networkStatus.connected ? (
              <>
                <Wifi size={16} className="text-green-400" />
                <span className="text-gray-400">
                  {networkStatus.network || 'Connected'}
                </span>
              </>
            ) : (
              <>
                <WifiOff size={16} className="text-red-400" />
                <span className="text-gray-400">Disconnected</span>
              </>
            )}
          </div>

          {/* Lock button */}
          <button
            onClick={handleLock}
            className="w-full flex items-center justify-center gap-2 px-4 py-2 rounded-lg bg-gray-800 hover:bg-gray-700 text-gray-300 hover:text-white transition-colors"
          >
            <Lock size={16} />
            Lock Wallet
          </button>
        </div>
      </aside>

      {/* Main content */}
      <main className="flex-1 overflow-auto p-6">
        <Outlet />
      </main>
    </div>
  );
}