"use client";

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="fixed inset-0 z-200 flex items-center justify-center bg-[rgba(0,0,0,0.5)] pb-[calc(var(--dialog-safe-margin,16px)+var(--app-safe-bottom,0))] pl-[calc(var(--dialog-safe-margin,16px)+var(--app-safe-left,0))] pr-[calc(var(--dialog-safe-margin,16px)+var(--app-safe-right,0))] pt-[calc(var(--dialog-safe-margin,16px)+var(--app-safe-top,0))]"
      role="dialog"
      aria-modal="true"
      aria-labelledby="history-unlock-title"
    >
      <div className="w-full max-w-(--pwa-install-dialog-max-width,360px) rounded-(--responsive-card-radius,40px) bg-(--color-page-background,#ffffff) px-(--responsive-card-padding,16px) pb-(--responsive-card-padding,16px) pt-(--responsive-card-padding-lg,24px) text-center shadow-[0_10px_20px_rgba(0,0,0,0.1)]">
        <h2
          id="history-unlock-title"
          className="m-0 mb-2.5 text-(length:--responsive-page-title,var(--font-size-22,22px)) font-bold leading-[1.2] text-text-foreground"
        >
          Unlock previous messages?
        </h2>
        <p className="mx-(--responsive-card-padding-lg,24px) mb-(--spacing-lg,16px) mt-0 text-left text-(length:--responsive-body,var(--font-size-lg,16px)) leading-normal text-[#393939]">
          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="mx-(--responsive-card-padding-lg,24px) mb-(--spacing-lg,16px) mt-0 text-left text-(length:--responsive-caption,var(--font-size-md,14px)) leading-[1.4] text-[#c0364c]">
            {errorMessage}
          </p>
        ) : null}
        <div className="flex w-full gap-(--spacing-md,12px)">
          <button
            type="button"
            className="flex min-h-(--pwa-button-height,44px) flex-auto cursor-pointer items-center justify-center rounded-bottom-sheet border-0 bg-(--color-text-secondary,#9e9e9e) text-(length:--responsive-body,var(--font-size-lg,16px)) font-semibold text-(--color-pwa-button-text,#ffffff) disabled:cursor-not-allowed disabled:opacity-72"
            onClick={onClose}
            disabled={isLoading}
          >
            Later
          </button>
          <button
            type="button"
            data-analytics-key="chat.unlock_history"
            data-analytics-label="Unlock chat history"
            className="flex min-h-(--pwa-button-height,44px) flex-auto cursor-pointer items-center justify-center rounded-bottom-sheet border-0 bg-[linear-gradient(var(--color-button-gradient-start,#ff67e0),var(--color-button-gradient-end,#ff52a2))] text-(length:--responsive-body,var(--font-size-lg,16px)) font-semibold text-(--color-pwa-button-text,#ffffff) disabled:cursor-not-allowed disabled:opacity-72"
            onClick={onConfirm}
            disabled={isLoading}
          >
            {isLoading ? "Unlocking..." : "Unlock now"}
          </button>
        </div>
      </div>
    </div>
  );
}
