"use client";

import { AnimatePresence, motion } from "motion/react";
import type { ReactNode } from "react";
import { dashboardWorkspaceOverviewPanelClassName } from "@/components/dashboard-workspace-panel";
import { useDashboardTab } from "@/lib/dashboard-url-state";
import { cn } from "@/lib/utils";

interface DashboardWorkspaceTabShellProps {
  overview: ReactNode;
  playground: ReactNode;
  disableOverviewInitialAnimation?: boolean;
  overviewClassName?: string;
  overviewKey?: string;
  playgroundClassName?: string;
  playgroundKey?: string;
}

const tabTransition = { duration: 0.2, ease: "easeOut" } as const;

export function DashboardWorkspaceTabShell({
  overview,
  playground,
  disableOverviewInitialAnimation = false,
  overviewClassName,
  overviewKey = "overview-tab",
  playgroundClassName,
  playgroundKey = "playground-tab",
}: DashboardWorkspaceTabShellProps) {
  const isPlaygroundTab = useDashboardTab() === "playground";
  return (
    <div className="flex h-full min-h-0 w-full flex-col">
      <div className="relative min-h-0 flex-1">
        <AnimatePresence mode="wait">
          {isPlaygroundTab ? (
            <motion.div
              key={playgroundKey}
              initial={{ opacity: 0, y: 10 }}
              animate={{ opacity: 1, y: 0 }}
              exit={{ opacity: 0, y: -8 }}
              transition={tabTransition}
              className={cn("absolute inset-0 flex min-h-0 flex-col", playgroundClassName)}
            >
              {playground}
            </motion.div>
          ) : (
            <motion.div
              key={overviewKey}
              initial={disableOverviewInitialAnimation ? false : { opacity: 0, y: 10 }}
              animate={{ opacity: 1, y: 0 }}
              exit={{ opacity: 0, y: -8 }}
              transition={tabTransition}
              className={cn(dashboardWorkspaceOverviewPanelClassName, overviewClassName)}
            >
              {overview}
            </motion.div>
          )}
        </AnimatePresence>
      </div>
    </div>
  );
}
