import { Outlet, NavLink, useNavigate } from 'react-router-dom';
import { useWalletStore } from '../store/wallet';

export default function Layout() {
  const { address, lock } = useWalletStore();
  const navigate = useNavigate();

  const handleLock = () => {
    lock();
    navigate('/');
  };

  const navItems = [
    { to: '/wallet', label: 'Dashboard', icon: '◉' },
    { to: '/wallet/send', label: 'Send', icon: '↑' },
    { to: '/wallet/receive', label: 'Receive', icon: '↓' },
    { to: '/wallet/history', label: 'History', icon: '☰' },
    { to: '/wallet/settings', label: 'Settings', icon: '⚙' },
  ];

  return (
    <div className="min-h-screen flex">
      {/* Sidebar */}
      <aside className="w-64 bg-slate-800 border-r border-slate-700 flex flex-col">
        {/* Logo */}
        <div className="p-6 border-b border-slate-700">
          <h1 className="text-xl font-bold text-synor-400">Synor Wallet</h1>
          <p className="text-xs text-slate-500 mt-1">Quantum-Secure</p>
        </div>

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

        {/* Address & Lock */}
        <div className="p-4 border-t border-slate-700">
          <div className="text-xs text-slate-500 mb-2">Connected Address</div>
          <div className="font-mono text-xs text-slate-300 truncate mb-4">
            {address}
          </div>
          <button
            onClick={handleLock}
            className="w-full btn btn-secondary text-sm"
          >
            Lock Wallet
          </button>
        </div>
      </aside>

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