"use client";

import { useChatDispatch, useChatState } from "@/stores/chat/chat-context";
import type { ChatUnlockPaywallRequest } from "@/stores/chat/chat-state";

import { HistoryUnlockDialog } from "./history-unlock-dialog";
import { InsufficientCreditsDialog } from "./insufficient-credits-dialog";

export interface ChatUnlockDialogsProps {
  unlockPaywallRequest: ChatUnlockPaywallRequest | null;
  onCloseInsufficientCreditsDialog: () => void;
  onConfirmInsufficientCreditsDialog: () => void;
}

export function ChatUnlockDialogs({
  unlockPaywallRequest,
  onCloseInsufficientCreditsDialog,
  onConfirmInsufficientCreditsDialog,
}: ChatUnlockDialogsProps) {
  const chatState = useChatState();
  const chatDispatch = useChatDispatch();

  return (
    <>
      <HistoryUnlockDialog
        open={chatState.unlockHistoryPromptVisible}
        lockedCount={chatState.lockedHistoryCount}
        isLoading={chatState.isUnlockingHistory}
        errorMessage={chatState.unlockHistoryError}
        onClose={() => chatDispatch({ type: "ChatUnlockHistoryDismissed" })}
        onConfirm={() => chatDispatch({ type: "ChatUnlockHistoryConfirmed" })}
      />
      <InsufficientCreditsDialog
        open={unlockPaywallRequest !== null}
        creditBalance={unlockPaywallRequest?.creditBalance ?? 0}
        requiredCredits={unlockPaywallRequest?.requiredCredits ?? 0}
        shortfallCredits={unlockPaywallRequest?.shortfallCredits ?? 0}
        onClose={onCloseInsufficientCreditsDialog}
        onConfirm={onConfirmInsufficientCreditsDialog}
      />
    </>
  );
}