"use client";

import styles from "./history-unlock-dialog.module.css";

export interface HistoryUnlockDialogProps {
  open: boolean;
  lockedCount: number;
  isLoading?: boolean;
  errorMessage?: string | null;
  onClose: () => void;
  onConfirm: () => void;
}

export function HistoryUnlockDialog({
  open,
  lockedCount,
  isLoading = false,
  errorMessage,
  onClose,
  onConfirm,
}: HistoryUnlockDialogProps) {
  if (!open) return null;

  return (
    <div
      className={styles.overlay}
      role="dialog"
      aria-modal="true"
      aria-labelledby="history-unlock-title"
    >
      <div className={styles.dialog}>
        <h2 id="history-unlock-title" className={styles.title}>
          Unlock previous messages?
        </h2>
        <p className={styles.content}>
          We found {lockedCount} locked messages in your chat history. You can
          unlock them now to continue the conversation with full context.
        </p>
        {errorMessage ? (
          <p className={styles.error}>{errorMessage}</p>
        ) : null}
        <div className={styles.actions}>
          <button
            type="button"
            className={`${styles.button} ${styles.secondary}`}
            onClick={onClose}
            disabled={isLoading}
          >
            Later
          </button>
          <button
            type="button"
            className={`${styles.button} ${styles.primary}`}
            onClick={onConfirm}
            disabled={isLoading}
          >
            {isLoading ? "Unlocking..." : "Unlock now"}
          </button>
        </div>
      </div>
    </div>
  );
}
