"use client";

import { usePathname } from "next/navigation";
import TabNavigation from "@/components/TabNavigation";
import { motion, AnimatePresence } from "framer-motion";
import { cn } from "@/lib/utils";

/** Wraps /settings/* — hides bottom tab on active chat thread */
export default function SettingsShell({
  children,
}: {
  children: React.ReactNode;
}) {
  const pathname = usePathname();
  const isChatThread = /^\/settings\/chats\/[^/]+\/[^/]+$/.test(pathname ?? "");

  return (
    <section className={cn(!isChatThread && "pb-24")}>
      {children}
      <AnimatePresence>
        {!isChatThread && (
          <motion.div
            key="tab-nav"
            initial={{ y: 80, opacity: 0 }}
            animate={{ y: 0, opacity: 1 }}
            exit={{ y: 100, opacity: 0 }}
            transition={{ duration: 0.35, ease: [0.25, 0.46, 0.45, 0.94] }}
            className="fixed bottom-0 left-0 right-0 z-50"
          >
            <TabNavigation
              currentPage={
                pathname?.startsWith("/settings/chats")
                  ? "/settings/chats"
                  : "/settings"
              }
            />
          </motion.div>
        )}
      </AnimatePresence>
    </section>
  );
}
