import type React from "react";
import { useConversationHistoryPage } from "../../hooks/use-conversation-history-page";
import { useSupport } from "../../provider";
import { PENDING_CONVERSATION_ID } from "../../utils/id";
import { AvatarStack } from "../components/avatar-stack";
import { CoButton } from "../components/button";
import { ConversationButtonLink } from "../components/conversation-button-link";
import { FooterSurface } from "../components/footer-surface";
import { Header } from "../components/header";
import Icon from "../components/icons";
import { Watermark } from "../components/watermark";
import { useSupportSlotOverrides } from "../context/slot-overrides";
import { useSupportNavigation } from "../store/support-store";
import { Text, useSupportText } from "../text";
import { cn } from "../utils";

type ConversationHistoryPageProps = {
	params?: undefined;
};

/**
 * Conversation history page with list of past conversations and pagination.
 */
export const ConversationHistoryPage: React.FC<ConversationHistoryPageProps> = (
	_props = {}
) => {
	const { goBack, canGoBack, navigate } = useSupportNavigation();
	const { availableAIAgents, availableHumanAgents } = useSupport();
	const text = useSupportText();
	const { slots, slotProps } = useSupportSlotOverrides();
	const ConversationHistoryPageSlot = slots.conversationHistoryPage;
	const conversationHistoryPageSlotProps = slotProps.conversationHistoryPage;

	const history = useConversationHistoryPage({
		initialVisibleCount: 4,
		onOpenConversation: (conversationId) => {
			navigate({
				page: "CONVERSATION",
				params: {
					conversationId,
				},
			});
		},
		onStartConversation: (initialMessage) => {
			navigate({
				page: "CONVERSATION",
				params: {
					conversationId: PENDING_CONVERSATION_ID,
					initialMessage,
				},
			});
		},
	});

	const handleGoBack = () => {
		if (canGoBack) {
			goBack();
		} else {
			navigate({
				page: "HOME",
			});
		}
	};

	if (ConversationHistoryPageSlot) {
		return (
			<ConversationHistoryPageSlot
				{...conversationHistoryPageSlotProps}
				availableAIAgents={availableAIAgents}
				availableHumanAgents={availableHumanAgents}
				canGoBack={canGoBack}
				className={cn(conversationHistoryPageSlotProps?.className)}
				conversations={history.conversations}
				data-page="CONVERSATION_HISTORY"
				data-slot="conversation-history-page"
				error={history.error}
				hasMore={history.hasMore}
				isLoading={history.isLoading}
				onGoBack={handleGoBack}
				openConversation={history.openConversation}
				remainingCount={history.remainingCount}
				showAll={history.showAll}
				showMore={history.showMore}
				startConversation={history.startConversation}
				visibleConversations={history.visibleConversations}
				visibleCount={history.visibleCount}
			/>
		);
	}

	return (
		<div
			className="flex h-full flex-col"
			data-page="CONVERSATION_HISTORY"
			data-slot="conversation-history-page"
		>
			<Header onGoBack={handleGoBack} page="CONVERSATION_HISTORY">
				<div className="flex w-full items-center justify-between gap-2 py-3">
					<div className="flex flex-col">
						<h2 className="max-w-xs text-balance font-co-sans text-md leading-normal">
							{text("page.conversationHistory.title")}
						</h2>
					</div>
					<AvatarStack
						aiAgents={availableAIAgents}
						gapWidth={2}
						hideDefaultAIAgent={false}
						humanAgents={availableHumanAgents}
						size={32}
						spacing={28}
					/>
				</div>
			</Header>

			<FooterSurface
				className="flex flex-1 flex-col items-center justify-between gap-2 px-6 pb-4"
				page="CONVERSATION_HISTORY"
			>
				{history.conversations.length > 0 && (
					<div className="flex w-full flex-col items-center justify-between gap-2 pt-4">
						<div className="flex w-full flex-col overflow-clip rounded-co border border-co-border/80">
							{history.visibleConversations.map((conversation) => (
								<ConversationButtonLink
									className="rounded-none"
									conversation={conversation}
									key={conversation.id}
									onClick={() => history.openConversation(conversation.id)}
								/>
							))}
						</div>
						{history.hasMore && (
							<CoButton
								className="relative mt-6 w-full text-co-primary/40 text-xs hover:text-co-primary"
								onClick={history.showAll}
								variant="ghost"
							>
								<Text
									as="span"
									textKey="page.conversationHistory.showMore"
									variables={{ count: history.remainingCount }}
								/>
							</CoButton>
						)}
					</div>
				)}

				<div className="sticky bottom-4 z-10 flex w-full flex-col items-center gap-2">
					<CoButton
						className="relative w-full justify-between"
						onClick={() => history.startConversation()}
						size="large"
						variant="secondary"
					>
						<Icon
							className="-translate-y-1/2 absolute top-1/2 right-4 size-3 text-co-primary/60 transition-transform duration-200 group-hover/btn:translate-x-0.5 group-hover/btn:text-co-primary"
							name="arrow-right"
							variant="default"
						/>
						<Text as="span" textKey="common.actions.askQuestion" />
					</CoButton>
					<Watermark className="mt-4 mb-2" />
				</div>
			</FooterSurface>
		</div>
	);
};
