"use client";

import { usePathname } from "next/navigation";
import { BottomNav } from "@/components/bottom-nav/bottom-nav";
import { Sidebar } from "@/components/sidebar/sidebar";
import { ThemeToggle } from "@/components/theme-toggle";
import type { ReactNode } from "react";

type PanelShellProps = {
  children: ReactNode;
};

export function PanelShell({ children }: PanelShellProps) {
  const pathname = usePathname();
  const hideDefaultHeader =
    pathname === "/panel" ||
    pathname.startsWith("/panel/tasks") ||
    pathname.startsWith("/panel/habits") ||
    pathname.startsWith("/panel/goals") ||
    pathname.startsWith("/panel/profile") ||
    pathname.startsWith("/panel/subscription") ||
    pathname.startsWith("/panel/ai") ||
    pathname.startsWith("/panel/audio");
  const hideBottomNav =
    pathname.startsWith("/panel/ai/chat/") ||
    pathname.startsWith("/panel/ai/conversations/");

  return (
    <div className="flex min-h-full min-w-0 flex-1 overflow-x-hidden">
      <Sidebar />

      <div
        className={`flex min-h-full min-w-0 flex-1 flex-col overflow-x-hidden md:ps-64 ${
          hideBottomNav ? "pb-0" : "pb-28 md:pb-0"
        }`}
      >
        {!hideDefaultHeader ? (
          <header className="flex items-center justify-end border-b border-border px-6 py-4 md:hidden">
            <ThemeToggle />
          </header>
        ) : null}

        <main className="flex min-w-0 flex-1 flex-col overflow-x-hidden">{children}</main>

        {!hideBottomNav ? <BottomNav /> : null}
      </div>
    </div>
  );
}