"use client";

import { motion } from "framer-motion";
import { usePathname } from "next/navigation";
import { useEffect, useState } from "react";
import {
	type ChatConversation,
	useGetConversationsQuery,
} from "@/app/api/queries/useGetConversationsQuery";
import type { Settings } from "@/app/api/queries/useGetSettingsQuery";
import { OnboardingContent } from "@/app/onboarding/_components/onboarding-content";
import { ProgressBar } from "@/app/onboarding/_components/progress-bar";
import { AnimatedConditional } from "@/components/animated-conditional";
import { Header } from "@/components/header";
import { Navigation } from "@/components/navigation";
import { useAuth } from "@/contexts/auth-context";
import { useChat } from "@/contexts/chat-context";
import {
	ANIMATION_DURATION,
	HEADER_HEIGHT,
	ONBOARDING_ASSISTANT_MESSAGE_KEY,
	ONBOARDING_CARD_STEPS_KEY,
	ONBOARDING_SELECTED_NUDGE_KEY,
	ONBOARDING_STEP_KEY,
	ONBOARDING_UPLOAD_STEPS_KEY,
	SIDEBAR_WIDTH,
	TOTAL_ONBOARDING_STEPS,
} from "@/lib/constants";
import { cn } from "@/lib/utils";

export function ChatRenderer({
	settings,
	children,
}: {
	settings: Settings | undefined;
	children: React.ReactNode;
}) {
	const pathname = usePathname();
	const { isAuthenticated, isNoAuthMode } = useAuth();
	const {
		endpoint,
		refreshTrigger,
		refreshConversations,
		startNewConversation,
	} = useChat();

	// Initialize onboarding state based on local storage and settings
	const [currentStep, setCurrentStep] = useState<number>(() => {
		if (typeof window === "undefined") return 0;
		const savedStep = localStorage.getItem(ONBOARDING_STEP_KEY);
		return savedStep !== null ? parseInt(savedStep, 10) : 0;
	});

	const [showLayout, setShowLayout] = useState<boolean>(() => {
		if (typeof window === "undefined") return false;
		const savedStep = localStorage.getItem(ONBOARDING_STEP_KEY);
		// Show layout if settings.edited is true and if no onboarding step is saved
		const isEdited = settings?.edited ?? true;
		return isEdited ? savedStep === null : false;
	});

	// Only fetch conversations on chat page
	const isOnChatPage = pathname === "/" || pathname === "/chat";
	const { data: conversations = [], isLoading: isConversationsLoading } =
		useGetConversationsQuery(endpoint, refreshTrigger, {
			enabled: isOnChatPage && (isAuthenticated || isNoAuthMode),
		}) as { data: ChatConversation[]; isLoading: boolean };

	const handleNewConversation = () => {
		refreshConversations();
		startNewConversation();
	};

	// Save current step to local storage whenever it changes
	useEffect(() => {
		if (typeof window !== "undefined" && !showLayout) {
			localStorage.setItem(ONBOARDING_STEP_KEY, currentStep.toString());
		}
	}, [currentStep, showLayout]);

	const handleStepComplete = () => {
		if (currentStep < TOTAL_ONBOARDING_STEPS - 1) {
			setCurrentStep(currentStep + 1);
		} else {
			// Onboarding is complete - remove from local storage and show layout
			if (typeof window !== "undefined") {
				localStorage.removeItem(ONBOARDING_STEP_KEY);
				localStorage.removeItem(ONBOARDING_ASSISTANT_MESSAGE_KEY);
				localStorage.removeItem(ONBOARDING_SELECTED_NUDGE_KEY);
				localStorage.removeItem(ONBOARDING_CARD_STEPS_KEY);
				localStorage.removeItem(ONBOARDING_UPLOAD_STEPS_KEY);
			}
			setShowLayout(true);
		}
	};

	const handleStepBack = () => {
		if (currentStep > 0) {
			setCurrentStep(currentStep - 1);
		}
	};

	const handleSkipOnboarding = () => {
		// Skip onboarding by marking it as complete
		if (typeof window !== "undefined") {
			localStorage.removeItem(ONBOARDING_STEP_KEY);
			localStorage.removeItem(ONBOARDING_ASSISTANT_MESSAGE_KEY);
			localStorage.removeItem(ONBOARDING_SELECTED_NUDGE_KEY);
			localStorage.removeItem(ONBOARDING_CARD_STEPS_KEY);
			localStorage.removeItem(ONBOARDING_UPLOAD_STEPS_KEY);
		}
		setShowLayout(true);
	};

	// List of paths with smaller max-width
	const smallWidthPaths = ["/settings", "/upload"];
	const isSmallWidthPath = smallWidthPaths.some((path) =>
		pathname.startsWith(path),
	);

	const x = showLayout ? "0px" : `calc(-${SIDEBAR_WIDTH / 2}px + 50vw)`;
	const y = showLayout ? "0px" : `calc(-${HEADER_HEIGHT / 2}px + 50vh)`;
	const translateY = showLayout ? "0px" : `-50vh`;
	const translateX = showLayout ? "0px" : `-50vw`;

	// For all other pages, render with Langflow-styled navigation and task menu
	return (
		<>
			<AnimatedConditional
				className="[grid-area:header] bg-background border-b"
				vertical
				slide
				isOpen={showLayout}
				delay={ANIMATION_DURATION / 2}
			>
				<Header />
			</AnimatedConditional>

			{/* Sidebar Navigation */}
			<AnimatedConditional
				isOpen={showLayout}
				slide
				className={`border-r bg-background overflow-hidden [grid-area:nav] w-[${SIDEBAR_WIDTH}px]`}
			>
				{showLayout && (
					<Navigation
						conversations={conversations}
						isConversationsLoading={isConversationsLoading}
						onNewConversation={handleNewConversation}
					/>
				)}
			</AnimatedConditional>

			{/* Main Content */}
			<main className="overflow-hidden w-full flex items-center justify-center [grid-area:main]">
				<motion.div
					initial={{
						width: showLayout ? "100%" : "100vw",
						height: showLayout ? "100%" : "100vh",
						x: x,
						y: y,
						translateX: translateX,
						translateY: translateY,
					}}
					animate={{
						width: showLayout ? "100%" : "850px",
						borderRadius: showLayout ? "0" : "16px",
						border: showLayout ? "0" : "1px solid hsl(var(--border))",
						height: showLayout ? "100%" : "800px",
						x: x,
						y: y,
						translateX: translateX,
						translateY: translateY,
					}}
					transition={{
						duration: ANIMATION_DURATION,
						ease: "easeOut",
					}}
					className={cn(
						"flex h-full w-full max-w-full max-h-full items-center justify-center overflow-y-auto",
						!showLayout &&
							"absolute max-h-[calc(100vh-190px)] shadow-[0px_2px_4px_-2px_#0000001A,0px_4px_6px_-1px_#0000001A]",
						showLayout && !isOnChatPage && "bg-background",
					)}
				>
					<div
						className={cn(
							"h-full bg-background w-full",
							showLayout && !isOnChatPage && "p-6 container",
							showLayout && isSmallWidthPath && "max-w-[850px] ml-0",
							!showLayout && "p-0 py-2",
						)}
					>
						<motion.div
							initial={{
								opacity: showLayout ? 1 : 0,
							}}
							animate={{
								opacity: "100%",
							}}
							transition={{
								duration: ANIMATION_DURATION,
								ease: "easeOut",
								delay: ANIMATION_DURATION,
							}}
							className={cn("w-full h-full")}
						>
							{showLayout && (
								<div className={cn("w-full h-full", !showLayout && "hidden")}>
									{children}
								</div>
							)}
							{!showLayout && (
								<OnboardingContent
									handleStepComplete={handleStepComplete}
									handleStepBack={handleStepBack}
									currentStep={currentStep}
								/>
							)}
						</motion.div>
					</div>
				</motion.div>
				<motion.div
					initial={{ opacity: 0, y: 20 }}
					animate={{ opacity: showLayout ? 0 : 1, y: showLayout ? 20 : 0 }}
					transition={{ duration: ANIMATION_DURATION, ease: "easeOut" }}
					className={cn("absolute bottom-6 left-0 right-0")}
				>
					<ProgressBar
						currentStep={currentStep}
						totalSteps={TOTAL_ONBOARDING_STEPS}
						onSkip={handleSkipOnboarding}
					/>
				</motion.div>
			</main>
		</>
	);
}