import { NavLink } from "react-router-dom";
import { motion } from "framer-motion";
import { Home, Database, ListMusic, Users, Menu } from "lucide-react";
import { useState } from "react";

const navItems = [
  { path: "/", label: "Home", icon: Home },
  { path: "/database", label: "Database", icon: Database },
  { path: "/worship-lists", label: "Lists", icon: ListMusic },
  { path: "/profiles", label: "Profiles", icon: Users },
];

function MobileNav() {
  const [showMore, setShowMore] = useState(false);

  return (
    <>
      {/* Bottom Navigation Bar */}
      <nav className="fixed bottom-0 left-0 right-0 z-50 glass-nav bg-white/95 border-t border-gray-200 safe-area-pb">
        <div className="flex items-center justify-around h-16 px-2">
          {navItems.map((item) => (
            <NavLink
              key={item.path}
              to={item.path}
              className={({ isActive }) => `
                flex flex-col items-center justify-center flex-1 py-2 rounded-xl
                transition-all duration-200
                ${isActive ? "text-primary-600" : "text-gray-500"}
              `}
            >
              {({ isActive }) => (
                <>
                  <div
                    className={`relative p-1.5 rounded-xl transition-colors ${isActive ? "bg-primary-100" : ""}`}
                  >
                    <item.icon className="w-5 h-5" />
                    {isActive && (
                      <motion.div
                        layoutId="mobile-nav-indicator"
                        className="absolute -bottom-1 left-1/2 -translate-x-1/2 w-1 h-1 bg-primary-500 rounded-full"
                        transition={{
                          type: "spring",
                          stiffness: 500,
                          damping: 30,
                        }}
                      />
                    )}
                  </div>
                  <span className="text-[10px] font-medium mt-0.5">
                    {item.label}
                  </span>
                </>
              )}
            </NavLink>
          ))}

          {/* More Menu */}
          <button
            onClick={() => setShowMore(!showMore)}
            className={`flex flex-col items-center justify-center flex-1 py-2 rounded-xl
              transition-all duration-200
              ${showMore ? "text-primary-600" : "text-gray-500"}
            `}
          >
            <div
              className={`p-1.5 rounded-xl transition-colors ${showMore ? "bg-primary-100" : ""}`}
            >
              <Menu className="w-5 h-5" />
            </div>
            <span className="text-[10px] font-medium mt-0.5">More</span>
          </button>
        </div>
      </nav>

      {/* More Menu Overlay */}
      {showMore && (
        <>
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            className="fixed inset-0 bg-black/20 backdrop-blur-sm z-40"
            onClick={() => setShowMore(false)}
          />
          <motion.div
            initial={{ y: "100%" }}
            animate={{ y: 0 }}
            exit={{ y: "100%" }}
            transition={{ type: "spring", damping: 25, stiffness: 300 }}
            className="fixed bottom-16 left-0 right-0 z-50 bg-white rounded-t-3xl shadow-lg safe-area-pb"
          >
            <div className="p-4 grid grid-cols-3 gap-4">
              <NavLink
                to="/settings"
                onClick={() => setShowMore(false)}
                className="flex flex-col items-center gap-2 p-4 rounded-2xl bg-gray-50 hover:bg-gray-100 transition-colors"
              >
                <div className="w-12 h-12 rounded-xl bg-primary-100 flex items-center justify-center">
                  <span className="text-xl">⚙️</span>
                </div>
                <span className="text-sm font-medium text-gray-700">
                  Settings
                </span>
              </NavLink>

              <NavLink
                to="/admin"
                onClick={() => setShowMore(false)}
                className="flex flex-col items-center gap-2 p-4 rounded-2xl bg-gray-50 hover:bg-gray-100 transition-colors"
              >
                <div className="w-12 h-12 rounded-xl bg-red-100 flex items-center justify-center">
                  <span className="text-xl">🛡️</span>
                </div>
                <span className="text-sm font-medium text-gray-700">Admin</span>
              </NavLink>

              <button
                onClick={() => setShowMore(false)}
                className="flex flex-col items-center gap-2 p-4 rounded-2xl bg-gray-50 hover:bg-gray-100 transition-colors"
              >
                <div className="w-12 h-12 rounded-xl bg-green-100 flex items-center justify-center">
                  <span className="text-xl">📤</span>
                </div>
                <span className="text-sm font-medium text-gray-700">
                  Upload
                </span>
              </button>
            </div>

            {/* Handle */}
            <div className="absolute top-2 left-1/2 -translate-x-1/2 w-10 h-1 bg-gray-300 rounded-full" />
          </motion.div>
        </>
      )}
    </>
  );
}

export default MobileNav;
