import { Outlet, NavLink } from 'react-router-dom';
import {
  LayoutDashboard,
  Send,
  Download,
  History,
  Settings,
  Lock,
  Wifi,
  WifiOff,
  Server,
  Pickaxe,
} from 'lucide-react';
import { useWalletStore } from '../store/wallet';
import { useNodeStore } from '../store/node';
import { useMiningStore, formatHashrate } from '../store/mining';

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 },
];

const advancedNavItems = [
  { to: '/node', label: 'Node', icon: Server },
  { to: '/mining', label: 'Mining', icon: Pickaxe },
  { to: '/settings', label: 'Settings', icon: Settings },
];

export default function Layout() {
  const { lockWallet, balance } = useWalletStore();
  const nodeStatus = useNodeStore((state) => state.status);
  const miningStatus = useMiningStore((state) => state.status);

  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>
          ))}

          {/* Separator */}
          <div className="pt-4 pb-2">
            <p className="px-4 text-xs text-gray-600 uppercase tracking-wider">
              Advanced
            </p>
          </div>

          {/* Advanced nav items with status indicators */}
          {advancedNavItems.map(({ to, label, icon: Icon }) => (
            <NavLink
              key={to}
              to={to}
              className={({ isActive }) =>
                `flex items-center justify-between px-4 py-3 rounded-lg transition-colors ${
                  isActive
                    ? 'bg-synor-600 text-white'
                    : 'text-gray-400 hover:text-white hover:bg-gray-800'
                }`
              }
            >
              <div className="flex items-center gap-3">
                <Icon size={20} />
                {label}
              </div>
              {/* Status indicators */}
              {to === '/node' && nodeStatus.isConnected && (
                <span className="w-2 h-2 rounded-full bg-green-400" />
              )}
              {to === '/mining' && miningStatus.isMining && (
                <span className="text-xs text-synor-400">
                  {formatHashrate(miningStatus.hashrate)}
                </span>
              )}
            </NavLink>
          ))}
        </nav>

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

          {/* Block height */}
          {nodeStatus.isConnected && nodeStatus.blockHeight > 0 && (
            <div className="px-4 text-xs text-gray-500">
              Block #{nodeStatus.blockHeight.toLocaleString()}
            </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>
  );
}