import { NavLink } from "react-router-dom"
import { Home, BarChart3, Wallet, PiggyBank, Settings } from "lucide-react"
import { useAuthStore } from "../store/auth"
import clsx from "clsx"

const OWNER_ID = 1

export default function Navigation() {
  const user = useAuthStore((s) => s.user)
  const isOwner = user?.id === OWNER_ID

  const navItems = [
    { to: "/", icon: Home, label: "Главная" },
    { to: "/tracker", icon: BarChart3, label: "Трекер" },
    isOwner && { to: "/finance", icon: Wallet, label: "Финансы" },
    { to: "/savings", icon: PiggyBank, label: "Накопления" },
    { to: "/settings", icon: Settings, label: "Настройки" },
  ].filter(Boolean)

  return (
    <nav className="fixed bottom-0 left-0 right-0 bg-white/80 dark:bg-gray-900/80 backdrop-blur-xl border-t border-gray-100 dark:border-gray-800 z-50 transition-colors duration-300">
      <div className="max-w-lg mx-auto px-2">
        <div className="flex items-center justify-around py-2">
          {navItems.map(({ to, icon: Icon, label }) => (
            <NavLink
              key={to}
              to={to}
              end={to === "/"}
              className={({ isActive }) =>
                clsx(
                  "flex flex-col items-center gap-0.5 px-2 py-2 rounded-xl transition-all",
                  isActive
                    ? "text-primary-600 dark:text-primary-400 bg-primary-50 dark:bg-primary-900/30"
                    : "text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300"
                )
              }
            >
              <Icon size={20} />
              <span className="text-[10px] font-medium">{label}</span>
            </NavLink>
          ))}
        </div>
      </div>
    </nav>
  )
}
