import { ReactNode } from 'react'
import { NavLink, useLocation } from 'react-router-dom'
import { Gamepad2, Settings, LayoutDashboard, X, Minus } from 'lucide-react'
import { clsx } from 'clsx'

interface LayoutProps {
  children: ReactNode
}

export function Layout({ children }: LayoutProps) {
  const location = useLocation()

  const navItems = [
    { path: '/', icon: LayoutDashboard, label: 'Главная' },
    { path: '/games', icon: Gamepad2, label: 'Игры' },
    { path: '/settings', icon: Settings, label: 'Настройки' },
  ]

  return (
    <div className="h-screen bg-dark-900 flex flex-col overflow-hidden">
      {/* Custom title bar */}
      <div className="titlebar h-8 bg-dark-950 flex items-center justify-between px-2 border-b border-dark-700">
        <div className="flex items-center gap-2">
          <Gamepad2 className="w-4 h-4 text-neon-500" />
          <span className="text-xs font-medium text-gray-400">Game Marathon Tracker</span>
        </div>
        <div className="flex items-center">
          <button
            onClick={() => window.electronAPI.minimizeToTray()}
            className="w-8 h-8 flex items-center justify-center hover:bg-dark-700 transition-colors"
          >
            <Minus className="w-4 h-4 text-gray-400" />
          </button>
          <button
            onClick={() => window.electronAPI.quitApp()}
            className="w-8 h-8 flex items-center justify-center hover:bg-red-600 transition-colors"
          >
            <X className="w-4 h-4 text-gray-400" />
          </button>
        </div>
      </div>

      {/* Main content */}
      <div className="flex-1 overflow-auto p-4">{children}</div>

      {/* Bottom navigation */}
      <nav className="bg-dark-800 border-t border-dark-700 px-2 py-2">
        <div className="flex justify-around">
          {navItems.map((item) => (
            <NavLink
              key={item.path}
              to={item.path}
              className={({ isActive }) =>
                clsx(
                  'flex flex-col items-center gap-1 px-4 py-2 rounded-lg transition-all',
                  isActive
                    ? 'text-neon-500 bg-neon-500/10'
                    : 'text-gray-400 hover:text-gray-300 hover:bg-dark-700'
                )
              }
            >
              <item.icon className="w-5 h-5" />
              <span className="text-xs">{item.label}</span>
            </NavLink>
          ))}
        </div>
      </nav>
    </div>
  )
}
