import { ReactNode } from "react";
import { useLocation, useNavigate } from "react-router-dom";
import { Home, PieChart, Plus, MessageSquare, Wallet, Bell, Settings } from "lucide-react";
import { cn } from "@/lib/utils";
import MainStockMenu from "@/components/stock/MainStockMenu";

interface AppLayoutProps {
  children: ReactNode;
}

const AppLayout = ({ children }: AppLayoutProps) => {
  const location = useLocation();
  const navigate = useNavigate();
  const currentPath = location.pathname;

  const navItems = [
    { icon: Home, label: "Home", path: "/" },
    { icon: Wallet, label: "Transactions", path: "/transactions" },
    { icon: Plus, label: "Add", path: "/add-transaction", isAction: true },
    { icon: PieChart, label: "Reports", path: "/reports" },
    { icon: MessageSquare, label: "Messages", path: "/messages" },
  ];

  // Hide the stock menu on stock management pages
  const showStockMenu = !currentPath.startsWith('/stock');

  return (
    <div className="flex flex-col h-full bg-gradient-to-b from-[#f8fafc] to-[#f7f8f2] text-black">
      <div className="fixed top-4 right-4 z-10">
        <button
          onClick={() => navigate('/settings')}
          className="p-2 rounded-full bg-white/80 backdrop-blur-sm shadow-md hover:bg-white/90 transition-all"
        >
          <Settings size={20} className="text-[#00a651]" />
        </button>
      </div>
      
      {showStockMenu && <MainStockMenu />}
      
      <main className="flex-1 pb-16 overflow-auto">
        <div className="animate-fade-in">
          {children}
        </div>
      </main>
      
      <nav className="fixed bottom-0 left-0 right-0 bg-white/80 backdrop-blur-lg border-t border-slate-200 shadow-lg">
        <div className="flex justify-around items-center h-16 px-2 max-w-screen-lg mx-auto">
          {navItems.map((item) => (
            <button
              key={item.path}
              onClick={() => navigate(item.path)}
              className={cn(
                "flex flex-col items-center justify-center w-full h-full transition-all duration-200",
                item.isAction ? "relative -top-5 md:-top-6" : "",
                currentPath === item.path && !item.isAction
                  ? "text-[#00a651]"
                  : "text-slate-500 hover:text-slate-800"
              )}
            >
              {item.isAction ? (
                <div className="flex items-center justify-center w-12 h-12 md:w-14 md:h-14 rounded-full bg-[#e31b23] text-white shadow-lg shadow-red-400/50">
                  <item.icon size={22} className="md:size-24" />
                </div>
              ) : (
                <>
                  <item.icon size={20} className="md:size-22" />
                  <span className="text-xs md:text-sm mt-1">{item.label}</span>
                </>
              )}
            </button>
          ))}
        </div>
      </nav>
    </div>
  );
};

export default AppLayout;